CODE: Notes on Ember and Ember App Kit

I’ve recently been working with EmberJS, a Javascript framework for building MVC-based web applications. I’m liking it a lot. It feels well thought out, well designed, and isn’t afraid to make decisions for you.

The environment I’m using it in also uses Ember App Kit, which will get you off the ground much faster than writing an Ember app by hand from the ground up. Ember and Ember App Kit like to use Handlebars for their templating system. Handlebars also seems well thought out, well designed and easy to use.

Here are a few notes on gotchas and useful things I’ve run across so far.

I’m looking forward to trying out Ember inside a Chrome packaged app. Packaged apps generally have trouble with Javascript templates - most template software uses eval, which is forbidden in the main code in an app (but allowed in a special sandboxed page that has very restricted access to Chrome Javascript APIs). It looks like the Ember App Kit should solve this problem by precompiling the templates…we shall see.

Helper Names

Ember wants all Handlebars helper names to have a dash in them. If your helper doesn’t have a dash in it, you’ll have to register it by hand - check these instructions for more information.

Registering Helpers

While Ember seems to suggest using Ember.Handlebars.helper or Ember.Handlebars.registerBoundHelper to register helpers, using either of those in the helper file itself under Ember App Kit blows up. I ended up using the makeBoundHelper method instead, for instance:

export default Ember.Handlebars.makeBoundHelper(function(word) {
    return word.toUpperCase();
});

Source Maps

If you want to debug your code, be sure to use a web browser which understands source maps correctly. Otherwise you’re going to be inspecting and stepping through a massive pile of transpiled code that will make no sense to you. Use Google Chrome. To be fair, I found that Chrome didn’t get me to the right place, or exactly the right line, 100% of the time, but it was very close and way easier to deal with than that one time I tried to debug Ember code in Firefox without source maps enabled. Use a recent version of Chrome, Safari 7.0 or later, or a recent Firefox with “Show original sources” turned on.

To set a breakpoint, look in the debugger for your source files under /assets/tmp/transpiled/app - not quite where you’d expect to find them.

Observing a Computed Property

Ember allows objects to have “computed properties” - that is, when you reference a property with get or set, a function will be called. Ember also allows you to “observe” properties and have things automatically trigger when the properties change (this allows pieces of web pages to automatically update as the web application’s state changes).

There’s a bit of special magic you need to do if you want to observe a computed property. The property’s value is never set unless you call get at some point. In order to start things off you’ll need to have an init method in the controller with the property and call get on it there.

var MyController = Ember.ObjectController.extend({
    init: function() {
    this.get(‘myComputedProperty’);
});

This Stack Overflow article goes into detail.

Ember Inspector Chrome Extension

If you’re using Chrome, you will almost certainly want the Ember Inspector extension. This extension inspects Ember’s internal state and allows you to

LiveReload Chrome Extension

If you’re using Chrome, you  will almost certainly want the LiveReload extension. This extension integrates with ‘grunt server’ to automatically refresh the page when you update your Ember application. My experience is that it’s enormously convenient.

Helpers Not Observing Properties

I’ve had some problems with a helper not firing when a property it observes changed. For instance,

export default Ember.Handlebars.makeBoundHelper(function() {
    return theWord.toUpperCase();
}, ‘theWord’);

isn’t updating for me when the property theWord changes. I am confident this has something to do with my application and isn’t due to a bug in Ember. It’s the only issue I haven’t tracked down so far.