Javascript Frameworks Comparison
Download as PPTX, PDF0 likes1,215 views
This document summarizes and compares four popular JavaScript frameworks: Backbone.js, AngularJS, Ember.js, and Knockout.js. It covers key areas like how easy it is to get started with a "Hello World" example, dependencies, data binding capabilities, routing support, how views are defined, testing support, data handling, documentation/community support, and third party integration capabilities.
Javascript Frameworks Comparison
- 1. Ganesh P A, Technical Architect
- 2. A WALK THROUGH - JAVASCRIPT FRAMEWORKS
- 3. 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
- 4. BIG FOUR
- 6. 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
- 7. 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)
- 8. Created by Jeremy Ashkenas, Initially Released on October 2010, Current stable release 1.1.2 ~6.5 kb (gzip/minified)
- 9. 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)
- 10. Comparison Scoring system OK Not Good Good
- 11. How fast can I get up and running from homepage link? HELLO WORLD
- 16. DEPENDENCIES
- 21. DATA BINDING Process that establishes a connection between the application UI (User Interface) and business logic
- 22. Data-binding is fully supported Data can be bind into many attributes like text,value, options, enable etc Provides Option for Creating custom bindings
- 23. Data-binding is fully supported Models use standard JSON properties (e.g. car.color = "red";) Provides Option for Creating custom bindings
- 24. Data-binding is not supported by default. There are plugins available to support Data-binding
- 25. Data-binding is fully supported Models use getters and setters but the binding is automatically and better than Backbone.
- 26. Used for routing your applications URL's when using hash tags(#) and/or HTML5 history API Maps an url to a javascript function ROUTERS
- 27. /person/12/101 Routing is very simple
- 28. Router is similar to Backbone’s /person/12/101
- 29. Router is extremely capable, but very complex Supported embedded routes /person/12/101
- 30. Knockout does not support routing by default Still Routing is easily configurable by following third party libraries
- 31. VIEWS How the stuffs are displayed in the screen
- 32. 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
- 33. Uses HTML as templating language Automatically pulls in HTML templates via AJAX when needed
- 34. Extensive view type support Very easy to create re-usable components Handlebars are used for templating
- 35. Uses HTML as templating language Supports Native templates Using default control flow bindings String based templates Third-party template engine
- 36. TESTING Support for testing application
- 37. No default test solution; Test it your own Can use following third party solutions
- 38. Fantastic test support. Designed from the beginning to be easy to test. Karma developed by Angular JS team is popular test runner
- 39. Poor testing initially Pretty good testing support now
- 40. As of now, no default debugging tools Functions like Console.log(), ko.toJSON() helps debugging process Can use following third party solutions
- 41. DATA How do I get data from the sever?
- 42. Uses JQuery’s $.ajax to power Backbone. Very Easy to understand Default behaviour is relatively easy to override
- 43. No JQuery Can do with Angular’s $http but much better using $resource Very good API Requires the ngResource module to be installed.
- 44. 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
- 45. Uses JQuery’s $.ajax Uses knockout mapping plugin Maps JavaScript object into a view model with the appropriate observables
- 46. How easy to get help? COMMUNITY /DOCUMENTATION
- 47. How easy to get help? THIRD PARTY INTEGRATION How easy to integrate another JS library?
- 54. Hello World Dependencies Data binding Routers Views Testing Data Community/Doc umentation Third party integration Development tools