Ember – The Key to Ambitious Web Development

Sachin S S Nair February 6, 2013
0 Flares 0 Flares ×

Frameworks are a topic of confusion for any developer. Innumerable frameworks are already available and many are still in beta. When you start a project, it will surely be tough for you to decide on a framework to start with. Free frameworks have gained popularity as they are always powerful and efficient with a lot of consumer responses and support, constant code update and fixes.

 

This article focuses on ember.js, a new Javascript MVC based framework similar to other frameworks such as backbone.js, batman or knockout but built with a slightly different UI engineering. Originating from a project named SproutCore (2007), it was a star product used mainly by Apple for various web applications including MobileMe as well as iCloud.

 

Emberjs.org describes ember.js as “a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provide a standard application architecture”. We ought to investigate on whether and how ember manages all these.

 

Features

 

Ember comes along with a templating engine called HandleBar which provides a powerful two way data-binding. Ember uses Handlebars.js for rendering view templates. Handlebar is totally integrated to the library that the need for a separate install doesn’t arise. Moreover, features such as state management (whether a user is logged in or not), auto updating templates (UI change on related data change) and computed properties add more potential to the framework.

 

Eliminating boilerplate: Ember as a framework eases the app development tasks by inherently handling all redundant tasks. An example may be the way it renders a template view. After you specify a template, you may get back to real app development by allowing ember to handle all subsequent data changes in the template.

 

{{person.name}} is {{person.age}}

 

Here person.name and person.age are properties which get dynamically updated by the user. Ember automatically updates the dom with the corresponding change, so that the output view template remains updated always.

 

Similarly, the fetching action from the server is a redundant and common task in almost every web app. Ember has brought this functionality into the package so that the developer can remain focussed on the actual core development tasks.

 

The Architecture

 

Moving on to architecture, the MVC architecture has increased modularity, ease of working as well as workability. Moving files to specific locations – Models, Views and Controllers helps developers increase their work efficiency as only a small effort is required to understand the code. Besides this, the state management tracks nested states like signed_in, signed_out, etc. in the application.

 

Models are the actual handlers of application data, often designed initially and implemented using database tables. A typical model, User may have fields like name, email, etc.

 

Views communicate with the application end user while models handle the data involved, based on logic specified in the Controller. The presentation of data in the Views are generally made possible by some markup or templating languages. Linking the models and views, Controllers does all the operations on model data as well as the view objects. Controllers can fetch view objects, compare them with the model data, fetch and update model data, and also render or modify views.

 

Ember also implements a new section in the architecture, a State Manager which manages/handles the transitions or states by keeping a map of the application when users navigate.

 

Ember has a different sort of server communication logic, eliminating an always active user – server communication. This has an added advantage, a faster user interface. Such a logic has been specifically used in view of slower server communication, which may hinder the application UI as a whole. Be it some specific section of a page or a complete page, all that matters is the server communication latency. So ember introduces a logic of downloading everything that is required to load a page on the initial page load itself.

 

By staying away from the server, ember gains in UI part as it can detect and respond to every browser action – mouse clicks, finger taps, scrolling and even key presses. The view objects receive and send these events to controller objects which in turn communicates with models to get them saved. Up to this point, everything happens in the client section. The data flow from data model to server api belongs to server side transfer, while all the actions as sending and receiving remains safe with ember.

 

 

 

Diving into Ember

 

Ember has some great features making it cool to use,

  • Bindings
  • Computed Properties
  • Auto – updating templates

Ember bindings, when created between two objects, keep them connected. In other words, they keep the objects synchronized and that too, in both directions.

As an example, let us create the first object.

 

DemoApp.candidate = Ember.Object.create({
name: “Candidate 1″
});

 

Now the second object,

 

DemoApp.union = Ember.Object.create({
candidateNameBinding: DemoApp.candidate.name’
});

 

Here, ending the property candidateName with ‘Binding’ tells Ember to create a binding to the candidateName property.

 

Now if we call

 

DemoApp.union.get(candidateName);

 

we will get the synchronized data from the binded objects as “Candidate 1″.

 

Computed properties makes working with functions as easy as working with  regular properties. By doing so, functions can be connected using bindings. This example code helps understand the advantage of the feature.

 

DemoApp.candidate = Ember.Object.create({
firstName: “Foo”,
lastName: “Bar”,
fullName: function() {
return this.get(‘firstName’) + ‘ ‘ + this.get(‘lastName’);
}.property()
});

DemoApp.candidate.get(‘fullName’);

 

This call returns a concatenated output “Foo Bar”. Now coming to the advantage part, the property fullName depends on the values of both firstName and lastName. So with the slight modification,

 

DemoApp.president = Ember.Object.create({
firstName: “Foo”,
lastName: “Bar”,
fullName: function() {
return this.get(‘firstName’) + ‘ ‘ + this.get(‘lastName’);
}.property(‘firstName’, ‘lastName’)
});

DemoApp.candidate.get(‘fullName’);

 

Now ember understands that the property fullName has dependent properties – firstName and lastName. Therefore, changes with the dependent properties simply get reflected on the third property, fullName.

 

Auto-updating template is the most noticeable feature in ember. Whenever a displayed property gets its value changed, the template auto updates itself, thereby keeping the view updated.

 

Ember uses handlebars for templating purposes. You will require a script to get the data from your JavaScript application and add it to your dom.

 

<script type=”text/x-handlebars”>
{{DemoApp.candidate.fullName}}.
</script>

 

Finally, try it yourself. Feel free to try some cool demos here.

Now, these are all the features that are interesting in ember on an initial lookup. A lot more in ember awaits developers. So it’s better to try rather than just sit and understand.

Tags: , ,

Comment Here

PARTNERS