Quick guide to develop with EmberJS

JavaScript has a feature that sets it apart from much of the rest of computer languages: a programmer with advanced knowledge in this syntax may intervene in the whole development stack. It's what the developer community call the MEAN full-stack quartet, in reference to MongoDB (database system), Express (development framework on the back-end) side, AngularJS (framework on the client side) and Node.js (development environment for the server layer). EmberJS is an alternative to AngularJS.

EmberJS is a framework under the MVC (Model-View-Controller) pattern for JavaScript. With it applications can be developed on the client side, supported by several JavaScript libraries like jQuery, a well-known library in the world of development, or Handlebars, an alternative to jQuery that creates HTML templates with data objects in JSON format.

Why is it so interesting to use a Model-View-Controller framework to design applications? Because it will be the development framework that deals with synchronizing changes from time to time in the HTML document with the DOM, thanks to the information contained in the View's variables. This is possible for one simple reason: the MVC pattern separates applications into different presentation components, data and logic.

EmberJS Features

EmberJS has some features that can be a big advantage for a developer of web applications. Some of them are:

– EmberJS is a framework prepared to program in a simple and elegant way, what its creators define as “The Ember Way”. This enables large developments to be made with few lines of code, as long as we adapt to the framework's limitations.

– EmberJS is a development framework that is based on the software programming paradigm Convention over Configuration (CoC), decreasing the number of decisions to be taken by the developer as the framework adopts them automatically. Through this you gain in simplicity, but lose out in flexibility. The programmer only needs to specify the unconventional aspects of an application's code as EmberJS generates everything else.

– The EmberJS Router greatly simplifies working with its system of nested routes: templates that share a Router, Controller and View and replicate from the memory the default behavior associated with that route. That saves a lot of effort and time and everything is easier.

– Binding data between components. It automates the synchronization of data changes, as explained above.

– Dynamic templates through Hadlebars.js.

– Injection of dependencies between drivers.

– It has a RESTfulAPI.

– The developer community that maintains EmberJS is small but very qualified; some are also behind projects such as the development Ruby on Rails framework or the jQuery library.

– Easier to use than BackboneJS, another alternative to AngulaJS. 

Core concepts of EmberJS 

The logic before you start using EmberJS is knowing what the concepts are that affect the use of this framework for creating web applications:

– Templates: a template, written with Handlebars, describes the application's user interface. Each template is supported by a Model, and if the developer updates the Model, the template is modified automatically. The HTML plane of each of the templates contains:

– Expressions: commands that activate functions, for example, to define partial views and incorporate them into other templates, processes rendering views and templates and so on 

– Outlets: markers connecting templates with others. 

– Components: custom HTML elements that are used to clean the repetitive templates or create reusable controls.

– Router: this is responsible for defining nested routes, each supported by a data model. Templates and models change with user navigation, but the default behavior associated with these nested routes remains unchanged.

App.Router.map(function() {
  this.resource('post', { path: '/post/:post_id' }, function() {
    this.route('edit');
    this.resource('comments', function() {
      this.route('new');
    });
  });
});

In this example, the router creates the following nested routes:

– Components: these are custom HTML elements implemented with JavaScript language and templates such as GUI.

– Models: a model is an object that stores data persistently over time. Templates are responsible for displaying each of these Models to the user to convert them into HTML. Ember has a data persistence layer called Ember Data, which has undergone constant alterations over time and does not have very reliable documentation currently. 

– Route: these are the objects responsible for telling the template the data model to use and show to each user.

– Controller: provides, just like the model, properties to the template.

First steps to begin programming

These are the steps to follow if you want to start working with EmberJS to develop a web application. It is relatively simple:

– Download EmberJS dependencies: to program an application in EmberJS you first need to have JavaScript jQuery and Handlebars libraries. The first can be downloaded here and the second, here. 

– The second step would be to install Node.js.

– Then you need to configure Ember CLI (the command line interface of this development framework). Ember CLI is the web application development standard in EmberJS. Its installation is done through the command npm install -g ember-cli.

– The fourth is to install Bower, a dependencies manager for front-end that keeps all libraries for the project updated. You must use the command npm install -g bower.

– It is advisable to configure a test automation system. One option with EmberJS is to install PhantomJS. For installation you must use the command npm install -g phantomjs.

– Once you have installed the EmberJS command line interface and all its dependencies, you can begin to create the new project. First use the command cd to choose a folder within the project directory and then the new application is created with the command ember new application name. 'application name' will be the literal name that the application created in EmberJS will have. 

The CLI has interesting features for any developer:

– Structure the project's file directory.

– It is able to compile and compress these documents.

– It generates common patterns.

– It enables the functionalities added to the development framework to be easily incorporated. The Ember community develops plugins and the remainder can be incorporated into the framework. You can find these addons in several pages such as Ember Observer or Ember Addons.

Follow us on @BBVAAPIMarket