The Ember.js Todos Demo Application

Ember is “a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.”  Said another way, it’s a framework which takes the typical tedium and spaghetti-code out of jQuery-heavy apps.  Ember is especially strong at keeping DOM elements in sync with each other and in sync with underlying data.

A top-to-bottom walkthrough of Ember is provided at http://emberjs.com/.  I’ve read through that page a couple times, yet I learn best by examining working code.  In this series of posts, I perform an examination and walkthrough of an Ember demo app.

Install the demo app

The authors of Ember provide several demo apps.  The simplest is the Todos application (source code).

Using ruby 1.9, the steps below will create the Todos app locally.

# get the source
git clone git://github.com/emberjs/todos.git
cd todos

# install dependencies
bundle

# assemble the app
bundle exec rakep build

# run preview server
bundle exec rakep server

Fire up your browser, steer it to http://localhost:9292/, and you should see this:

Go ahead and play around with it.  Learn how it works.  I’ll wait here.  When you’ve had your fill of creating and completing Todos, come back and in the next post, we’ll take dive into the code behind it as a way to introduce ourselves to Ember.