As part of the 'Poison Blog' concept, I decided to write a small web app to display a listing of the posts since I thought it would be nice to have an index stored somewhere. After looking around a bit, I decided to use Meteor.

Meteor is a JavaScript framework that smartly bundles other JavaScript packages to allow you to create web apps super fast. What usually takes quite a bit of effort (setting up database, getting templates to work etc) is there, out of the box when you create a Meteor project.

Won't go into the details of how it works (to be honest, I don't know myself), instead I shall share some tips that I have come across whilst playing around with Meteor.

1. Read the docs, they're good

Although you may feel like jumping straight in after watching a video or two about Meteor, I highly recommend reading (or at least skimming) through the Meteor Documentation, they are very well written. Go to them as your first point of reference when you're confused or stuck. One tip when reading the docs, take careful note of the Server/Client availability, not only will it help with using it properly, it also helps with understanding it.

2. Unofficial Meteor FAQ

If the official docs don't answer all your questions,  another goto place is the Unofficial Meteor FAQ. It has a pretty good list of questions, answers, misc tips and is fairly well maintained. There is always Google; but often there is too much information and you don't always know good from bad. Reading through this FAQ could potentially save hours sifting through random answers/results from Google.

3. MongoDB

Out of the box, Meteor uses MongoDB for persistence which allows you to use JSON as the one data format across your entire app. This is great, except if you are very new to Mongo or never used it before. Meteor collections and Mongo syntax are pretty much the same (with some very minor differences), so if you know Mongo you'll be fine. If you don't, here are two quick tips that will hopefully save a lot of pain.

  1. fetch() - eg. Posts.find().fetch()
    Running Posts.find() will return a cursor, but calling fetch() returns the JSON object. This is extremely useful when debugging via the browser console. The cursor has other usages, but when debugging to find out what data is available to use, you probably just want to see the JSON.

  2. {multi: true} - eg. Posts.update({}, {$set: {graduated : true}, {multi: true}})
    This maybe basic knowledge to those familiar with Mongo, but not so for those who are not. By default, Mongo's update() method only updates one document. In order to update several documents, you need to use the multi option.

4. Default packages: autopublish and insecure

By default Meteor comes with two packages: autopublish and insecure. These are great for debugging and prototyping, but not so much for production, since they will definitely be a security concern if left in.

  • autopublish - publishes all the collections automatically (ie. all collections will be available on the client)
  • insecure - gives the client full read/write access to the database

As you can imagine, you would only want the client to know about collections (and fields) that you have specified, and definitely only want the client to make certain database calls.

To remove these packages simply run meteor remove autopublish and meteor remove insecure from the command line. On the Server side of things, you will now need to specifically publish collections you want to expose to the client and define the access permissions the client has to the database.

5. Publishing/Subscribing + ready()

In general, Meteor apps are blazingly fast...with the exception of the initial load when the server is pushing the database documents to the client. There can often be a few seconds before the collection is ready for the client to use (especially true when not running on localhost). In general you will want to do something while waiting for the collection to be ready before accessing the collection. Checking if the collection is ready is quite simple. Below are code snippets form the client/server that demonstrate how this can be achieved.

// Server
Meteor.Publish('posts', function(){
   return Posts.find({}); // publish the posts collection
});

// Client
postsSubscription = Meteor.Subscribe('posts');

if (postsSubscription.ready()) {
   // Posts collection is now ready!
}

6. Single page app

From my understanding of Meteor, it is ideally used for single page apps. However, if you want multi page apps that is also possible, you just need to add a router to handle this. Meteor doesn't come with a router package, however there are many available in Atmosphere. To install packages from Atmosphere, you will first need to get Meteorite.

You will notice that many tutorials will refer to "meteor-router", however development on that project has now shifted to "iron-router". Iron Router is a bit more complicated, but it is also a lot more powerful. It is well worth the effort in reading up and learning Iron Router if you want to have mult-page apps. If you want a quick overview/introduction to Iron Router, here is a good introduction video by the guys who made Iron Router.