1.
 1
 A WALK THROUGH - JAVASCRIPT FRAMEWORKS

2.
 JAVASCRIPT MV* FRAMEWORKS
 Organise code using
variations of MVC
Pattern
 Helps in
 Tying together a DOM
manipulation library
 Templating
 Routing

3.
 BIG FOUR

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.
 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.
 Created by Jeremy Ashkenas,
 Initially Released on October
2010,
 Current stable release 1.1.2
(February 20, 2014)
 ~6.5kb total (gzip / minified)

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.
 Comparison
 Scoring system
 OK  Not Good Good

9.
 How fast can I get up and running from homepage link?

10.
 Github
 https://github.com/jashkenas/backbone

11.
 Github
 https://github.com/emberjs/ember.js


12.
 Github
 https://github.com/angular/angular.js

13.
 Github
 https://github.com/knockout/knockout

14.
 DEPENDENCIES

15.
 NO DEPENDENCIES

16.
 NO DEPENDENCIES

17.
DATA BINDING
 Process that establishes a connection between the
application UI (User Interface) and business logic

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.
 Data-binding is fully supported
 Models use standard JSON properties (e.g. car.color = "red";)
 Provides Option for Creating custom bindings

20.
 Data-binding is not supported
by default.
 There are plugins available to
support Data-binding

21.
 Data-binding is fully supported
 Models use getters and setters but the binding is
automatically and better than Backbone.

22.
 Used for routing your applications URL's when using
hash tags(#)
 Maps an url to a javascript function
ROUTERS

23.
 /person/12/101
 Routing is very simple

24.
 Router is similar to Backbone’s
 /person/12/101

25.
 Router is extremely capable, but very complex
 Supported embedded routes
 /person/12/101

26.
 Knockout does not support routing by default
 Still Routing is easily configurable by following third party libraries

27.
VIEWS
 How the stuffs are displayed in the screen

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.
 Uses HTML as templating language
 Automatically pulls in HTML templates via AJAX when needed

30.
 Extensive view type support
 Very easy to create re-usable components
 Handlebars are used for templating

31.
 Uses HTML as templating language
Supports
 Native templates
 Using default control flow bindings
 String based templates
 Third-party template engine

32.
TESTING
 Support for testing application

33.
 No default test solution;
 Test it your own
 Can use following third party solutions

34.
 Fantastic test support.
 Designed from the beginning to be easy to test.
 Karma developed by Angular JS team is popular test runner

35.
 Poor testing initially
 Pretty good testing support now

36.
 As of now, no default debugging tools
 Functions like Console.log(), ko.toJSON() helps debugging process
 Can use following third party solutions

37.
DATA
 How do I get data from the sever?

38.
 Uses JQuery’s $.ajax to power Backbone.
 Very Easy to understand
 Default behaviour is relatively easy to override

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.
 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.
 Uses JQuery’s $.ajax
 Uses knockout mapping plugin
 Maps JavaScript object into a view model with the a

42.
 How easy to get help?
 COMMUNITY /DOCUMENTATION

43.
 How easy to get help?
 THIRD PARTY INTEGRATION
 How easy to integrate another JS library?

44.
 DEVELOPMENT TOOLS

45.
Thanks