Vikas Gupta: Software architect

JavaScript MVC Framework Comparison

Posted by Vikas Gupta on August 4, 2013

Javascript is emerging as a prominent development language in past few years. It has been increasingly adopted in various web based projects. It is also used to develop hybrid mobile applications. However, a common concern in the adoption of Javascript as a development languages has been the maintenance of  Javascript code in larger teams. Over the years, in order to improve code maintainability, separation of concerns using MVC pattern has been used. A lot of Javascript frameworks have emerged which have provided a means to enforce MVC pattern in Javascripe code as well. In this post, I will discuss top MVC frameworks and their pros and cons.

Let me start by presenting the results of survey conducted by Infoq.com to choose the top MVC frameworks.

JS MVC comparison

According to the survey, some of the top frameworks are AngularJS, Backbone.js, Knockout, Ember.js. Let’s discuss the pros and cons of top frameworks. We will consider pros and cons of AngularJS, Backbone.js, Knockout, Ember.js.

Backbone.js

Features

  • Model
  • View
  • Router
  • Collection
  • Events
  • History
  • Rest Sync
  • Templates (Underscore.js, HandleBars, Mustache)
  • Nested Models (NestedModel, Backbone.Relational..)
  • One-way Data binding

Pros

  • MVC Architecture
  • Simple to pickup
  • Flexible
  • Very popular (According to Github, Stackoverflow statistics)
  • Good Community Support

Cons

  • A toolset, not a framework
  • No opinions/prescriptions set by framework
  • Code can become messy
  • Dependency on different frameworks
  • Many choices make decision making difficult
  • DOM manipulations are left to the developer
  • Need to rely on elements ids and classes for DOM manipulation
  • DOM manipulation by developers may not give best performance
  • Browser support dependent on dependencies
  • Performs slower than AngularJS
  • Two way data binding does not exists.

AngularJS

Features

  • Templates
  • Two-way Data Binding
  • Dependency Injection
  • Directives
  • Services
  • Deep Linking
  • Controllers
  • Plain Javascript
  • Form Validation
  • Server Communication
  • Reusable components
  • Localization
  • Testable
  • Built-in protection for XSS, CSRF

Pros

  • Templates
  • Two-way Data Binding
  • Dependency Injection
  • Directives
  • Services
  • Good support for Debugging tools
  • There are a number of component libraries like Angular UI, AngularStrap which helps in Rapid Application Development.

Cons

  • No support for browsers < IE8
  • Some features like Directives can be difficult to understand
  • Still in the evolution mode. For example, ngRepeat does not offer feature to repeat over multiple elements.

EmberJS

Features

  • Templates
  • Models
  • Router
  • Route
  • Controllers
  • Computed Properties
  • Testing Support

Pros

  • Use HandleBars as templating which is flexible
  • Provides auto updating computed properties

Cons

  • Relatively new framework
  • Poor performance as compared to AngularJS
  • Documentation is not very good
  • Two way bindings are not implemented well

KnockOut

Features

  • Declarative Bindings
  • Automatic UI Refresh
  • Templates
  • Dependency tracking
  • Observables
  • Computer Observables
  • Custom Bindings

Pros

  • Simpler than most frameworks
  • Easy to Learn
  • Compatible with IE6+

Cons

  • Need to manually bind viewModel
  • Need to explicitly declare observables
  • No in built support for ajax
  • Comparatively lesser community support
  • Data Access and url routing not included
  • Not suited for large applications

Conclusion

After considering pros an cons, my recommendation would be to use AngularJS as the Javascript framework for the front end code. It results in maintainable code. It has two way data bindings and component libraries which offer out of the box components.

Advertisements

One Response to “JavaScript MVC Framework Comparison”

  1. One said

    Well, at least you had a conclusive opinion at the end 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: