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  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://
cd todos

# install dependencies

# 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.


One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s