javascript frameworks comparison
TRANSCRIPT
Ganesh P A, Technical Architect
A WALK THROUGH - JAVASCRIPT
FRAMEWORKS
JAVASCRIPT MV* FRAMEWORKS
Organize code using variations of MVC Pattern
Helps in Readable, structured,
testable and maintainable code
Tying together a DOM manipulation library
Templating
Routing
BIG FOUR
Maintained by Google and community
Initially Released on 2009
Current stable release 1.3.x(Feb 2015)
~110 kb (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.3.0 (Feb 2015)
~21 kb (gzip/minified)
Created by Jeremy Ashkenas,
Initially Released on October 2010,
Current stable release 1.1.2
~6.5 kb (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.10.0
~102 kb (gzip/minified)
Comparison
Scoring system
OK Not Good Good
How fast can I get up and running from homepage link?
HELLO WORLD
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(#) and/or HTML5 history API
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?
Hello World
Dependencies
Data binding
Routers
Views
Testing
Data
Community/Doc
umentation
Third party
integration
Development
tools