In the past few years, web development has gradually evolved from having your server-side web framework render your views and template. Modern web apps now put the bulk of the logic on the client side to enhance performance and user experience.
This, if you’re not careful or experienced enough, can greatly slow down things and defeat the whole purpose of the shift. A number of JavaScript MVC frameworks like Backbone, Knockout, and Ember have sprung up to fill the void between beginner and intermediate developers, and hardcode programmers as well as increase efficiency.
Ember.js is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. Ember is relatively new (though it started as a library called SproutCore, developed by Apple as the “core” of it’s online applications like Mobile Me) and therefore still has a small but fast growing community.
What you should know
Ember.js is not an outright substitute for jQuery but is built on the jQuery library. In other words, the jQuery library is required for Ember powered applications. Hence jQuery developers will have little or no problem following this framework. I myself am pretty new at this. Came across Ember while I was researching javascript frameworks and I find it has some pretty amazing features like data binding and eliminating boilerplates.
Oh! before you go further its best you have an understanding of web technologies such as html, javascript and the jQuery library.
Let’s get started
First download the Ember.js starter kit. Unzip it and put it in a directory that’s web accessible. Open the index.html and js/app.js in a text editor. In js/app.js you should find the code below:
var App = Em.Application.create();
App.MyView = Em.View.extend({ mouseDown: function() { window.alert("hello world!"); } });
The first line creates an application App. Suppose we wanted to create our own application, add the following line of code to app.js
StackArena = Ember.Application.create();
This creates the application StackArena which can be referenced like App above. Now let us do something with our application. JQuery developers are familiar with the document.readyfunction when you want to perform an action immediately the page loads. Here’s the Ember version:
StackArena = Ember.Application.create({ ready: function(){ alert('Welcome to Ember.js!'); } });On page reload now you get the alert “Welcome to Ember.js”. Next we create a model. I prefer to call it Object for now.
StackArena.Tutorial = Ember.Object.extend({ title: null, author: null });So we have created an object with the propeties title and author. Now we create a controller. Here is a simple Ember controller:
StackArena.TutorialController = Ember.ArrayController.create();
This is an implicit declaration of the ArrayController. It contains a content array where the data will be stored. An explicit declaration is as follows:
StackArena.TutorialController = Ember.ArrayController.create({ content: [] });All that’s left is to create the view to render the information we want to display. Ember.js comes bundled with the Handlebars.js templating language which makes view rendering easier. Add the following code in the body of your index.html
<script type="text/x-handlebars"> {{#view Ember.Button target="StackArena.TutorialController" action="loadTutorials"}} Load Tutorials {{/view}} {{#collection contentBinding="StackArena.TutorialController" tagName="ul"}} <b>{{content.title}}</b> - {{content.author}} {{/collection}} </script>Variables are wrapped in double curly brackets. The # and / symbols tell Handlebars that this particular View has a closing part. The collection part is what receives the array collecction from controller. Notice that we have declared a tagName="ul", Ember completes the opening and closing tag.
Time to add some data:
StackArena.TutorialController = Ember.ArrayController.create({ content: [], loadTutorials: function(){ var self = this; $.getJSON('data/Tutorials.json', function(data) { data.forEach(function(item){ self.pushObject(StackArena.Tutorial.create(item)); }); }); } });The data will be provided in JSON format. Reload the page click the Load Tutorials button and see how the action performs. Download the complete project from the resources below. That’s it for our simple example on Ember.js.
If this article was interesting, or helpful, or even wrong in anyway, please consider leaving a comment. Thanks!
Resources: ember-starter-kit
Source: StackArena (Developer Resource Partner)
Note: See source for complete codes
