What is EmberJS?
EmberJS is a free, open source JavaScript framework for developing complex web applications using Model-View-Controller (MVC) pattern. EmberJS relies on client-side templates and uses handlebars templating library which provides expressions to create dynamic HTML-based templates. An EmberJS developer can bind data to these embeddable expressions and dynamically change the display of their applications, on-the-fly.
Example:
<ul>
{{#each member}}
<li>Hello, {{name}}!</li>
{{/each}}
</ul>EmberJS’s Benefits
- It automatically creates router and controllers when you have not defined the same
- It auto-updates Handlebars templates
- It has excellent routing features
- Its EmberData looks perfect for syncing data between your app and a server API and/or localStocalStorage (especially if your server code follows a few conventions, Restful routes…)
- It supports RESTFUL JSON API
- It supports Localstorage
- It supports Fixture Adapter
EmberJS in comparison with Angular.js and Backbone.js
In general, all the three frameworks have a lot in common, i.e. they are all open sourced, come under MIT license, follow MVC architecture and support single-page web applications. However, a couple of noteworthy observations are, Angular.js’s Community option is worth highlighting and EmberJS uses Handlebars template engine which can be integrated with several third party template engines and Backbone’s default template engine.
EmberJS’s features
Router:
Routers are the URL representations of the application’s objects and it manages the URL and transitions between them. It is the central piece that coordinates various building blocks. The goal of the router is to query the model and make it available to the controller and the template. For example, routing to users, would be,
App.Router.map( function() {
this.route( 'users' ); // Takes us to "/users"
});And Users router would be,
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find(); // Gets all the users from User Model
}
});
Model:
Model is like database data that can be retrieved or updated by Ajax calls from routes or we can rely on Ember-Data to simplify the retrieval and updating over a REST API.
User model would be,
App.User = DS.Model.extend({
name : DS.attr('string'),
email : DS.attr('string'),
bio : DS.attr('string'),
creationDate : DS.attr('date')
});Controller:
Controller gets a model from the route and then, it builds a bridge between the model and view template. Controllers are auto-generated by EmberJS if you don’t declare them. For example, user controller would be:
App.UsersController = Ember.ArrayContoller.extend({
/*Properties*/
actions:{
/*Custom actions like create, edit & delete users...*/
createUser: function(){
/*code to create an user*/
}
}
});View:
View represents the visual parts that users can see in the browser. View is normally associated with a controller, template and route. Views are useful when we handle events or custom interaction that are impossible to handle in templates. Views are useful to play jQuery and they are helpful to create reusable views like modal boxes, popovers, date-pickers.
Template:
EmberJS uses Handlebars for templates. It is a lightweight templating engine which is maintained by the Ember team. A template is a HTML markup, where we can print model data and the template automatically updates when model data get changed. We can keep our handlebar template code in a separate .hbs or .handlebars files. Few examples,
<span>{{userNickName}}</span>The above code binds the user’s nick name in UI. So, the user can see the new nickname changed when he changes it.
<img {{bind-attr src=userProfilePicture}} class="profile_picture"/>The above code dynamically binds the profile picture with an image tag.
Helper:
Helpers are functions that modify the data before it is rendered on the screen. For example, it would be better to show a date as “29th February, 2016” instead of “Mon Feb 29 2016 13:37:39”. This can be achieved using helper by giving specifics such as {{formatDate date}}. Here “formatData” is a helper function and “data” is the input to helper. For example, helper creation code would be,
Ember.Handlebars.helper('formatDate', function(date){
return moment(date).fromNow();
});And calling the helper object would be,
<span class="date">Created {{formatDate creationDate}}</span>Components:
A component is a ‘view’ but it is completely isolated. To simplify, there is no access to the surrounding context. In ‘view’, we could get an associated controller using this.get(‘controller’) which is not the case with component. It is a great way to build reusable components like custom select boxes, auto-complete field, reusable charts. A sample component creation is:
componentsconfirmBox.js
App.ConfirmBoxComponent = Ember.Component.extend({
isVisible: false,
actions: {
//Handle your action here
}
});
..templatescomponentsconfirm-box.hbs
{{#if isVisible}}
<div class=”confirm-box confirmin”>
<h4>Really?</h4>
<button {{action “confirmDelete”}} title=”yes”> y </button>
<button {{action “cancelDelete”}} title=”no”> n </button>
</div>
{{/if}}
Computed Properties
Computed properties are properties that depend on other properties. The values of these computed properties are cached by EmberJS until one of the dependent properties change. Ember then recalculates the value of computed properties and caches it again.
Sample Demo Snapshots:
Download:
Click here to download working demo
Reference:
https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app
https://www.smashingmagazine.com/2013/11/an-in-depth-introduction-to-ember-js/
http://code.tutsplus.com/tutorials/getting-into-emberjs–net-30709
