Getting Started with Ember.js

Oct 27, 2014 • Brett Chalupa

I have spent the last six months learning Ember.js. I
want to share the resources I utitlized along the way and how I think someone
interested in Ember.js could get started building applications with it.

Introduction to Ember.js

Ember.js is a front-end JavaScript framework for building web applications.
Ember.js recognizes the URL as a key part of the web and seeks to make URLs the
cornerstone of applications built with it. Some say Ember.js is like Ruby on
Rails but for the front-end because it values convention over configuration.
One might use Ember.js instead of Angular.js or Backbone.js.
Robin Ward (eviltrout) wrote about why Discourse uses
Ember.js. I
would echo similar thoughts as to why you should use Ember.js.

Getting Started

Start with the the Ember.js home page. It does a
fine job of explaining the core pieces of the framework with interactive
examples. It also highlights some of the organizations that use Ember.js.

Next up is Tom Dale’s Building an Ember.js Application
video. Tom Dale is an Ember.js
core team member, and he does a good job at introducing Ember.js by building a
simple blog. Be sure to follow along and check out the
source. It introduces the router,
routes, controllers, Handlebars, and Handlebars helper, which are all components of
Ember.js that you will use in your own apps.

The Ember.js Getting Started guide
walks through building TodoMVC with Ember.js. Follow
along with building it out. Each step is digestible, and the live previews at
the end of each section help make sure you are on the right path. At the end you
will have a working todo app.

Beyond Hello World and Todo Apps

Building a todo application feels like writting a “Hello World” program these
days. It gives you an idea of some basic parts of a language or framework, but
it does not cover all of the concepts. I suggest going through Smashing
Magazine’s Ember.js
introduction.
It walks you through building a contact manager. It covers topics from the
previous resources, using Grunt to compile your JS
and templates, and introduces views.

When I finished the Smashing Mag lesson, I felt like I had a solid grasp of what
goes where in an Ember.js app.

Getting Serious with Ember CLI

I consider learning Ember CLI a crucial next step
in learning Ember.js. Ember CLI seeks to make Ember.js even better by giving a
defined structure to projects, handling asset compilation with
Broccoli, supporting ES6 modules by
transpiling the JS, making it easy to test via the command line,
including a baked in development server, using Bower for dependency management,
and handling content security policies.

Ember CLI makes it easy to get started with a set of sensible defaults. Miguel
Camba wrote a good
article
on why they think Ember CLI is a game changer. The points they bring up are ones
that I agree with.

Another big plus of Ember CLI is the ember command line tool it gives you. It
features such commands as ember new your-app-name to generate a new project,
ember server to start up an Express.js app for local development, and ember
generate RESOURCE NAME to create new models, controllers, etc. with the
associate test files.

Brian Cardarella at DockYard wrote up a series on building a web applications
with Ember CLI and Ruby on Rails which covers testing, deployment, and building a
non-trivial application. The first part
will get you started.

If building out an application with a Rails back-end seems like a bit much for
learning Ember, I would suggest rewriting the TodoMVC app or Smashing Mag
contact app with Ember CLI. I did this, and it really helped drive
home how to use Ember CLI.

Running With It

Now that you are ready to run ember new your-awesome-new-app, run with it!
Use the code you have written as reference and ask questions when you get stuck.
One of the best parts about building software is bringing an idea to life,
and I find that Ember.js makes it more enjoyable.

Conclusion

I have enjoyed learning Ember.js. There are plenty of resources out there, solid
docs, and a community that is making it better every day. Since starting to
use Ember CLI, I cannot imagine building and Ember.js application without it.

At times, the learning curve may seem steep, but stick with it. It will be worth
it. Best of luck learning Ember.js!

FullStack Newsletter

Want to get more content like this delivered to your inbox? Sign up for our newsletter.