• We Code
  • We Design
  • We Develope
  • We Write
  • We Share


Tuesday, August 20, 2013

MVC in JavaScript Angular Vs Backbone vs Other

One technology which did remarkably well in recent year is JavaScript (EcmaScript). From the concept of Oops JavaScript has moved to MVC. JavaScript had libraries like J query  which is all about  on  Dom manipulation . I spend last few months on MVC framework in JavaScript. Before discussing  the MVC frameworks of JavaScript lets first understand  what  MVC actually is in practical.   

What Is MVC , Or MV* means actually ?

Various frameworks make able developers to create   a flexible way to organizing their code by using the variations of a pattern called MVC (Model-View-Controller). This is what book speaks about MVC.
If you will dig deep  MVC. It is divided into three parts
MVC in JavaScript

Models represent the domain-specific knowledge and data in an application. Think of this as being a ‘type’ of data you can model — like a User, Photo or Note. Models should notify anyone observing them about their current state (e.g Views).
Views think of this as  User-interface  (e.g your markup and templates). Views must be aware about the structure of model but they need not to interact with model directly
Controllers takes the all input from user in the application and update the model. The  controller don’t directly communicate the view .
This is how the Model - View – Controller relation is .

Various MVC Frameworks
There are many JavaScript MVC frameworks available like Backbone.js, Knockout.js, Ember.js, Spine.js, Angular.js, Ext.js etc. The Framework which are on too much demand are Backbone.js and angular.js .Both have own positives and negatives. Let’s start reviewing the various MVC in JavaScript.
Backbone.Js  - If you are in the down town  of JavaScript you must heard its name a lot . This is the one of the most widely used MVC Framework, Backbone is flexible framework. It provide the flexibility to choose the feature which you want to implement and which you don’t .underscore .js is tightly integrated with this  . It plays very well with other frameworks .The first and main disadvantage I personally felt with Backbone is the bad documentation even though they improved it a lot but still it is not good enough for beginners. The functional drawback of backbone is it’s  don’t provide UI binding. It is a event driven framework.

Angular.js  - this is my personal  favorite framework .What is best about Angular.js  is it is not dependent on any other framework like underscore  jquery etc. If its Angular its pure Angular. Angular is a complete solution . In Backbone there you have to implement all the event listeners you need not to write for events listener or event trigger its automatically happens in angular. The both way data binding make it awesome. Angular is   heavy .It means you have to type less. 
Directives services and provider are good concepts.Directives helps keeps your DOM manipulation code in  angular element.It  allow app to concern for update only when the data changes by this developer can keep all view logic separate. The.The HTML 5 have a lot of new tags but directive helps you to invent your own html tag.
Filter is another good thing with Angular.Filter filter data before it reaches to the views.It can format data in decimal number,ascending and descending order Filter are similar to the Directives you can keep them standalone.

Service providers are other good feature of angular.Services are something like API which you keep outside from your controller and the service provider expose your controller to the service.It again help Developer to keep controller lightweight and do all heavy lifting out side the MVC.$brodacst and $emit are example of inbuilt services of angular.Emit will send message to all predecessor and broadcast will send message to all successor by definition.But both works pretty same in angular world.
ReactJS - ReactJS is open source JS library by Facebook.ReactJS is not MVC  but I am writing about it because people keep comparing Angular with React. Facebook guys created huge buzz on AngularVsReact. React Vs Angular does not make any sense for we guys.Angular is a complete framework on the other-hand React is just the view layer.React provides few functions to present the HTML.All the react output is HTML.
The react component is bundle of HTML and JAVASCRIPT. Their is concept of State and Props.Which comes from inside the component is state .The component save state it in memory.Which pushed in from outside is props.It is impossible to create an App alone on Reactjs

The good part of React:

1.A component lives his life in his life cycle.A component does not bother what other component is doing .Component himself understand what to render and where to render.
2.It is very easy to learn and understand the flow.
3.It always keeps the DOM shadow.It does not do to  entire DOM manipulation on data change instead it manipulate the particular DOM.
4.The Flow of Application is easily understandable.

The bad Part of React:

1.There is way to make AJAX call all alone in React i.e. Natwork layer is missing.
2.There is no data layer as well.
3.No promises available

4.Worst of all not enough Documentation

We will discuss more MVC frameworks and definitely Angular 2.0 in detail in future. Stay tuned.


Post a Comment