Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone

40,908 views
39,304 views

Published on

Introduction and Comparison of polpular JS Frameworks Knockout, Ember, Angular and Backbone. The presentation descrobes How and when to select each framework.

Published in: Technology
1 Comment
57 Likes
Statistics
Notes
No Downloads
Views
Total views
40,908
On SlideShare
0
From Embeds
0
Number of Embeds
338
Actions
Shares
0
Downloads
641
Comments
1
Likes
57
Embeds 0
No embeds

No notes for slide

Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone

  1. 1.  1  A WALK THROUGH - JAVASCRIPT FRAMEWORKS
  2. 2.  JAVASCRIPT MV* FRAMEWORKS  Organise code using variations of MVC Pattern  Helps in  Tying together a DOM manipulation library  Templating  Routing
  3. 3.  BIG FOUR
  4. 4.  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
  5. 5.  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)
  6. 6.  Created by Jeremy Ashkenas,  Initially Released on October 2010,  Current stable release 1.1.2 (February 20, 2014)  ~6.5kb total (gzip / minified)
  7. 7.  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)
  8. 8.  Comparison  Scoring system  OK  Not Good Good
  9. 9.  How fast can I get up and running from homepage link?
  10. 10.  Github  https://github.com/jashkenas/backbone
  11. 11.  Github  https://github.com/emberjs/ember.js 
  12. 12.  Github  https://github.com/angular/angular.js
  13. 13.  Github  https://github.com/knockout/knockout
  14. 14.  DEPENDENCIES
  15. 15.  NO DEPENDENCIES
  16. 16.  NO DEPENDENCIES
  17. 17. DATA BINDING  Process that establishes a connection between the application UI (User Interface) and business logic
  18. 18.  Data-binding is fully supported  Data can be bind into many attributes like text,value, options, enable etc  Provides Option for Creating custom bindings
  19. 19.  Data-binding is fully supported  Models use standard JSON properties (e.g. car.color = "red";)  Provides Option for Creating custom bindings
  20. 20.  Data-binding is not supported by default.  There are plugins available to support Data-binding
  21. 21.  Data-binding is fully supported  Models use getters and setters but the binding is automatically and better than Backbone.
  22. 22.  Used for routing your applications URL's when using hash tags(#)  Maps an url to a javascript function ROUTERS
  23. 23.  /person/12/101  Routing is very simple
  24. 24.  Router is similar to Backbone’s  /person/12/101
  25. 25.  Router is extremely capable, but very complex  Supported embedded routes  /person/12/101
  26. 26.  Knockout does not support routing by default  Still Routing is easily configurable by following third party libraries
  27. 27. VIEWS  How the stuffs are displayed in the screen
  28. 28.  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
  29. 29.  Uses HTML as templating language  Automatically pulls in HTML templates via AJAX when needed
  30. 30.  Extensive view type support  Very easy to create re-usable components  Handlebars are used for templating
  31. 31.  Uses HTML as templating language Supports  Native templates  Using default control flow bindings  String based templates  Third-party template engine
  32. 32. TESTING  Support for testing application
  33. 33.  No default test solution;  Test it your own  Can use following third party solutions
  34. 34.  Fantastic test support.  Designed from the beginning to be easy to test.  Karma developed by Angular JS team is popular test runner
  35. 35.  Poor testing initially  Pretty good testing support now
  36. 36.  As of now, no default debugging tools  Functions like Console.log(), ko.toJSON() helps debugging process  Can use following third party solutions
  37. 37. DATA  How do I get data from the sever?
  38. 38.  Uses JQuery’s $.ajax to power Backbone.  Very Easy to understand  Default behaviour is relatively easy to override
  39. 39.  No JQuery  Can do with Angular’s $http but much better using $resource  Very good API  Requires the ngResource module to be installed.
  40. 40.  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
  41. 41.  Uses JQuery’s $.ajax  Uses knockout mapping plugin  Maps JavaScript object into a view model with the a
  42. 42.  How easy to get help?  COMMUNITY /DOCUMENTATION
  43. 43.  How easy to get help?  THIRD PARTY INTEGRATION  How easy to integrate another JS library?
  44. 44.  DEVELOPMENT TOOLS
  45. 45. Thanks

×