Four Noble Truths of Ember.js

Interested in learning Ember.js? Based on my experience, I’ve put together four simple steps to help beginners start out right.

1. Ember-Ace the CLI

Ember is best with `ember-cli` (and while you’re at it, get Ember Inspector, too). Ember-CLI provides out-of-the-box project scaffolding, test creation, boilerplate code generation, file watching, and automated testing–a feat that would otherwise cost significant development time. This is one of Ember’s best features because it makes starting a project easy, and it’s extremely helpful during development.

If you aren’t a believer in convention over configuration, it may be because you haven’t worked on a large project in which several styles and project structures uneasily coexist. Since Atomic is a software consultancy and in many cases we are writing code that may be picked up by another developer or team, convention brings a great deal of value to our clients.

2. Learn Some MVC

Whereas some front-end frameworks (looking at you, Angular 1.x) blur the line between model, view, and control, I especially appreciate that Ember insists on model, view, and control being distinct entities. This makes them easier to test as individual components, and it makes the templates far easier to read and reason about. Ember has a track record of supporting this separation as evidenced by the recent deprecation of `Ember.View` in favor of `Ember.Component`.

The most important concept to get familiar with is `Ember.Component`. Not only are components the best way to write DRY, tested, and maintainable code, but they’re also the future; eventually Ember will deprecate `Ember.Controller` in favor of routable components.

One thing that the Ember beginner ought to keep in mind is that code reuse is not the most important reason to make a component; the isolation of logic (and therefore ease of testing) is at least as valuable as the potential for reuse. Code written by seasoned Ember developers will have loads of components.

3. Data Down, Actions Up!

It’s a good idea to complete the guide, especially since it will help you get acquainted with proper Ember conventions. Probably the most important thing to learn here is the way data flow works. The adage is data down, actions up.

The idea is that data should pass from the route to the controller to the component to display in the view. Then the user can trigger actions that bubble back up to be handled either by the controller or the route, changing the view. The tricky part is that because components can be nested and routes can be nested, you may find yourself bubbling things up a long way. This can be frustrating, but it’s a tradeoff you make in order to neatly encapsulate your logic into testable and understandable units.

4. Contribute to the Community

First, join the Slack! It’s full of smart people who will readily help you and, since Ember is open-source, you can get insight into the development process and vision for the future of the framework. Because Ember is open-source and has such a vibrant community, it moves very quickly. Blog posts and StackOverflow answers have a short shelf life–as they do for many front-end frameworks.

Second, get involved. If you completed the guide, perhaps you found a typo or a missing link. Contributing to the community is part of what makes Ember great.

Hopefully this guide and the links inside it are helpful in getting you up to speed on Ember. Leave a comment if I left anything out!