Get started with Ember.js in 5 minutes

Recently there’s been a lot of discussion around different JavaScript frameworks such as Angular, Ember, Backbone with Marionette. After years of JS spaghetti code and memory leaks, these frameworks solve many pain points previously felt when building JavaScript applications. There are now great development tools that help to quickly get started creating responsive, single page applications with a maintainable codebase. Having rolled out a number of Backbone apps, I’ve been interested to see how well Ember works in comparison. Here we’re going to spend a moment with ember.js and Yeoman.

Before we start, you must have node installed and configured correctly. If not, install it and then come back.

Yeoman

Yeoman is an intelligent collection of tools that make developing JavaScript applications pain free (or at least less painful.) This is how we will be quickly scaffolding our application, installing its dependencies and running a development server to view the application.

In addition to the things we’ll be covering here, Yeoman will build/minify your app for production and run its test suite. See yeoman.io for more information.

Installing Yeoman

To install Yeoman and the generators for an Ember application, simply run:

npm install -g yo
npm install -g generator-ember

This will install the current version of Yeoman (rc1) and the Ember generators (0.5.9). Great! Now we’re ready to get going.

Creating The Ember.js App

Create a new directory for the application and switch into it:

mkdir ember-demo
cd ember-demo

Running yo ember from the command line will give you a menu similar to this:

Say yes to the following options:

• Would you like to include Twitter Bootstrap for Sass?

Following this, Yeoman will scaffold out an Ember app and automatically install its required dependencies by running bower install and npm install.

Once this is done, all you need to do is run

grunt server

This will open a web browser with your app which should look something like this:

with the following info available in your browser’s console:

So, great, we’re now running a very simple Ember app. Wasn’t that easy?

Troubleshooting

If you’re having any trouble with this tutorial, make sure you have the latest versions of Yeoman and generator-ember installed - it’s simple to update them: npm update -g yo generator-ember

The Results

This may look simple, but there are a few interesting things going on.

The page is generated dynamically by Ember - have a look in app/index.html - you’ll see that there’s no markup, just a bunch of required scripts. Here’s where the magic is happening.

If you look in app/templates, you’ll see application.hbs and index.hbs. Two handlebar template files that are telling Ember what to render. The three colours are coming from data stored in scripts/app.js.

app.js

You can see that the colors printed on the index page are defined here in the array. Add another item to the array, and the page will list that.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ["red", "yellow", "blue"];
  }
});

index.hbs

Here’s the handlebar template that is used to render those items. Very simple, but a good illustration of how you can use handlebars to loop through an array.

<div class="hero-unit">
  <ul>
    {{#each item in model}}
    <li>{{item}}</li>
    {{/each}}
  </ul>
</div>

Conclusion

Using Yeoman, Bower, and Grunt is a great way to quickly scaffold the barebones for a new JavaScript program. In less than 5 minutes, you can go from nothing, to a basic framework to start building out your application.

Updated July 16, 2013 updated instructions for generator-ember 0.5.2

Updated July 19, 2013 updated instructions and screenshots for generator-ember 0.5.7

Updated July 27, 2013 generator-ember 0.5.9 and yeoman 1.0.0-rc.1.3