Noupe Editorial Team January 23rd, 2015

Ember.js: MVC Framework for JavaScript Web Apps

The MVC framework Ember.js, which is gaining more and more popularity, combines best practices from different frameworks and programming languages. It is a mighty tool with a pretty steep learning curve. Today we want to take a closer look at the beginnings of Ember.js, its current status, and future development. [caption id="attachment_87604" align="alignnone" width="550"]emberjs Ember.js is an ambitious project designed as a framework for ambitious projects[/caption] It all started in November 2011 when Facebook bought the Strobe company, and Sproutsource 2.0 became an independent project headed by Yehuda Katz, Tom Dale, and Peter Wagenet. A new name should emphasize the restart of the project. Unfortunately their first choice “Amber.js” was already taken, and so they named it more or less creatively “Ember.js”. This was the birth of a complex JavaScript MVC framework that is said to be one of the most ambitious projects of the web. At the beginning of Ember.js the developers wanted to transfer approaches from desktop development to web development with JavaScript. For this reason, you will find different concepts in Ember.js you might be familiar with from the desktop section. The architecture is based on the MVC principle and allows to develop single-page applications. Especially classic master-detail applications can be implemented comfortably with Ember as it has a well thought-out routing concept and a convention-over-configuration approach. In addition, it meets all demands for a modern JS framework like a two-way data binding. The application by that registers changes on an object and renders them in real-time. Handlebars.js is used as a template engine. Its syntax is similar to other frameworks and won’t need a long training period. Ember.js itself has a pretty steep learning curve. For a correct use, you need to fully understand the mentioned concepts that can be a tough nut to crack for beginners. But once you figured it out, it won’t be a problem to develop new applications with Ember.js.

Convention over configuration

The naming conventions are a special feature of Ember.js. Due to the MVC principle, logic, data, and presentation must be separated and relinked later. Thanks to Ember’s naming conventions, logically relinking them is fairly easy. If you want to integrate a route named “favorites”, Ember automatically looks for the appropriate routing object “App.FavoritesRoute” and the right controller “App.FavoritesRoute”. It then automatically activates the appropriate template “favorites”. However, you have to be careful. For example, when it comes to routing, distinguish “resources” from “route”. This may sound a bit confusing, but you will get used to it quickly. Beginners should read the chapter “Understanding Ember.js”. An Ember application basically consists of the following concepts:
  • Router – The router activates the appropriate template for a URL so that URLs can also be shared in a single-page application.
  • Templates – A template contains the HTML framework of the application. For almost all templates a data model exists. If the data model changes, the template data changes, too.
  • Components – In order to simplify templates, you can use controls to develop reusable HTML tags.
  • Controllers – A template not only has a model but can also have a controller that manipulates data or provides extended functions.
  • Models – A model contains the data and data models to display them in the templates.

Ember Data

Ember.js fully unfolds when you use it with Ember Data. Ember Data creates, changes, deletes, or simply displays data – irrespective of the data bank. The core of Ember Data consists of the models that form the datasets. But the most important thing is that Ember Data can communicate practically all by itself with RESTful APIs. In the best case, you only have to choose the appropriate adapter for an API and specify the URL. Then data models should work independently with the API, so you don’t have to develop AJAX calls to communicate with an API. If you want to understand the principle better and try it, you should go for Firebase and Ember.js. If you don’t want to lose track of all the conventions and concepts, you should consider getting the command line tool Ember CLI, which is based on Broccoli. It not only handles dependency management but also templates for recurring tasks and introduces a clear structure. In addition, Ember CLI supports the test-driven development. Another useful tool for Ember is Ember Inspector for Firefox and Google Chrome. The inspector works similar to the browser’s developer console. There you can display current data and analyze which templates, models, and controllers are currently active. The latest release is 1.8, but a 2.0 release has already been announced. It comes with some improvements and logical changes such as more intuitive attribute bindings. You can find more information about the improvements and a detailed description in the Related Links section. Autodidacts, who want to teach themselves Ember.js, can choose from various resources. The manual is a fantastic book to start with and one of Ember’s strengths. After your first successful steps, it is recommended to watch the video “Awesome Ember Tricks” to get even better understanding.

Ember.js: Working with Other Frameworks

There are plugins for most of the frameworks and tools that help improve the work with Ember.js. So, you can easily develop apps for mobile devices with Ember.js, jQuery Mobile, and Phonegap. You only have to change some settings for jQuery Mobile. There is also a REST adapter for most large backend frameworks, so you can work with Ember and at the same time use an existing infrastructure.

Conclusion

Ember leaves nothing to be desired in terms of developing single-page applications, but it has the mentioned steep learning curve. This certainly is a disadvantage to alternatives like Angular.js that is, along with iQuery, the top dog of JS frameworks – mainly because of the easy entry. However, Ember’s advantage is its strong community. Those who work with backend frameworks like Ruby on Rails or Django and know what RESTful means should give Ember.js a chance. Many concepts are very similar which helps flattening the learning curve.

Related Links

(dpe)

Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Leave a Reply

Your email address will not be published. Required fields are marked *