 1
 A WALK THROUGH - JAVASCRIPT FRAMEWORKS
 JAVASCRIPT MV* FRAMEWORKS
 Organise code using
variations of MVC
Pattern
 Helps in
 Tying together a DOM
manipulation...
 BIG FOUR
 Maintained by Google and
community
 Initially Released on 2009
 Current stable release
1.2.18 (June 13, 2014)
 ~37kb ...
 Developed and is maintained by
Steve Sanderson, a Microsoft
employee
 It is a personal open-source project,
and not a M...
 Created by Jeremy Ashkenas,
 Initially Released on October
2010,
 Current stable release 1.1.2
(February 20, 2014)
 ~...
 Created by Yehuda Katz, a
member of the jQuery, Ruby on
Rails and SproutCore core
teams.
 Initially released as the
Spr...
 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 ...
 Data-binding is fully supported
 Models use standard JSON properties (e.g. car.color = "red";)
 Provides Option for Cr...
 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 Backbo...
 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 elem...
 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 templa...
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 popula...
 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 foll...
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...
 Uses JQuery’s $.ajax under the covers
 Just “getting data” is relatively easy to do e.g.
 Doing things the “Ember way”...
 Uses JQuery’s $.ajax
 Uses knockout mapping plugin
 Maps JavaScript object into a view model with the a
 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
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Upcoming SlideShare
Loading in...5
×

Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone

31,496

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
46 Likes
Statistics
Notes
No Downloads
Views
Total Views
31,496
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
460
Comments
1
Likes
46
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×