JavaScript is the language of HTML and the Web. It has been used to portray creativity at different levels within web applications. While writing a complex application that involves a lot of JavaScript, it is easy to end up with unmanageable and tangled code, that is a pile of jQuery selectors and Ajax calls. It has also lost the ability to scale and perform well with large amount of data. Moreover, Debugging such a code can turn out to be a nightmare.
Backbone.js introduces a very much structured (MVC) approach which vastly improves the manageability and scalability of your code. With a low learning curve, backbone.js helps stream line basic data synchronization between your web application and server. A large utility of methods that come with its underlying underscore.js library helps to prevent writing widely required methods and can save a lot of your development time.
Backbone.js represents all your data as Models which can be created, updated, destroyed, validated and synced to the server with minimal configuration, allowing code re-usability to be maximized.
Events in backbone.js are key to binding functionality. Lets say, we had a Model Employee and we decided to change employee’s last name:
var Employee = Backbone.Model.extend({<br>
baseUrl : “/employee/”,<br>
url : function(){<br>
return this.isNew() ? : “create/” : “update/” ;<br>
}<br>
});<br>
//instantiate an object<br>
var emp = new Employee();<br>
//update a property<br>
emp.set('lastname', 'ABC'); This action would trigger a change event within the model which could be implemented as:
emp.on(“change:lastname', function(){<br>
this.view.renderFullName();<br>
}) After setting the last name, you needed to save the Model which was as simple as:
emp.save();
Minimal configuration for save to work was to set a base URL in the model to represent the path on server that handles employee update procedure and backbone.js would append the id attribute of the model at the end of URL. A Restful request would be sent to server with all of the Models attributes as in the above example:
“/employee/update/{id of employee}”
vteam #440 had a growing need to implement single paged interfaces, two such needs were the shift scheduling and time clock interfaces. We implemented Models of our Database entities in one file and re-used them across both the interfaces. This had restricted us to implement a Restful CRUD API on the server which was a best practice in its own. Needless to mention that these models would be re-used in forth coming such requirements as well.
Events are a great tool with backbone.js. In our case, we extended backbone.js to create a custom Event Dispatcher. We triggered custom events within the application that could be subscribed and dispatched by this Event Dispatcher to perform various actions of various interfaces. This again was a manageable way to accumulate similar code at one place instead of scattering it in various sections.
Collections are indeed another great utility in backbone.js. A collection is basically a set of Models which is researchable, sortable, filterable and what not. Creating a collection and fetching a bunch of models from the server could be as simple as:
var employeeCollection = new Backbone.Collection({<br>
url: '/employees'<br>
});<br>
employeeCollection.fetch(); The fetch command would expect a list of employees from the server in JSON format. Upon receiving, it would set all of them up as Employee Models. Collections can be used for bulk CRUD operations as well.
Views in backbone.js can vary depending on UI requirements, but we had broken down views into smallest possible units to increase their re-usability across different sections of the whole application. Backbone.js views had delegated events which prevents you from using the traditional jQuery event binding methods, so you don’t have to worry about unbinding and rebinding events upon re-rendering views.
To conclude, backbone.js helped us keep the entire application code manageable, scalable, DRY compliant and had extensively improved our team’s productivity.
0 Comments