Testing

Go to Eleven Hive

Pixel image

Javascript framework evaluation: BackBone.js

Very important links related to this post:

• Collection of my posts

Hi Friends,

Today, we all know that UI is becoming more and more powerful. With the introduction of Html5, client side code has started becoming more thick. People has started doing lot of work on Javascript and as a result, in last few years several javascript framework has been evolved. Each framework is coming with their some unique and some overlapping features, attributes to make developers life easier. But, it becomes very difficult if have to choose one framework that best suitable for our application. We have also faced similar issue while we were to select a particular framework for our project in our company. At that time, we have evaluated several framework on the basis of certain criterias. I am going to discuss that evaluation of different frameworks one by one in my coming posts:

Here, I am going to discuss Backbone.

Backbone was created by Jeremy Ashkenas who is also known for CoffeeScript and Underscore.js. Its initial release was on 13th Oct, 2010 and current stable version is 1.2.3 released on 19th Aug, 2015. It is a javascript framework based on MVC or MVP pattern. It is very light weight, only 7.3 KB in production, with hard dependency on  Underscore.js and JQuery.js and with light dependency on Require.js. So, I am going to start evaluating it on different criteria without boring you more.....

Current version	1.2.3
Component Richness	No. It does not provide any component like textbox, textarea etc. The mote behind the backbone is mainly to facilitate the communication between these components with some managed models, views, template along with providing support for AMD, asynchronous task handling etc.
License	Mit License
Ajax Support	Ajax is supported in several builtin functions like save, fetch, update, destroy etc. If we want to use ajax call, then its done by use of $.ajax that is being provided by jquery in backbone
Browser Cache	Browser caching is possible by using $.ajaxSetUp({cache: true}). Backbone does not directly provide cache support. It can be implemented by using jquery and normal html5 tricks. It can also be done by using overriding fetch function of backbone and providing cache: true here.
Mobile Support	Backbone does not support mobile app development directly. It helps in app development by giving us way of organizing our code like MVC pattern with model, view and controller along with Jquery mobile with its feature like routing and mobile specific components.
Browser Support	Safari, Chrome, IE9 onward, Firefox
SPA Support	SPA is supported by Backbone but not directly. SPA is given by backbone by supporting:                Ajax through jquery                Templating through underscore js or HandleBar.js                MVC                Routing                Minification through uglyfy.js or require.js                AMD through Require.js
Event Handling	Backbone provides a good event handling machanism by giving functions like on, off, trigger, once, listenTo, stopListening, listenToOnce. Almost every operation in backbone can be associated with callback functions for better support of asynchronous mechanism. Although, it does not directly provide a eventBus like mechanism, yet similar mechanism can be created by using the function mentioned above.
Two way binding	Here 2 way binding means binding between model and views. This binding is not directly provided by backbone. It can be done by other tools like knockout.js or Rivets.js. There is a backbone plugin, Model-Binder, which is also a great option for this.
MVC support	MVC is supported by backbone. Backbone directly supports model and views by giving option for creating their object and providing built in function to manage the life cycle of these objects. Some prefer to have intermediate "controller" objects that orchestrate the creation and organization of views into a hierarchy. Others still prefer the evented approach, and always fire events instead of calling methods directly. All of these styles work well.
Security	SPA are vulnerable to two important issues like Cross site Scripting(XSS) and Cross Site Request Forgery(CSRF). Backbone does not have any security policy regarding these. Its even does not offer any documention on how to write secure code using this library. The templates, routers being used in backbone is highly vulnerable to attacks.
Learning curve	Very easy to learn it. Huge amount of online materials, examples and good quality of documention is present.
Object Decoupling	Backbone does not provide any builtin support for object decoupling. But, we can apply it by using custom pub/sub pattern or to some extent by using event machanism.
Routing	Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events. The router class must contain an url or route and a function which will be triggered if that route or url matches. It is also possible to create dynamic router depending on the parameters being sent with the url.
Template	Although templating is not directly provided by backbone, yet it is strongly recmonded for creating strong and reusable UI design. Backbone uses Underscore.js i.e. _.template() to create template. It is suggested to choose a nice JavaScript templating library. Mustache.js, Haml-js, and Eco are all fine alternatives. Because Underscore.js is already on the page, _.template is available, and is an excellent choice if you prefer simple interpolated-JavaScript style templates
Minification	Does not support directly as provided by Extjs using Sencha CMD. Done by using either Require.js or uglyfy.js or others
AMD Support	AMD is supported in backbone projects with the help of Require.js.

So, from above discussion, it is clear that Backbone is not such a framework that provides you everything in a single roof. It just provides handling and management of Model, views, template with the help of underscore.js, asynchronous module loading although with the help of Require.js. It facilitate app development by abstracting several boilerplate code. It does not force developer to follow its hard core syntax but help them to do some unique by using its helping hand.

There are several plugins designed in backbone like Marionette, Chaplin, rendr and several others. The list of all plugins can be found on http://backplug.io/

One thing that I want to make clear that from above discussion my intent is not to show that which framework is more powerful as each framework comes with some unique features and can't fit in all scenarios. So, above discussion may be helpful in selecting a framework suitable for an application evaluated on above criteria.

Guys, please feel free to send your response regarding the above discussion and your suggestions regarding adding any new criteria in this discussion is most welcome.

Very important links related to this post:

• Collection of my posts