javascript frameworks comparison - angular, knockout, ember and backbone
Post on 15-Jan-2015
6.551 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/emberjs/ember.js
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
top related