Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Jonnie Spratley, who currently works for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products, and teaches a variety of programming courses at AcademyX.

In this post we will talk about using Meteor, which is an ultra-simple environment for building modern web applications. What once took weeks, even with the best tools, now takes hours with Meteor.


“Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.”


In order to keep development as smooth as possible, the Meteor framework has a few concepts you should become familiar with before diving in. Read A Giant Meteor appears! in Getting Started with Meteor.js JavaScript Framework for more about the Meteor framework. Here are seven principles of Meteor, which come from the Meteor documentation:

  • Data on the Wire. Don’t send HTML over the network. Send data and let the client decide how to render it.
  • One Language. Write both the client and the server parts of your interface in JavaScript.
  • Database Everywhere. Use the same transparent API to access your database from the client or the server.
  • Latency Compensation. On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
  • Full Stack Reactivity. Make realtime the default. All layers, from database to template, should make an event-driven interface available.
  • Embrace the Ecosystem. Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
  • Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Accomplish this through clean, classically beautiful APIs.

How To

We’re going to build a simple blog single page web application to demonstrate how fast application development is using the Meteor platform. The code is available on Github and the finished demo is available here.

1. Installing Meteor

Before we can start development we need to install the Meteor stack, so execute the following:

2. Creating the Project

Now that we have the framework installed we can go ahead and create a new Meteor project, so execute the following:

3. Running the Project

Now that we have the project created, start the local server and start development, execute the following:

We are now ready to start using Meteor and can get started adding our project’s logic.

4. Building the Project

Let’s start with the smart package system.

Smart Packages

Meteor has an easy-to-use smart package system for adding additional functionality to our project. Let’s add some packages to our project before we start writing code.

Available commands:

  • List packages – $ meteor list
  • Install package – $ meteor add [package]
  • Remove package – $ meteor remove [package]

Install the following:

Now we’re ready to start writing code for the client and the server.


Meteor includes Handlebars for its templating library of choice.


  • Declared as <template name="foo"> ... </template> in your main.html file.
  • Accessed as the a function from your main .js file.

Here is our main view:

And here is our blog view:

The following contains our post view:

And our post edit view:


Populating data into your .html views is very simple. In your main .js file you control the data to your view templates by using your collections to query for data.


A Meteor application is a mix of JavaScript that runs inside a client web browser. You can use an event map object to add event handlers in the controllers view.

Our Client logic:
The client function of our app sets the data on our templates, and attaches any events we need to listen for in the .html views.


Meteor apps use MongoDB as their database because it is supported the best at this time, however, support for other databases is coming in the future.

Server models:

Client models:

Application Startup: The server function of our app sets up the initial models, and at Meteor.startup runs a check to see if the Posts and Tags collection has any data, and populates if it doesn’t.

Our startup:
Since all of your JavaScript logic is in one file you use the Meteor.isClient or Meteor.isServer methods to handle what code to run at startup.

5. Deploying the Project

You can deploy your project for free on which is a full application server, which includes everything you need to deploy your application on the Internet.


In this post we have created an app with Meteor, showcasing how much can be created on both the client and the server side, with the help of the framework.

For more information about Meteor and other technologies used in this post see below:

Safari Books Online has the content you need

Instant Meteor JavaScript Framework Starter takes a behind the scenes look at Meteor, showing you not only the code, but the processes as well. Being completely different from your typical web framework, Meteor requires a dramatically new train of thought when constructing your apps, which we will explore throughout the course of this book.
Twitter Bootstrap Web Development How-To walks you step-by-step from Bootstrap basics to the creation of a fully-responsive, JavaScript-enhanced, multi-page website. After this quick and dirty Bootstrap bootcamp, you’ll not only be building serious sites, but you’ll be equipped to dive into the rest of what Twitter Bootstrap has to offer.
Smashing CoffeeScript is a full-color, practical book that explains the CoffeeScript language, syntax, and processes, and will soon have you producing concise and quality code. Ultimately, you’ll create RIAs and mobile apps faster, with less hassle.

About the author

jonnie Jonnie Spratley is currently working for GE as a UI Developer on the Industrial Internet Team building user interfaces for next generation products. He also teaches a variety of programming courses at AcademyX, and can be reached at @jonniespratley.

Tags: CoffeeScript, Github, Javascript, Meteor, MongoDB, Twitter Bootstrap, Web Applications,

Comments are closed.