What is Ember.js?

Ember.js is a MVC (Model-View-Controller) JavaScript framework used to develop large client-side web applications. In comparison to other JavaScript MVC frameworks, it gives you the ability to write organized and structured code. According to the Ember.js website, this enables you to build “ambitious” web applications.

In Ember.js, route is used as a model, handlebar template as views and controllers manipulate the data in the model.

If you want to build a single-page web application that pushes the envelope of what’s possible on the web, Ember.js is the right choice for you.

Figure 1.0 The structure of the early web (left) versus the promise of Ajax (middle) versus modern web application

Early websites were relying on the full-page refresh approach shown at the left in figure 1.0. With the arrival of the asynchronous call came the ability to send specific parts of the website for each response, as shown in figure 1.0 (middle).

In Ember.js, the user receives the full website once, upon the initial request. So it increased initial load time but significantly improved performance for each subsequent user action, as shown in figure 1.0 (right).

Let’s take a closer look at each of the MVC components.

• Controller layer – Built with a combination of routes and controllers
• View layer – Built with a combination of templates and views
• Model layer – Built with a combination of model and ember data.

Figure 2.0 The parts that make up Ember.js and how they fit in with the MVC pattern

Models and Ember Data

This layer is responsible for any server-side communication as well as model-specific tasks such as data formatting.

Ember model uses ember data to dramatically simplify your code while improving the robustness and performance of the application.

Controllers and the Ember Router

The layer between the model and view is the controller layer. There are a couple of controllers, most notably the “Ember.ObjectController” and “Ember.ArrayController”.

The Ember Router is the mechanism that updates your application URLs and listens to URL changes. Each route can have a number of sub-routes, and you can use the router to navigate between the states in your application.

Views and Handlebars.JS

The view layer is responsible for drawing the elements on the screen. Ember.js has a sophisticated system for creating, managing and rendering a hierarchy of views that connect to the browser’s DOM. Views are responsible for responding to user events, like clicks, drags, and scrolls, as well as updating the contents of the DOM when the data underlying the view changes.

Ember.js uses Handlebars.js as its template engine. Handlebars.js provides the power necessary to let you build semantic templates effectively with no frustration.

Ember.js is most likely Convention over Configuration. This means that instead of writing a lot of boilerplate code, Ember can automatically deduce much of the configuration itself, such as automatically deciding the name of the route and the controller when defining a router resource. Ember even increases the bar by automatically creating the controller for your resource if you never define it specifically.

Ember includes both an excellent router and an optional data layer, called ember data. Unlike AngularJS and BackboneJS frameworks, which have a very minimal data layer (Backbone’s Collection/Model and Angular’s $resource), Ember comes out of the box with a full data module which integrates really nicely with a Ruby-on-Rails back-end or any other RESTful JSON API that follows a simple set of conventions. It also provides support for setting up fixtures for developing against mock API and testing.

When it comes to the design of Ember.js, performance has been a major goal. Concepts such as The Run Loop, which ensures that updated data only causes a single DOM update even if the same piece of data was updated several times, along with caching of computed properties, and the ability to precompile the HandleBars templates during the build time or on your server, help to load and keep your application running fast.

AngularJS and EmberJS

AngularJS and EmberJS are similar frameworks on a number of levels, but also different in several elements. AngularJS, for example, will display a large static data set more quickly than EmberJS, but EmberJS will make it easier to add interactivity to that large data set and will handle changes more efficiently. Furthermore, while both are opinionated frameworks, EmberJS takes a somewhat stronger position than AngularJS, which can make some tasks around porting an existing application challenging to complete. In the end, either architecture has its own trade-offs, and determining which framework is right for you is simply a matter of evaluating your application’s needs versus the strengths of each framework.

Best practices for real world Ember deployment

“Ember CLI” is a command line tool for quickly generating web apps structure. The CLI is a very useful tool and will probably be the standard way to create ember apps in the future. Using Ember CLI slightly changes the way the app is written.

How to use Ember-CLI?

First, you have to download and install “node.js” to your computer.

Once you have node installed, you can get ember-CLI by opening up a command prompt and running:

$ npm install -g ember-cli

To create a structure for the application you can run:

$ ember new project-name

This will create a folder called releases with everything needed to start coding. Change the current directory into releases and run:

$ ember server

Now you should be able to visit “http://localhost:4200” and see a very basic page.