BackboneJS, the Alternative to AngularJS and EmberJS – Keys for Developers

AngularJS and EmberJS are the main client-side application development frameworks but they are not the only ones. The third alternative is also very popular among developers: BackboneJS. These three frameworks are based on the Model-View-Controller paradigm, which allows any programmer to create the structure for a digital project. This guide includes keys to developing with BackboneJS.

Nowadays, many programmers prefer a MVC development framework for designing applications. The framework is responsible for synchronizing the changes between the HTML document and the DOM. The framework itself does the changes automatically without the developer's involvement. Just like AngularJS and EmberJS, BackboneJS uses JavaScript libraries for the visual design of the frontend, mostly jQuery and jQuery Mobile.

BackboneJS Features

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

· Application framework with heavy use of JavaScript.

· BackboneJS is used to develop single-page web applications (SPAs). It offers a fluid user experience. This is achieved by uploading features as they are needed by the user.

· It has a very short learning curve if the developer has experience with JavaScript libraries such as jQuery and Underscore.js (JavaScript library for which BackboneJS has dependency). Compared to AngularJS and EmberJS, JavaScript developers find it less painful to start programming.

· BackboneJS is a library for complex projects. Web applications with a large number of dynamic functionalities, a lot of interaction and many events working at the same time.

· Data binding among components. It automates the synchronization of data changes between HTML code and the DOM.

· It allows you to use model collections.

· It simplifies the use of views.

· It orders and provides the code of AJAX requests to the server.

· Integration with RESTful API.   

BackboneJS Elements

BackboneJS contains basic elements that are fundamental to using this development framework. These are: 

– Models and Views.

As with any development framework based on the Model-View-Controller paradigm, the business logic is separate from the user interface. In this way, it's easier for the development team to work on the interface since problems are avoided. The model is at the core of the framework. It orders the data in the web application: organizes the data and business logic and generates events when data changes.

This is how a model is created in BackboneJS:

var Human = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to this world");
    }
});

var human = new Human(); 

Any change made to the model can be saved in the database using save (see tutorial on website StackOverFlow).

The view is the visible part, the user interface for the application that is being developed with BackboneJS. It manages the DOM elements. Views usually react to changes in a model's data and render automatically for synchronization purposes. Consequently, development becomes a simpler task.

So, the view mostly does three things:

· Reacts to changes in model data and renders the user interface again to update it.

· Handles user interactivity.

· Sends the inputs of user interactions to the model.

– Collections.

A collection allows you to handle a series of related models. It provides features that allow you to, for instance, carry out calculations in a group of models, and facilitates management of uploads of new models by the server. Collections generate an add or remove event when a new element is added or an existing element is removed from the collection. Every event in one of the models automatically leads to an event in the collection 

By default, the models in a collection are in order of insertion. In any case, you can change the order of a collection's elements using the comparator featurehttp://alfonsomarin.com/desarrollo-web/tutoriales/backbonejs-iii-colecciones. It orders elements automatically whenever there is a new addition to the model set.   

Clients = Backbone.Collection.extend({
    comparator: function(client){
        // order by attribute name
        return client.get('name');
    }
    // …
});

– Routing with URLs.

The Router allows users to navigate the application and find linked and updated URLs. In this way, users never get lost and can move forward and backward in the pages. The users changes view and models but the behavior is the same.

First steps to Begin Programming

To begin using BackboneJS, you need to follow these steps: 

– First, install all BackboneJS dependencies. To manage the views and user interface, you need to set up jQuery. For auxiliary functions, BackboneJS has a dependency in Undersore.js. Also, for JSON processing, you need the json2.js library: it provides two important functions for BackboneJS (JSON.parse and JSON.stringify).

– If you wish to develop the application with Backbone Boilerplate, this has two dependencies in two libraries: Grunt, a project manager using command lines, and Grunt-bbb, the core of Backbone Boilerplate. In turn, this has dependency of Git, the version control software. There is also dependency of the client-side development environment in JavaScript Node.js. Click here to download and install.

– Lastly, you need to configure the scripts. Create your own index.html, including the library scripts you are going to use:

<script src="jquery.js"></script>

<script src="underscore.js"></script>

<script src="backbone.js"></script>

Follow us on @BBVAAPIMarket