What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Building Single-page Web Apps with Meteor

Chapter 1. Getting Started with Meteor

Welcome to this book on Meteor. Meteor is an exciting new JavaScript framework, and we will soon see how easy it is to achieve real and impressive results with less code.

In this chapter, we will learn what the requirements are and what additional tools we need to get started. We will see how simple it is to get our first Meteor application running and what a good basic folder structure for a Meteor app could be. We will also learn about Meteor's automatic build process and its specific way of loading files.

We will also see how to add packages using Meteors official packaging system. At the end of the chapter, we will take a short look at Meteor's command-line tool and some of its functions.

To bring it together, we will cover the following topics:

The full-stack framework of Meteor
Meteor's requirements
Installing Meteor
Adding basic packages
Meteor's folder conventions and loading order
Meteor's command-line tool

The full-stack framework of Meteor

Meteor is not just a JavaScript library such as jQuery or AngularJS. It's a full-stack solution that contain frontend libraries, a Node.js-based server, and a command-line tool. All this together lets us write large-scale web applications in JavaScript, on both the server and client, using a consistent API.

Even with Meteor being quite young, already a few companies such as https://lookback.io, https://respond.ly, and https://madeye.io use Meteor in their production environment.

If you want to see for yourself what's made with Meteor, take a look at http://madewith.meteor.com.

Meteor makes it easy for us to build web applications quickly and takes care of the boring processes such as file linking, minifying, and concatenating of files.

Here are a few highlights of what is possible with Meteor:

We can build complex web applications amazingly fast using templates that automatically update themselves when data changes
We can push new code to all clients on the fly while they are using our app
Meteor core packages come with a complete account solution, allowing a seamless integration of Facebook, Twitter, and more
Data will automatically be synced across clients, keeping every client in the same state in almost real time
Latency compensation will make our interface appear super fast while the server response happens in the background.

With Meteor, we never have to link files with the <script> tags in HTML. Meteor's command-line tool automatically collects JavaScript or CSS files in our application's folder and links them in the index.html file, which is served to clients on initial page load. This makes structuring our code in separate files as easy as creating them.

Meteor's command-line tool also watches all files inside our application's folder for changes and rebuilds them on the fly when they change.

Additionally, it starts a Meteor server that serves the app's files to the clients. When a file changes, Meteor reloads the site of every client while preserving its state. This is called a hot code reload.

In production, the build process also concatenates and minifies our CSS and JavaScript files.

By simply adding the less and coffee core packages, we can even write all styles in LESS and code in CoffeeScript with no extra effort.

The command-line tool is also the tool for deploying and bundling our app so that we can run it on a remote server.

Sounds awesome? Let's take a look at what's needed to use Meteor.

Meteor's requirements

Meteor is not just a JavaScript framework and server. As we saw earlier, it is also a command-line tool that has a whole build process for us in place.

Currently, the operating systems that are officially supported are as follows:

Mac OS X 10.6 and above
Linux x86 and x86_64 systems
Windows
Note
The Windows installer is still in development at the time of writing this book. Please follow the wiki page at https://github.com/meteor/meteor/wiki/Preview-of-Meteor-on-Windows.

This book and all examples use Meteor 1.0.

Using Chrome's developer tools

We will also need Google Chrome or Firefox with the Firebug add-on installed to follow examples that require a console. The examples, screenshots, and explanations in this book will use Google Chrome's developer tools.

Using Git and GitHub

I highly recommend using GitHub when working with web projects, such as the one we will work on in this book. Git and GitHub help us to back up our progress and let us always go back to previous states while seeing what we've changed.

Git is a version control system, which was created in 2005 by the inventor of Linux, Linus Torvalds.

With Git, we can commit any state of our code and later go back to that exact state. It also allows multiple developers to work on the same code base and merge their results together in an automated process. If conflicts appear in this process, the merging developer is able to resolve those merge conflicts by removing the unwanted lines of code.

I also recommend registering an account at http://github.com, as this is the easiest way to browse our code history. They have an easy to use interface as well as a great Windows and Mac app.

To follow the code examples in this book, you can download all code examples for each chapter from the book's web page at https://www.packtpub.com/books/content/support/17713.

Additionally, you will be able to clone the book's code from http://github.com/frozeman/book-building-single-page-web-apps-with-meteor. Every tag in this repository equals to one chapter of the book and the commit history will help you to see the changes, which were made in each chapter.

Creating our first app

To create our first app, we open the terminal, go to the folder where we want to create our new project, and enter the following commands:

$ cd my/developer/folder
$ meteor create my-meteor-blog

Meteor will now create a folder named my-meteor-blog. The HTML, CSS, and JavaScript files that Meteor created for us inside this folder are already a fully working Meteor app. To see it in action, run the following commands:

$ cd my-meteor-blog
$ meteor

Meteor will now start a local server for us on port 3000. Now, we can open our web browser and navigate to http://localhost:3000. We will see the app running.

This app doesn't do much, except showing a simple reactive example. If you click on the Click Me button, it will increase the counter:

For later examples, we will need Google Chrome's developer tools. To open the console, we can press Alt + command + I on Mac OS X or click on the menu button on the upper-right corner of Chrome, select More tools, and then Developer tools.

The Developer tools allow us to inspect the DOM and CSS of our website, as well as having a console where we can interact with our website's JavaScript.

Creating a good folder structure

For this book, we will build our own app from scratch. This also means we have to set up a sustainable folder structure, which helps us to keep our code organized.

With Meteor, we are very flexible concerning our folder structure. This means we can put our files wherever we want, as long as they are inside the app's folder. Meteor treats specific folders differently, allowing us to expose files only on the client, the server, or both. We will take a look at those specific folders later.

But, first let's get our hands dirty by deleting all preadd files in our newly created application folder and creating the following folder structure:

- my-meteor-blog
  - server
  - client
    - styles
    - templates

Preadd style files

To fully focus on the Meteor code but still have a pretty-looking blog, I strongly recommend to download the code that accompanies this chapter from the book's web page at http://packtpub.com/books/content/support/17713. They will contain already two drop-in-place style files (lesshat.import.less and styles.less), which will let your example blog look pretty in the upcoming chapters.

You can also download these files directly from GitHub at https://github.com/frozeman/book-building-single-page-web-apps-with-meteor/tree/chapter1/my-meteor-blog/client/styles and copy them to the my-meteor-blog/client/styles folder manually.

Next, we need to add some basic packages so that we can start building our app.

Adding basic packages

Packages in Meteor are libraries that can be added to our projects. The nice thing about Meteor packages is that they are self-contained units, which run out of the box. They mostly add either some templating functionality or provide extra objects in the global namespace of our project.

Packages can also add features to Meteor's build process such as the stylus package, which lets us write our app's style files with the stylus preprocessor syntax.

For our blog, we will need two packages at first:

less: This is a Meteor core package and will compile our style files on the fly to CSS

jeeeyul:moment-with-langs: This is a third-party library for date parsing and formatting

Adding a core package

To add the less package, we can simply open the terminal, go to our projects folder, and enter the following command:

$ meteor add less

Now, we are able to use any *.less files in our project, and Meteor will automatically compile them in its build process for us.

Adding a third-party package

To add a third-party package, we can simply search for packages on either https://atmospherejs.com, which is the frontend for Meteors packaging system, or use the command-line tool, $ meteor search <package name>.

For our blog, we will need the jeeeyul:moment-with-langs package that allows us later to simply manipulate and format dates.

Packages are namespaced with the authors name followed by a colon.

To add the moment package, we simply enter the following command:

$ meteor add jeeeyul:moment-with-langs

After the process is done, and we restarted our app using $ meteor, we will have the moment object available in our app global namespace and we can make use of it in the upcoming chapters.

Should we ever want to add only specific version of a package, we can use the following command:

$ meteor add jeeeyul:moment-with-langs@=2.8.2

If you want a version in the 1.0.0 (but not the 2.0.0) range use the following command:

$ meteor add jeeeyul:[email protected]

To update only packages we can simply run the following command:

$ meteor update –-packages-only

Additionally, we can update only a specific package using the following command:

$ meteor update jeeeyul:moment-with-langs

That's it! Now we are fully ready to start creating our first templates. You can jump right into the next chapter, but make sure you come back to read on, as we will now talk about Meteor's build process in more detail.

Meteor's folder conventions and loading order

Though Meteor doesn't impose restrictions concerning our folder names or structure, there are naming conventions that help Meteor's build process to determine the order in which the files need to be loaded.

The following table describes the folder and their specific loading order:

Folder name	Load behavior
`client`	This is loaded only on the client.
`client/compatibility`	This will not be wrapped in an anonymous function. This is made for libraries that declare top-level variables with `var`. Additionally, files in this folder will be loaded before other files on the client.
`server`	Files in this folder will only be served on the server.
`public`	This folder can contain assets used on the client, such as images, `favicon.ico`, or `robots.txt`. Folders and files inside the public folder are available on the client from root, `/`.
`private`	This folder can contain assets that will only be available on the server. These files are available through `Assets` API.
`lib`	Files and subfolders inside a `lib` folder will be loaded before other files, where `lib` folders in deeper folders will be loaded before the files in `lib` folders of their parent folders.
`tests`	Files inside this folder won't be touched or loaded by Meteor at all.
`packages`	When we want to use local packages, we can add them to this folder and Meteor will use those packages, even if one with the same name exists in Meteor's official package system. (However, we still have to add the packages using `$ meteor add ....`)

The following table describes filenames that have created a specific loading order:

Filename	Load behavior
`main.*`	Files with this name are loaded last, whereas files in deeper folders are loaded before the files of their parent folders
`.`	Files outside of the former mentioned folders in this table are loaded on both the client and server

So, we see that Meteor gathers all files except the ones inside public, private, and tests.

Additionally, files are always loaded in the alphabetical order, and files in subfolders are loaded before the ones in parent folders.

If we have files outside the client or server folder and want to determine where the code should be executed, we can use the following variables:

if(Meteor.isClient) {
  // Some code executed on the client
}

if(Meteor.isServer) {
  // Some code executed on the server. 
}

We also see that code inside a main.* file is loaded last. To make sure a specific code only loads when all files are loaded and the DOM on the client is ready, we can use the Meteor's startup() function:

Meteor.startup(function(){
  /*
  This code runs on the client when the DOM is ready,
  and on the server when the server process is finished starting.
  */
});

Loading assets on the server

To load files from inside the private folder on the server, we can use the Assets API as follows:

Assets.getText(assetPath, [asyncCallback]);
// or
Assets.getBinary(assetPath, [asyncCallback])

Here, assetPath is a file path relative to the private folder, for example, 'subfolder/data.txt'.

If we provide a callback function as the second parameter, the Assets() method will run asynchronously. So, we have two ways of retrieving the content of an assets file:

// Synchronously
var myData = Assets.getText('data.txt');

// Or asynchronously
Assets.getText('data.txt', function(error, result){
  // Do somthing with the result.
  // If the error parameter is not NULL, something went wrong
});

Note

If the first example returns an error, our current server code will fail. In the second example, our code will still work, as the error is contained in the error parameter.

Now that we understand Meteor's basic folder structure, let's take a brief look at the Meteor's command-line tool.

What you will learn

Create reactive templates that update themselves when data changes

Use database queries on the client and the server to retrieve, sort, and manipulate datasets

Understand data synchronization using a publication/subscription model and make API calls a thing of the past

Discover how you can secure your data flow on the server side to keep confidential data secret

Add routing to a singlepage application and make it appear like a real website

Build your own advanced reactive objects and make everything rerun when you want

Make your own Meteor packages and learn how to make them public

Unit test your packages and Meteor applications

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

$43.99

Building Single-page Web Apps with Meteor

$26.99

Getting Started with Meteor.js JavaScript Framework - Second Edition

$28.99

Total $ 99.97

Filter reviews by

All

Amazon verified reviews

Ian Sep 04, 2015

very good intro to meteor. if you know nodejs, you can start building simple apps with meteor now. with this book, you will not be able to write a facebook, but you can gain a lot of foundamental 'ideas'.the author does have a follow-up tutorial series on the internet, which further extends your understanding of meteor. after that, plus if you know bootstrap, you will then be able to build some interesting stuff.highly recommend!

Amazon Verified review

Sam Hagman Mar 24, 2015

This is a great book for "amateur beginners" and "advanced beginners" alike.What I mean "amateur beginners" are programmers that know some JavaScript and have seen and played around with Node. "Advanced beginners" are programmers that already know a JavaScript framework on the front-end and also a Node framework on the back-end and have had a lot of experience with JavaScript.For the "amateur beginners" you get a book that explains things in simple, clear terms and has just enough depth of explanation that you can understand why Meteor is so cool. For "advanced beginners" you get a great discussion of the different options for some trickier aspects of Meteor like deployment and under-the-hood Meteor reactivity.I have read several Meteor books and lots and lots of articles about Meteor and I feel that this book gives a great overview of the Meteor platform. I think my favorite part of the book is that it acknowledges where things have more depth than what can fit in the book, which gave me a bunch of direction on where to focus my Google searches to understand Meteor on a more advanced level.Overall, great book if you want to learn Meteor from scratch.

Paul Mar 18, 2015

I would recommend this to anyone looking for a gentle easy to follow introduction to Meteor. It pretty much does what other books do by leading you through how to create a blog (accounts, permissions, routing etc).The sections on packaging and deployment are clear to understand.Chapter 12 on testing with Velocity is well worth the money spent on the book. This is a great new feature of Meteor which is explained well in the book.It is up to date with the latest version of Meteor.

Bharat C. Ruparel May 17, 2015

I am working through the book line-by-line and approximate half-way through the book (Chapter 6). I do not want to wait anymore to write this review since this book may be just what you need if you have any interest in learning meteor. Fabian writes in a very clear and simple style and obviously knows Meteor well.My main motivation in writing the review here is two-fold:1. I read reviews before purchasing any books or materials and more often than not, have benefitted from them. So I want to return the favor by giving an enthusiastic thumbs-up for anyone wanting to learn Meteor.2. I am hoping that Fabian follows up this excellent effort by a more intermediate/advanced text where he addresses the issues that a developer has to tackle in creating real-life production applications. While this book does its job very well in explaining the basics using a running blog example, the same style could be used to write a more advanced text that deals with real-life issues. Almost always that involves using third-party packages, so a demonstration of how to use them in the context of an application would be very useful.I am an experienced Rails developer and am looking to Meteor to make my applications more responsive (or shall we say reactive?) leading to a better user experience. Also, another obvious benefit is the scalability since clients can do more computations and far more important, rendering of pages. As Javascript runtimes in the browsers (also in the servers, e.g. node.js) improve rapidly, it makes no sense to do most of the page rendering on the server. It should be the client.I have gone through other texts on Meteor as well as the official tutorial. This book by far, is the clearest. Fabian, Keep up the great work and follow through on my suggestion :) I will buy a book written by you anytime if the topic is of interest to me as it is here.

Asit Dhal Jan 05, 2016

This book is my first exposure towards Meteor. This book gives excellent beginning towards Meteor.

Building Single-page Web Apps with Meteor: Build real-time single page apps at lightning speed using the most powerful full-stack JavaScript framework around

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Note

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

Filter reviews by

People who bought this also bought

About the author

FAQs