Backbone.js is a Javascript library and it is based on the model-view-presenter application framework. Its objective is to provide a simple set of data structures and features for creating a structured web application’s front end. Simple models, useful features, and easy integration with JSON API are the most talked about features of Backbone.js. In this article, we would like to list out common mistakes made by web developers while using backbone.js.
Ignoring the Functionalities of Backbone.js
Although Backbone.js offers a minimalistic framework, it provides numerous functionalities that can easily cover critical needs of developing a full-fledged web application. Newbie web developers often treat Backbone.js as yet another MVC like client framework for web applications. Not exploring Backbone.js framework in its entirety is a frequent mistake made by web development experts. Web developers should keep in mind that extensibility and plug-ins of Backbone.js can be used to build innovative web applications. It is to be mentioned that best features of Backbone.js are made tangible through models, collections and views. Its router and history components provide a simple mechanism to support client side routing.
Modifying DOM in Response to Arbitrary Events
Web developers often tend to update Backbone.js with a view in response to arbitrary DOM events and it is a practice that should be avoided at all costs. According to web developers with long years of experience, there may be occasions where direct manipulation of DOM from the event handlers will make sense. Web developers will have to think about costs involved in managing complex DOM manipulations.
Underestimating the Cost of Rendering
Backbone.js makes it very easy to render and re-render the DOM in response to events and it has a very huge impact on overall performance of web application. There are many methods that we can employ for thrashing the render method on our views and the drop in performance becomes more apparent. Re-rendering each and every time a model is added to the collection will work fine and the render method can be employed multiple times consecutively. A quick solution to this problem is to not to call the render method for every single model that is not being added. Developers of Trello (A web based project management application) had written extensively about approach in improving rendering performance while using Backbone.js.
Leaving Event Listeners beyond Their Use
Leaving unused event listeners bound is probably a common mistake committed by Javascript developers irrespective of framework they use. This issue can be easily sorted out using Backbone.js and leaving memory leaks in web application should be avoided. ‘Event’ component of Backbone.js is certainly a pretty neat implementation strategy and it is very easy to implement event based features in Javascript. As views are locations where event consumption usually happens, it is common to make mistake in ‘view’.
Creation of Monolithic Views
Fascinating advantage of Backbone.js is that it provides a great amount of flexibility in shaping up web application’s front end. With models, collections and views, web developers make backbone.js lightweight and specific. It is important that developers should not end up making giant monolithic views and a ‘view’ should be split into small ones.
Granular views make the process of developing an application with Backbone.js a soothing experience. Backbone.js code should be maintainable, easy to extend and easily customizable. Views in Backbone.js are designed to make it convenient for web developers to work with model or collection.
Not knowing that Backbone.js can be adapted to Non-RESTful APIs
It is a well known fact that Backbone.js works with JSON based RESTful APIs and it is extremely extensible. Developers fall in love with Backbone.js mainly because of the fact that it can be adapted to use other types of APIs and other encoding formats. Particular component of Backbone.js that deals with interaction of front end and back end services is called as “Sync”. It features number of attributes that web developers can easily override to customize Backbone.js. Numerous plug-ins are available for making the customization of Backbone.js’s behavior pretty easy. Backbone.js sync feature lets web folks to adapt to a wide range of back end service APIs and encoding formats.
It is quite interesting to note that other components of Backbone.js too are highly flexible and developers won’t have to utilize the default template engine which comes with underscore.js. It is possible to replace view component of Backbone.js with something web developers want and we leave it to your creativity. Backbone.js gives developers powerful set of tools that will help them to scale new heights of innovative excellence in web development. Despite the fact that Backbone.js collections can be simply configured, many of the web developers make mistakes easily.
There are several ways to handle this situation
1. Don’t Re-Render the Parent View
The simplest is to design a parent view that doesn’t require re-rendering. It has static content and serves as a container of child views. The child view container elements are never re-rendered, so they never go stale.
2. Reassign the Child View’s Element
Another more practical approach is to reassign the child view’s container once the parent view renders. Your view can now re-render appropriately, but its events will still be broken, as they are still stale. This second piece can be fixed with a call to delegate Events.
Example
Example.ParentView= Backbone.View.extend({
childView:new Example.ChildView(),
render:function(){
this.$el.html(this.template(this.model.
toJSON()));
this.childView.$el
=this.$(‘#child-view-container’);
this.childView.render();
this.childView.delegateEvents();
}
});