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.

The guides on the Ember.js website are a good read and solid reference. They explain all of the concepts of Ember.js in depth. Ember.js also has an active discussion forum where you can see what folks are talkin about, ask questions, and find answers. Lastly, reference the API when you are unsure about how something works.

Additional Resources

Along my journey of learning Ember.js, I stumbled across some other resources that I found very helpful. Hopefully you will too:

• Ember Weekly Newsletter - A weekly email full of Ember.js awesomeness. Each week I find a library that could be useful and learn something new about Ember.js.
• Ember Conf 2014 videos - Videos from this year’s Ember Conf. They are well made ad there is a little something for everyone who is interested in Ember.js.
• Creating an Integration Test with Ember.js - A useful screencast by Robin Ward (eviltrout) on integration testing with Ember.js.

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!