Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone

1

A WALK THROUGH - JAVASCRIPT FRAMEWORKS

JAVASCRIPT MV* FRAMEWORKS

Organise code using variations of MVC Pattern

Helps in Tying together a DOM

manipulation library Templating Routing

BIG FOUR

Maintained by Google and community

Initially Released on 2009 Current stable release

1.2.18 (June 13, 2014) ~37kb total (gzip / minified)

Miško Hevery and Adam Abrons

Developed and is maintained by Steve Sanderson, a Microsoft employee

It is a personal open-source project, and not a Microsoft product.

Released on July 5, 2010 Current version 3.1.0 (March 18,

2014) ~17kb total (gzip / minified)

Created by Jeremy Ashkenas, Initially Released on October

2010, Current stable release 1.1.2

(February 20, 2014) ~6.5kb total (gzip / minified)

Created by Yehuda Katz, a member of the jQuery, Ruby on Rails and SproutCore core teams.

Initially released as the SproutCore 2.0 framework later renamed as Ember.js

Initial release : 2011 Current stable release 1.5.1

(April 22, 2014) ~71 kb total (gzip / minified)

Comparison

Scoring system

OK Not Good Good

How fast can I get up and running from homepage link?

Github https://github.com/jashkenas/backbone

Github − https://github.com/emberjs/ember.js

Github https://github.com/angular/angular.js

Github https://github.com/knockout/knockout

DEPENDENCIES

NO DEPENDENCIES

NO DEPENDENCIES

DATA BINDING

Process that establishes a connection between the application UI (User Interface) and business logic

Data-binding is fully supported

Data can be bind into many attributes like text,value, options, enable etc

Provides Option for Creating custom bindings

Data-binding is fully supported Models use standard JSON properties (e.g. car.color = "red";)

Provides Option for Creating custom bindings

Data-binding is not supported by default.

There are plugins available to support Data-binding

Data-binding is fully supported Models use getters and setters but the binding is

automatically and better than Backbone.

Used for routing your applications URL's when using hash tags(#)

Maps an url to a javascript function

ROUTERS

/person/12/101

Routing is very simple

Router is similar to Backbone’s

/person/12/101

Router is extremely capable, but very complex Supported embedded routes

/person/12/101

Knockout does not support routing by default Still Routing is easily configurable by following third party libraries

VIEWS

How the stuffs are displayed in the screen

Simple and straight forward. Easy for developer with JQuery and DOM skills Simply extend Backbone.View, grab an element and put stuff in it No Official Templating, but easy to add using

Uses HTML as templating language Automatically pulls in HTML templates via AJAX when needed

Extensive view type support Very easy to create re-usable components Handlebars are used for templating

Uses HTML as templating language

Supports Native templates

Using default control flow bindings String based templates

Third-party template engine

TESTING

Support for testing application

No default test solution; Test it your own Can use following third party solutions

Fantastic test support. Designed from the beginning to be easy to test. Karma developed by Angular JS team is popular test runner

Poor testing initially Pretty good testing support now

As of now, no default debugging tools Functions like Console.log(), ko.toJSON() helps debugging process

Can use following third party solutions

DATA

How do I get data from the sever?

Uses JQuery’s $.ajax to power Backbone. Very Easy to understand Default behaviour is relatively easy to override

No JQuery Can do with Angular’s $http but much better using $resource Very good API

Requires the ngResource module to be installed.

Uses JQuery’s $.ajax under the covers Just “getting data” is relatively easy to do e.g.

Doing things the “Ember way” is a bit more complex

Uses JQuery’s $.ajax Uses knockout mapping plugin Maps JavaScript object into a view model with the appropriate observables

How easy to get help?

COMMUNITY /DOCUMENTATION

How easy to get help?

THIRD PARTY INTEGRATION How easy to integrate another JS library?

DEVELOPMENT TOOLS

Thanks