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

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

17.  NO DEPENDENCIES

18.  NO DEPENDENCIES

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

20.  Data-binding is fully
supported
 Data can be bind into
many attributes like
text,value, options,
enable etc
 Provides Option for
Creating custom
bindings

21.  Data-binding is fully supported
 Models use standard JSON properties (e.g. car.color = "red";)
 Provides Option for Creating custom bindings

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

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

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

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

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

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

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

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

30.  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

31.  Uses HTML as templating language
 Automatically pulls in HTML templates via AJAX when needed

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

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

34. TESTING
 Support for testing application

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

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

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

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

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

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

41.  No JQuery
 Can do with Angular’s $http but much better using $resource
 Very good API
 Requires the ngResource module to be installed.

42.  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

43.  Uses JQuery’s $.ajax
 Uses knockout mapping plugin
 Maps JavaScript object into a view model with the a

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

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

46.  DEVELOPMENT TOOLS

54. Thanks