Create applications with Ember.js

ember.js

If at the beginning of his career JavaScript had a role almost decorative, merely add interactivity to Web pages, over the years its role has grown allowing you to create Web pages more sophisticated. Today, the role of this language on the Web, and not only took on such importance that enable achievement of real applications, which require skills so typical of those who develop software in a professional manner.
 
Witness the birth of frameworks like Backbone.js or Knockout.js, which provide the developer pattern and functionality closer to those of modern programming languages.
 
[adsense:block:adcontenuto]
 
Ember.js fits into this context by offering a rich set of features which allow you to write simple scripts, but to design and implement real Web client.

The framework Ember.js

Although the creation of this framework is relatively recent, it has its roots in SproutCore, a project started in 2007 and is widely used in some projects to Apple. He then established a code base that guarantees a certain stability.
 
The objective of Ember.js is described on the home page of the project: a framework for creating web applications ambitious. And in fact the functionality made available to the developer are considerable.
 
Supports the MVC pattern and integrates JavaScript with an object model that is close to those of object-oriented languages, with the ability to define classes to override properties and methods to create subclasses to create calculated properties and observer to define binding between two properties. It also supports a mechanism for creating namespace and provides a sophisticated template engine based on mustache.js.
 
In this article we will explore the approach to programming proposed by Ember.js and put to the test its main functionality by implementing a simple application that displays tweets Cmswiki.net.

Setup project Ember.js

To start we download the starter kit from the project's home page. It is a zip containing everything necessary for starting with Ember.js, in particular contains an HTML page of example with the classic Hello World!.
 
By analyzing the HTML page we see the following inclusions:
 
<script src="js/libs/ember-0.9.8.1.min.js"></script>
<script src="js/app.js"></script>

 

As we can see, Ember.js depends on jQuery, so you must first include this library. The last inclusion refers to the app.js file that contains the JavaScript code of the application that will be made.

Application definition

To achieve our leading example, we set the first application in the app.js file:
 
var CMSWIKITweets = Ember.Application.create();
 
From this line of code is clear that the framework makes available to the global object Ember, abbreviabile with Em, which provides all the functionality accessible from JavaScript.
 
In this case we have created an instance of the application calling CMSWIKITweets. This instance is the foundation that allows us to create the rest of our application and acts as a namespace to avoid name collisions with any other elements. An important requirement is the application name that starts with a capital letter so that the system can detect the binding as root within a hierarchical path.
 
When creating the application can perform setups, how to define the properties, methods, or manage the ready event, as shown in the following example:

 

var CMSWIKITweets = Ember.Application.create({
  version: '1.0',
  ready: function() {
    alert('Eccomi!');
  }
});

 

In this case we have defined the version property by assigning a value of 1.0, and we have handled the event by displaying a message ready. Handling the ready is analogous to using the ready () jQuery and its purpose is to make sure that the DOM and the infrastructure provided by Ember.js have been completely loaded by the browser.

[adnsense:block:adcontenuto]

Definition of the model (model MVC)

We have said that Ember.js supports the MVC pattern for the realization of applications. We see that in terms of dealing with the definition of the model of our application. In practice, we're going to manage objects are represented by tweets Cmswiki.net. We define the class of tweets in the following way:
 
CMSWIKITweets.Tweet = Ember.Object.extend({
  name: null,
  avatar: null,
  text: null,
  date: null
});

 

Notice how the definition is created as an element within the namespace of the application. The extend () method of Ember.Object allows you to define a class specifying the properties and methods provided. The values ​​assigned to properties represent the default values.
 
In our case, we have defined a tweet as an object that has the name of the picture used as avatar, the text of the tweet and the date and time of publication.
 
The actual creation of an instance of this class will be made using the create () method inherited from Ember.Object, as we will see below.
 
An interesting feature of Ember.js is the possibility of defining a class in subsequent steps.
 
In other words, you can add or override properties and methods of a class at any point in our application using the method reopen (). For example, the following code adds the property followers_count the definition of tweets given above:
 
CMSWIKITweets.Tweet.reopen({
  followers_count: 0
});

Defining the controller

The class that we have defined allows us to describe a single tweet, but our application needs to display a list of recently posted tweets. In other words, we need a structure that allows us to manage a list of objects to display in a view.
 
For this purpose we use a ArrayController:
 
CMSWIKITweets.tweetsController = Ember.ArrayController.create({
  content: []
})

 

The ArrayController provides the default property content to contain the tweet. In our case, we initialized the property with an empty array. To load tweets of Cmswiki.net in this structure create the method loadTweets ():

 

CMSWIKITweets.tweetsController = Ember.ArrayController.create({
    content: [],
    loadTweets: function() {
      var self = this;
          self.set('content', []);
          $(data).each(function(index,value){
              var t = CMSWIKITweets.Tweet.create({
                  avatar: value.user.profile_image_url,
                  name: value.user.name,
                  text: value.text,
                  date: value.created_at
              });
              self.pushObject(t);
          })
      });
    }
})

 

Analyze the code to see how the tweets are loaded. The function uses the Twitter API to get a list of JSON objects representing the tweets of a particular user. Once you have a list for each object is instantiated class CMSWIKITweets.Tweet and assigned values ​​to their properties. So the new newly instantiated object is added to the content property using the method pushObject () dell'ArrayController.
 
Of course we would like the loading tweets happen as soon as the user accesses the application pages, so let's change management application ready event:
 
var CMSWIKITweets = Ember.Application.create({
    version: '1.0',
    ready: function() {
        CMSWIKITweets.tweetsController.loadTweets();
    }
});

View and Handlebar

Let us now concentrate on how to display tweets on the HTML page. As in any application based on the MVC pattern, a view is an interface with which the user can interact.
 
To define a view, Ember.js provides the developer a templating system for declarative definition of a UI element. For example, to insert the HTML page of our application the list of tweets we can define a template similar to the following:
 
<script type="text/x-handlebars">
<ul class="tweets">
{{#each CMSWIKITweets.tweetsController}}
<li class="tweet">
<img {{bindAttr src="avatar"}} />
<span>{{date}}</span>
<h3>{{name}}</h3>
<p>{{text}}</p>
</li>
{{/each}}
</ul>
</script>

 

We note that our template is included in a block <script> whose type is text / x-handlebars. Specifying a <script> of this type allows Ember.js to locate the template and provide the necessary resources for its production.
 
[adsense:block:adcontenuto]
 
The framework has in fact a template engine called Handlebars that uses a syntax derived from mustache.js: expressions that need to be processed by the system are enclosed in double curly brackets. The expression:
 
{{#each CMSWIKITweets.tweetsController}}

 

indicates a cycle of processing to be performed for each object contained nell'ArrayController specified. Inside the loop we indicate how and where to display the value of the properties of each object CMSWIKITweets.Tweet.
 
This definition creates a real binding between the properties of our model and the view, therefore, any change in the value of the property will be automatically shown in the user interface.
 
If we want to bind the value of a property attribute of a tag instead of its contents should be used when bindAttr. This is in fact the approach we have adopted to establish the binding between the properties of the object and avatar the src attribute of <img>.
 
At this point, the implementation our application is able to display the latest tweets of Cmswiki.net

Interaction with the user

Of course, to complete the round should allow a certain user interactivity, for example to enable it to go directly to the article reported from single tweet by clicking on its element.
 
We implement this functionality by connecting the view with the method gotoArticle () we're going to implement in our controller CMSWIKITweets.tweetsController. To activate this link modify the template of our view by adding a new expression at <li> element, as shown below:

 

<li class="tweet" {{action "gotoArticle" target="CMSWIKITweets.tweetsController"}}>

 

In this expression we specify the action to be performed at the click on the list, indicating the method and through the target, the controller to which it belongs.

 
We just have to add the method gotoArticle () to the controller CMSWIKITweets.tweetsController:
 
gotoArticle: function(view) {
   var liElement = $(view.target);
   document.location.href = getURL(liElement.find('p').text());
}

 

The method receives as a parameter the current view, whose target property allows us to access the element that has intercepted the click. The getURL () function extracts the URL of the article text of the tweet and you redirect the browser.

Conclusions and insights

The complete code of the application, integrated with the automatic update of any new tweets, is available in the attached article.
 
Of course, the application that we have implemented in this article has a didactic purpose, to introduce the approach to development with Ember.js, the framework provides a number of other possibilities for reasons of space we could not deal with here. The project site, however, provides a wealth of documentation and some guides in addition to the API reference framework.

USEFUL LINKS

--------------------------------------------------------------------------------------------------------------------------------------------------
 
If you want updates on CREATING APPLICATIONS EMBER.JS enter your e-mail in the box below:

 

Development: 

Similar Content

Internet Marketing for Beginners: How to get started

first step to internet marketing

One of the most common questions of those who approach for the first time Internet Marketing is to figure out how to create your own online business step by step: you approach intrigued but the amount of information available is likely to cause confusion and distrust for those who did not a website yet, for those who do not even know what a domain or hosting for those who do not even know where to begin to create an article, a mailing list, a sales letter and so on.
Web Marketing: 

Facebook, 1 hour blackout in Europe

Last night, many users have reported on Twitter that Facebook was not accessible. A few minutes later Anonymous posted a message in which the group of hacktivists claimed the attack on the servers of the social network. A spokesman for Menlo Park has denied everything, saying that it was a simple technical problem.

News Magazine: