My Top Go-To Ember Resources

Gut intuition is a developer's most important resource. Instinct is what tells you that rendering a blank page means your route's promise isn't resolving, or that a controller is getting too big and needs to be split out into multiple objects. The catch is, the only way to develop a trustworthy gut is through building understanding and gaining experience.

Developers new to Ember often take the logical next step and start weeding through a ton of online content in hope of finding reliable resources to boost their learning. Hopefully this article will make that process less painful. I've created a list of the Ember resources I turn to most often, but more importantly I explain how and why I use them. Understanding how to dig in and get dirty is the best way to grow your gut intuition.

API Docs

The Ember.js API documentation will tell you exactly what the Ember codebase provides. Most classes will give some detailed usage instructions and examples. If you need more information than the docs give you, everything links directly to its implementation on Github.

I use the API docs a lot. Mostly it's just to look up what methods are available on an object but it was also useful to differentiate between different array observer callbacks such as arrayContentDidChange and enumerableContentDidChange. I also learned that an ArrayController is just a fancy ArrayProxy by reading this documentation. There are a few things that sorely need documentation, but it's still a resource to keep close at hand.

Github

Github is to code what the public library system is to books. It is not only a great place to publish source code, but also to read code written by others. It contains some mechanisms to discover code in a way that was previously impossible. For example, if you want to see some examples of writing Ember routes search for Ember.Route and filter to "Code" results.

I don't just search on Github though. There are a few repositories I jump to when I'm looking for something specific. For example, I have a project with some custom models. To get a better idea of how to write models for Ember, I looked at Erik Bryn's ember-model library and Discourse for examples. Also Erik's Backburner.js can help you better understand how the run loop works.

JSBin

JSBin is an app that lets me create a single web page quickly without littering more files around my filesystem. I can quickly drop in HTML, SCSS and Javascript (or CoffeeScript) using their online editor and then interact with the page immediately. It even lets me choose from a myriad of JS & CSS libraries (unless you want to keep up on Ember releases) to drop into my HTML page. No more futzing around with creating files or downloading dependencies just to create a small example.

When I'm trying to solve a problem with Ember, and just can't get it working, JSBin is often my savior. Provided I can quickly think of a simplified example of the problem I'm trying to solve, I can code it up in no time with JSBin and share it with others to try to get help. For example, I created this JSBin to try out Adam Hawkin's GroupableMixin with constantly changing data. JSBin can also be useful when trying to determine if a problem is a bug in Ember or in your code; if you open an issue, it's likely someone will ask you for a JSBin.

JSBin is not great at keeping up on Ember releases. To get around this I link directly to releases from http://builds.emberjs.com and upgrade as necessary.

Misc

Besides the resources mentioned above, there are a few blog posts I reference now and then that have helped me learn some of the more complex things about Ember.

Everything You Never Wanted to Know About the Ember Run Loop

The run loop is central to Ember's power, but to understand it you also have to understand the benefits and drawbacks of async programming. I highly recommend reading this once you understand the parallel between setTimeout and threaded programming (I did not when I first started with Ember, and until I did, the run loop was endlessly confusing).

Performance Testing Views in Ember.js

This post shows how to use the little known, and scantly documented Ember Instrumentation module to check how long it's taking your views to render. It's worth a quick read, but after reading I'd recommend looking through the source for Ember.Instrumentation. I learned some nice tricks for debugging performance issues looking at that code (see console.time).

Render, Control, Partial, View, Template

Ember has a few different helpers for getting templates into your page. They each work differently in subtle ways. It's important to know which to use when, and this post does a great job differentiating them.

As you go through the process of learning Ember, you will likely get frustrated at points. UI development at this level is a very different beast from the server-side coding many of us are used to. Using the resources here (and the many others I didn't have time to write about) you will eventually build an instinct that you can rely on.

Published on by Joe Fiorini.