AngularJS v/s Backbone.js

6

Transcript of AngularJS v/s Backbone.js

http://www.funnyant.com/choosing-javascript-mvc-framework/

Foraying to JavaScript on the server side, one can say that the jury is still outwhether implementations such asNode.js can replace existingserver-side technologies such as C++,JJava, PHP, and .Net, but it is makinghuge strides. Node.js is especiallyuseful in handling IO intensiverequests to provide scalability.The other server-side technologies areuseful where CPU intensive tasksneed to be performed frequently.

Javascript for Server-Side

Rapid development and greatuser experience.

Instant results with no compile stepas in GWT.

Ajax - Every web developer knowsand loves Ajax..

The advantagesof JavaScript

Before jumping into merits anddemerits of frameworks, it is worthmentioning that JavaScript hasbecome the language of choice fordevelopment, especially for clientsidedevelopment. A lot of technologieshhave been employed in the past suchas GWT, JSF, PHP, Ruby on Rails, butJavaScript is now getting intoa dominant position of late.

JavaScript is King

What Suits Your Strengths?

Backbone.jsvsAngularJS

As more and more logic ends up being executed in thebrowser, JavaScript front-end code bases grow largerand more difficult to maintain. To solve this issue,developers have been turning to client-sideMVC frameworks, which promise increased productivityand maintainable code.

MVC Frameworks

This Clarice white paper gives a brief overview of thecurrent trends in web development. It also comparestwo key UI frameworks: Backbone.js and AngularJS,with recommendations on which to employ and when.

https://github.com/DimitarChristoff/Epitome https://github.com/rhysbrettbowen/PlastronJS https://github.com/elabs/serenade.js http://sammyjs.org/https://github.com/petermichaux/maria http://agilityjs.com/

http://backbone-js.org/

http://emberjs.com/http://knockoutjs.com/http://www.kendoui.com/http://canjs.us/http://spinejs.com/

http://angularjs.org/

Backbone.js

AngularJS

Ember

Knockout

Kendo UI

CanJS

Spine

User BaseAdoption

Value Proposition

A lightweight framework that strives to have the most friendlydocumentation for any JavaScript framework available

Spine

Focuses on striking a balance between size, ease of use,safety, speed and flexibility.

CanJS

Combines jQuery-based widgets, an MVVM framework,themes, templates, and more.

Kendo UI

Aims to simplify JavaScript UIs by applying theModel-View-View-Model (MVVM) pattern.

Knockout

Provides templates written in the Handlebars templating language,views, controllers, models and a router.

Ember

A toolset based on extending the HTMLvocabulary for your application

AngularJS

Provides models with key-value binding and custom events,collections, and connects it all to your existing API over a RESTfulinterface. It handles JSON, XML, etc., interfaces quite well.

Backbone.js

Some of the JavaScript frameworks thatare available for users to experiment withare listed here.

Epitome, PlastronJS, Serenade.js, Sammy, Maria, and Agility are some of the otherframeworks you can explore. For additional information,please refer to http://todomvc.com

Small Medium

AngularJS deployment size is bigger compared toBackbone.js, which is lightweight. However,Backbone.js requires other libraries such as JQuery,Underscore.js to be included to make it fully functional,so the difference does not matter much.Both are suitable for mobile apps which normally limitsthe sithe size. Loading Angular may showa slight delay the first time.

Size AngularJSBackbone.js

Both frameworks have a stable API, apps in productionfor at least 2 years, good documentation and examples,and huge community support. AngularJS is forgingahead as far as online interest goes at this point.

Maturity AngularJSBackbone.js

The table below lists the relative advantages and disadvantagesof these two main frameworks on various parameters.

Backbone.js vs AngularJS

AngularJS and Backbone.jshave their own advantages anddisadvantages, which arediscussed further. This is not topreclude Knockout and Ember orany other framework outright,but but at this point, in terms ofadoption and value propositionBackbone.js and AngularJSare well ahead of the pack.Backbone.js, AngularJS, Knockout, Ember.

Based on our experience of working on 100+ productUIs, we have found that a few of these stand out interms of adoption readiness and value proposition.They are established and/or have experienced maximumgrowth in terms of queries/searches of late. They are:

Choosing the Framework

EasyEasyEven though both frameworks work well with othertechnologies, AngularJS tries to encourage developersnot to use libraries such as JQuery, but provides asubset jqLite.

Interoperability AngularJSBackbone.js

Backbone.js is most unopinionated framework(exception - RESTful service from server) whereasAngularJS is strongly opinionated-implementationshould be done the "Angular way", for example,JSON.parse vs angular.fromJSON.

Opinionated Development AngularJSBackbone.js

In this area, AngularJS scores really well againstBackbone.js. Backbone.js provides separation of Modeland the View, but the user needs to link them togetherwith the help of an eventing mechanism. You have to dothe wiring yourself. User ends up writing a lot of code tomake everything work together. AngularJS providestwo way dtwo way data binding upfront and reduces the complexityto a large extent. User has to write less code which helpsit make less error-prone.

Two-way data binding AngularJSBackbone.js

AngularJS packs itself with a lot of features so that auser has enough tools to get going. It comes withDirectives and Filters (custom and in-built).It has good support for module dependenciesand injections, and has services and factories whichbecome reusable parts for your app. For Backbone.js,plugins aplugins are available such as Underscore.js,JQuery/Zepto.js, JSON2.js, which aid in development.

Out of the box solution AngularJSBackbone.js

Model Sync Manual Ajax

Backbone.js uses RESTful service to sync data with theserver - saves data automatically. AngularJS usesa manual method which can accommodate differentservers. Both technologies can adapt to differentserver-side technologies.

Data Storage AngularJSBackbone.js

This can be an advantage or a disadvantage for theframework. AngularJS uses HTML to define the app'sUI, whereas Backbone.js does not. With Backbone.js,users can use templating tools such as dust.js,handlebars.js, moustache.js, etc. On the one handAngularJS has an advantage because HTML is intuitiveand less convoluted compaand less convoluted compared to JavaScript fordefining UI, but it forces the UI developer to understandboth HTML and AngularJS well to be productive.In case of Backbone.js, HTML templating andmodel/control development can be done separately,and thus run in parallel.

Templating using HTML AngularJSBackbone.js

Easy Hard

There is a steep learning curve for AngularJS for reasonsdescribed above, even though getting off the ground iseasy. Directives and Filters are very useful but can becomplex to master. If code is not written in the "Angular"way, it can easily become convoluted. Backbone.js scoresin this area as prior knowledge of JavaScript comesin handin handy, and classes which represent Model, View andData become the base for UI development to applyOO concepts. Once the developer understands thesebasic concepts, there are no surprises.

Learning curve AngularJSBackbone.js

www.claricetechnologies.com

[email protected]+91 (20) 4078 9520

Clarice Technologies specializes in providingUser Experience Design and cutting-edge technologydevelopment services under one umbrella to product organization.We take pride in working with companies who considerUser Experience key to their competitive stategy.

The key difference is thatAngularJS deviates from theclassical Java-scriptdevelopment and introducesa new paradigms,whereas Backbone.jsrresembles classic Javascript.

In general, both frameworks compare well in terms ofmaturity and size. There are numberof examples available where these frameworkshave been used in production.

While making the choice between the two,the following should be considered.

YYou should opt for Backbone.js when you are looking forflexibility. It provides a ready framework that works withmultiple libraries which can be added on as required.Backbone.js has an advantage when the team has priorknowledge of JavaScript and does not wantto invest in training.

You should opt for AngularJS when looking fora compa comprehensive, all-in-one solution.

Two-way data binding and in-built directives/filters allowteams to develop applications very rapidly. This allowsusers to write less code, but note that Angular requiressignificant effort and time to learn. It has good testintegration, which is really useful. Over time, if teamsbecome conversant with AngularJS, then it isan extan extremely powerful framework.

In Conclusion