TodoMVC With Ember.js and Guard

It’s 2013 and I find myself working at Codelation. It’s been great, but we don’t have a blog? How am I supposed to share some of the cool things we’re working on with the world? Well, here’s blog post number one of… one? Who knows, but at least it’s something.

The Project

One of the tasks I’ve been working on is setting up an Ember.js environment with all the nice bells and whistles that come along with frameworks like Rails. I wanted to get the templates out of the index.html file, not include every single JavaScript file individually, use Compass for CSS, use Jasmine for automated testing, and cleaner organization of all files used in the application.

TodoMVC and Ember.js

This is my take on TodoMVC using Ember.js. It does not follow the conventions required to be included in TodoMVC, but that’s not the goal of this project. TodoMVC is just a good “Hello World” example. I invite you to check it out the full project on GitHub:

Ember.js 1.0.0-pre.4

I did my best to follow the conventions used in the latest version of Ember.js. This includes the new router and Ember Data. A lot of this is still pretty new to me, so I can’t say with entire certainty that I’ve got it all down. This project should at least give you a pretty good idea of how to use the latest conventions.

Directory Structure

The directory structure was inspired by the many development environments I’ve used. It should be pretty straight forward, but here’s the layout with an explanation to give you an overview of what’s going on.

app                 The app directory contains  
|----controllers    the Ember application files.
|----templates      The build directory contains
|----views          the generated application.
build               It is not included in the repo.  
|----images         The config directory contains
|----js             configuration files for Compass,
config              Jammit, Jasmine, and JSHint.  
|----html           The resources directory contains
|----icons          the files used for presentation.
|----images         HTML files, favicon.ico, iOS 
|----sass           home screen icons, images, and
| |----mixins       SASS files to be compiled to CSS.
| |----partials
spec                The spec directory contains JavaScript  
|----controllers    tests written for Jasmine.
| |temp             The temp directory is temporary. :) 
| |----templates
|----vendor         The vendor directory contains third
                    party JavaScript libraries.

Automation with Guard

This directory structure is possible because of Guard. There are other tools that can do this as well, but I tend to favor tools made by the Ruby community.

Guard is responsible for:

  • Compiling SASS into CSS
  • Compiling Handlebars templates into JavaScript
  • Copying images, icons, and HTML files to the proper locations in the build directory
  • Running JSHint on all JavaScript
  • Compiling and minifying JavaScript files so you don’t have to write a new script tag for every new JS file you want to include
  • Automated testing with Jasmine
  • Running a Webrick server
  • So much cool stuff…

Closing Thoughts

I’d love to hear what any thoughts from anyone using Ember on a more regular basis. We’re looking to start a project with Ember, and this has been our little playground for learning. It’s been a lot of fun to work on, and I can’t wait to actually put Ember to good use. Ember’s bindings, computed properties, and observers are such a dream to work with.

Thanks for checking out my first blog post for Codelation. Contact me on Twitter with any feedback or thoughts.