Why Ember JS is a great framework for building web applications

I’ve spent some time with Ember.js on-and-off over the last few months and I’ve finally created a basic application that enables users to create and vote on suggestions for an Agile retrospective session.

Ember is a very impressive framework. The authors have put a lot of thought into what a web application needs to succeed and packaged this all up into an elegant piece of software. Here are five things that I feel make it a cut above the other web frameworks out there:

The url is at the heart of any Ember application

Part of the web’s power is that anyone can easily share and link to content via a url. When building single page applications it’s easy for this feature to get lost. Ember puts routing and the url at the heart of any application you build.

In most cases the user will interact with your app based on the routes you specify in your application’s router:

App.Router.map(function() {
    this.resource('current-suggestions');
    this.resource('suggestion', {
        path: '/current-suggestions/:suggestion_title/:suggestion_id'
    });
});

These are the routes for my retrospective centre app. This setup gives us a nice high-level overview of the structure of our application. Ember will load all necessary data and templates based on the user’s current url.

Strict separation of concerns

In Ember there is a very strict separation of concerns between the different components of an application:

  • The router manages application state
  • Models encapsulate the application’s data
  • Controllers communicate between a model and a template
  • Templates define the html to render
  • Views handle DOM interaction

This means it is always clear what a particular component should be doing. It also forces you into writing small and succinct components which each have clear responsibilities. In other web frameworks there is always a danger of blurring the lines between components and writing spaghetti code. For example, Backbone Views are responsible for communicating between templates and models as well as handling DOM interaction. This can make Backbone applications harder to maintain compared to Ember apps.

Convention over configuration

When you define a route Ember will automatically create a controller, view and route object for you. If you need to specify some unique behaviour for your route Ember will know which controllers, views etc to look for as long as you follow its conventions. In my retrospective centre app I defined a route called current-suggestions. Ember will then know to look for the following objects:

  • A CurrentSuggestionsController
  • A CurrentSuggestionsView
  • A CurrentSuggestionsRoute

This saves us from having to write code that says “for this route you need to use this route object, this controller, this view and this template”. Ember will handle all of that configuration for us and means we have to write less code.

Batching DOM operations

One of the most expensive tasks a browser has to perform in terms of performance is painting DOM nodes to the screen. When adding elements to the DOM we can improve performance by doing these operations in one go rather than appending one element at a time. Ember solves this problem for us by automatically batching DOM operations when new elements need to be added.

An elegant testing framework

In more recent versions of Ember a test framework has been included. This can be integrated with testing suites such as Mocha and QUnit. The framework makes testing a very elegant experience. Here is an example test from my retrospective centre app:

test('entering a correct username and password will transition the user to a new route', function() {
    expect(2);
    visit('/').fillIn(usernameField, 'syoung')
        .fillIn(passwordField, 'password')
        .click(submitButton)
        .then(function() {
            ok(!exists(loginError), 'no error message exists');
            deepEqual(App.get('currentPath'), 'current-suggestions', 'the user is on the "current-suggestions" route');
    });
});

 

Ember provides some test helper functions which makes testing much simpler. In this example visit takes us to one of our application routes whilst fillIn and click do what you would expect. All of these helpers return promises which, due to the asynchronous nature of Ember, are invaluable for writing good tests.

Conclusion

Ember solves many of the common problems we face as web application authors. Having routing and DOM batching baked into the framework, as well as a sturdy architecture and test framework, means we can focus on providing good experiences for our users. Ember is a large framework and there is a lot of magic going on behind the scenes but it is worth spending time learning how to use it and is an excellent solution for writing web applications.