5 Comments

10 Steps for Ramping into Ember.js Quickly

Middle Age-road

Ember.js is (perhaps wrongly) notorious for having a steep learning curve. I’ve heard experienced web developers complain it’s complex and difficult to learn.

At Atomic Object, we have used it successfully on many projects, and I’ve put together 10 steps to help other developers explore the Wonderful World of Ember. These tips are aimed at experienced web developers–especially those with Rails or JavaScript framework experience–but I think they can be useful for anyone who is approaching Ember for the first time.

0. Review Ember Guides and API Docs

The first two links that any aspiring Ember developer should visit are the Ember.js guide and the Github repository that contains the most up-to-date source of the guides. Ember’s documentation has come a long way, and I often find myself revisiting it when developing apps.

1. Install Ember-CLI

Ember-CLI was developed to replace the deprecated Ember App Kit. This command line interface is designed for creating Ember apps that strongly favor convention over configuration. Developers with experience in frameworks like Ruby on Rails will find the Ember-CLI generators and project file structure very familiar. To try it out, install Ember-CLI and its dependencies, then create your first sample project. Serve it up (ember s) and point your browser at localhost:4200.

2. Install the Ember Inspector Extension

The Ember Inspector Extension is super-useful for debugging your Ember app. After installing, bring up the JavaScript console in Chrome (command-option-j on Mac, shift-ctrl-i on Linux, or simply right-click anywhere on the web page and choose Inspect Element in Chrome) and you will see an Ember tab. My favorite feature of the Ember Inspector is its support for Ember Data–you can easily browse all items in the Ember Data store. Ember Inspector also lets you view the composition and structure of your current location (controllers, routes, views, etc.).

3. Read “From Rails To Ember”

If you know Ruby on Rails, it is essential that you read the tips compiled in From Rails To Ember. If you don’t know Ruby on Rails, this site may still have value (but save it until the last step).

4. Dig Into a TODO App Tutorial

Now is a good time to start following along with a TODO MVC tutorial app. I break this step into two parts, A and B, but they should be done concurrently.

4A. The TODO MVC blog posts

Read through and follow along with this TODO MVC blog series:

4B. Basic Ember extensions

While working the TODO app and playing around with Ember-CLI, pay attention to how Ember is modifying JavaScript:

  1. Note the difference between plain JavaScript objects {} and Ember objects Ember.Object. It may seem obvious, but knowing whether you’re dealing with an Ember object or just a JavaScript object in the code is very important. For example: Ember object properties must always be accessed and mutated via get and set functions, respectively. For a vanilla JavaScript object, foo.bar syntax works.
  2. Note the difference between plain JavaScript arrays [] and Ember.Array, which extends JavaScript Array and supports binding and some functional operations. Out of the box, Ember extends Array with Ember.Enumerable, Ember.MutableEnumerable, Ember.MutableArray, and Ember.Array interfaces. These extensions are powerful and may be enough for you to forgo adding third-party libraries such as Underscore.js or lodash.js.
  3. String and Function are also extended, and any of these extensions can be turned off.

5. Learn About Properties and Observers

A lot of Ember’s power comes from Ember.Object properties and observers. Ember object properties can be bound in your template file and displayed, but don’t depend on any other data.

Ember computed properties can also be bound in your template and can also depend on other objects and properties. Computed properties automatically update when their dependency changes. Ember computed properties have caching behavior, and– critically– they won’t update unless their dependency changes. This can be especially important when the property is declared on a singleton Ember.Object (e.g., a Controller, Route, or Service, but not Component). For example, if you set a property on a Controller, leave the page that is controlled by that controller, then visit the page again, the controller will retain the old value of the property. This behavior has been the source of many bugs, in my experience.

Ember Observers are called whenever their dependency changes. Observers cannot be bound to and are used for their side effects.

Also see this Relevant Atomic Object Spin Blog post.

6. Learn About Model, View, Controller Implementation

Understand the purpose of the key Ember objects that support MVC (refer to this page in the Ember Guide):

  • Ember.Route: Routes provide data to controllers. A typical pattern is for routes to make asynchronous AJAX queries (or use Ember Data) and set the controller’s model property. Routes are singletons.
  • DS.Model: Often the models in your Ember App are actually Ember Data DS.Model instances. But, this could be anything, like a JavaScript array or object.
  • Ember.Controller: Decorate your models with display logic for use in your view. Controllers typically define computed properties and other control logic. Important note: the long-term plan is to completely deprecate controllers in favor of Ember.Component, which I will touch on later.
  • Ember.View: In an Ember app, the view layer consists of an Ember.View object and a template file. Out of the box, Ember uses the Handlebars templating library. Ember.View lets you bind to events and manipulate the DOM. Each view has a locally scoped jQuery accessor, this.$ for “low level” DOM manipulation. Often, functionality can be accomplished without using Ember.View directly.

7. Get to Know Ember.Component

Ember apps developed by experienced Ember programmers will contain a lot of components. Components are the future– eventually Routes will provide data directly to components. A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:

  • You should pass in the state you need to the component.
  • Components should communicate with their parent scope (e.g, controller or another component) by sending actions.
  • Parent scope (e.g., controller or another component) communicates with the component by changing the data state that it has passed to the component.

A common question from developers learning Ember is how to communicate between components. I recommend reading this blog post for further detail on the topic.

8. Explore Ember Data

Ember Data is Ember’s “front-end ORM.” It isn’t part of the Ember.js library; it’s a separate project. However, it is automatically included in Ember-CLI projects, and going forward, it will be updated in sync with Ember-CLI (along with a few other packages that are commonly used in Ember apps). I think of Ember Data as the Ember version of Ruby’s ActiveRecord (and its adapter/serializers are like the backing database). Andy Crum’s blog post about Ember Data is a nice starting point for learning its intricacies. Be warned that Ember Data is opinionated and works best when backed by a web API that conforms to JSON API (but it doesn’t have to).

9. Watch Out for Common Ember Pitfalls

Hopefully I have covered many in this post, but this presentation on avoiding common Ember pitfalls is worth reading.

Conclusion

I originally wrote this list of steps for new Atomic developers coming onto Ember projects, but I found it useful for even experienced Ember users. I’d love to hear any extra steps that should be added!