Toby Vervaart

Jan 28, 2014

Rapid prototyping with Meteor

I recently needed to prototype an application really fast. Since I’ve been playing with Meteor recently I figured it might be a good candidate to rapidly get my prototype from an idea to a working application. As it turns out, it is. I was able to get the application to a stage where users could interact with it in under a day. This is a high level outline of how I did it (not an in-depth coding tutorial, which may come later).

Initial sketches

As with most prototypes I started with some initial sketches of the application on paper. This helps to visualise the number of templates that need to be built and work out the user flow through the app.

MVP sketch
Initial sketches of the application

Set up the basic app structure

The next step is to create the basic app structure. First you need to create a new Meteor application by running meteor create *appname*. Then remove all the files created by Meteor and replace them with a custom structure. Since Meteor doesn’t place any restrictions on where you put your files[1] you can use any structure you require, but I like to follow the structure outlined in the book Discover Meteor which recommends the following:

The basic structure used for the application.
Basic folder structure

This structure separates your concerns of client, server, collections, libraries and packages.

Defining collections

The next step is to define the collections required for the application. Again, I prefer to do this on paper so I can get a mental map of the relationships between the data.

Building the UI

Since this is only a prototype I’m just using Bootstrap for the UI and generally follow the sketches I already produced. As part of my workflow, I prefer to build all the templates in static html before adding reactivity with Meteor.

Rough UI built with Bootstrap.
Part of the UI built in Bootstrap

Installing packages

Since I’ve got a reasonable idea of the packages I’ll need for this application I’ll go ahead and install them at this stage before I start writing any code. Some of the packages will be Meteor standard packages and others from the Meteorite package repository. The packages I’ll install for this application are:

Meteor standard packages

You can add Meteor standard packages by running the command meteor add *package_name*

accounts-ui
http://docs.meteor.com/#accountsui
The Meteor accounts package allows you to quickly set up user authentication and includes some popular Oauth providers such as Facebook, Twitter and Google out of the box.

Meteorite packages

And you add Meteorite packages by running the command mrt add *package_name*

bootstrap-3
https://atmosphere.meteor.com/package/bootstrap-3
I’m using Bootstrap for the UI so I’ll add the Bootstrap package.

iron-router
https://atmosphere.meteor.com/package/iron-router
Iron Router allows you to easily create routes, including authenticated routes.

popcorn
https://atmosphere.meteor.com/package/popcorn
Since this application makes use of annotated video, we’ll add the popcorn library from Mozilla.

Configuring routes

Now that our packages are installed I like to create all the routes that are required and hook them up to their respective templates. This allows me to browse through all the static templates and double check the application structure.

Adding user authentication

Since I’m using the accounts-ui package user authentication is super easy. All that’s required is to place the handlebars tag {{loginButtons }} anywhere in the templates and you’re done! If you’ve specified any Oauth providers you’ll need to do some configuration but it’s all outlined by the package.

Basic CRUD

Almost done. The last step is to add the basic CRUD operations so the application actually does something. This is as easy as defining the collections and writing some boilerplate code to request and display information from the MongoDB database.

Finished!

And… done. From start to finish I spent ~8hrs completing this basic application. Since everything (both client and server) is written in pure javascript Meteor makes it really simple to get a basic prototype up and running in a day.

A note on security
Since this app was developed as a very early stage prototype and not available on a public web server I didn’t worry at all about security. If you’re considering making your application public you should follow some basic security procedures (http://docs.meteor.com/#dataandsecurity).