This was a slide used in GTech TFG event on Angular JS.

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

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

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

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

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

16.  DEPENDENCIES

19.  NO DEPENDENCIES

20.  NO 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