Building Web Applications with Meteor

In search of a weekend hack and after hearing a number of nice comments about the Meteor programming platform I decided to kill two birds with one stone by porting Yet Another Choose Your Own Adventure (first debuted at Art Hack Day SF) to Meteor for folks to play online.

The result is http://adventure.gleitzman.com/

Going to meet the meteor

Programming with Meteor has a bit of a learning curve but the included examples are an excellent place to start. Below are some thoughts are observations – follow along at home with the code at https://github.com/gleitz/meteorcyoa.

Everything is Javascript

Both the client and the server are written in Javascript. This can lead to far fewer context switches and lots of shared code between the backend and frontend. In practice my application was heavy on client side code and light on the server but for anything larger than a weekend hack this code sharing would be useful.

Meteor doesn’t put a lot of requirements on how you write your code. Porting an existing node application to Meteor would be a snap and you aren’t required to use any of Meteor’s included packages. This made learning the framework much easier – I was able to write a working prototype in straight JS and then plug in Meteor packages when needed.

Database everywhere

Both the client and the server share the same API for accessing the database. You define a collection of elements with:

Pages = new Meteor.Collection("pages");

Inserting records is a snap. You can insert a list of JSON elements on the server with:

Meteor.startup(function () {
    if(Pages.find().count() === 0){
        var pages = JSON.parse(MY_JSON_LIST);
        for (page in pages) {
            Pages.insert(pages[page]);
        }
    }
});

var page = Pages.findOne({id:number});

Meteor is backed by a Mongo database and you can set up access rules to make sure the client can’t modify or delete records without permission. Your models are also automatically synchronized with the client for fast prefetching.

Web Sockets

Meteor handles work behind the scenes to establish a socket connection to the client, falling back to long-polling if necessary. This is a hug win especially given all the headaches I’ve had supporting sockets in Django. Pub/sub functionality is also provided by the API if you need to notify a batch of clients that an event has occurred.

Open Source

Rather than build entirely new components, Meteor embraces existing awesome open-source technologies like Handlebars, Underscore, Bootstrap, jQuery, D3, and LESS. You can of course use your own packages as well and Meteor plays nicely with Node packages from NPM.

To show how Meteor is integrated with Handlebars, consider the phone dial which is defined by the following template:

    
        
            ☎
            {{#each numbers}}
            {{this}}
            {{/each}}
        
    

Event handlers and the numbers are defined as follows:

    Template.dial.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];    
    Template.dial.events({
        'mousedown #dialer': mousedown,
        'mousemove #dialer': mousemove,
        'click #center': click
    });

Deployment

Releasing your app is as simple as:

meteor deploy APP-NAME.meteor.com

You can also run code on your own server quite easily.

Gripes

One “feature” of Meteor is automatic page reloads when your code changes. Touch a file and your page will have refreshed when you return to the browser. I ran into trouble after making changes to a bunch of CSS classes in the browser, editing a file, and returning to the browser to find the page had reloaded and all my CSS changes were gone.

Meteor also does quite a bit of magic behind the scenes to make everything “just work”. Building this project didn’t require too much digging into the Meteor framework but I can imagine having to spend a little time reading internal code if I wanted to change how the magic works. Thankfully there is a nice community of folks over at StackOverflow who can answer your meteor questions.

A New Era?

All in all I’m quite happy with the Meteor experience. Development cycles are quick and the included packages were easy to use. I won’t be using Meteor yet to build large-scale applications but it has certainly won me over as a platform for weekend hacks (a spot previously held by Google App Engine). With $11.2M in the bank I’m confident I’ll be building on a platform that will be supported in the future.

What are you waiting for? Head over to http://docs.meteor.com/ to build an app of your own.