Common Mistakes Developers Make When 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
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.
How to handle initializing and rendering subviews in Backbone.js?
The view’s container element (affectionately known as its el) swaps out all of its html for new html, probably fetched from a template. The problem is in the child view.
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.
Do we repopulate or recreate the view in backbone or just get rid of the objects?
It all depends on the Backbone application an individual is creating. We have to take into consideration of the lifespan of the objects created or involved. Because if the scope of the object is going to be for the entire application, then it is better not to kill the objects, which are going to be used. And it is better to delete the one’s which are of local scope / temporary. Also, repopulating the view in backbone suits well in the case when the data objects are dynamic (like just a data-refresh).