Javascript Frameworks
- 2. Outline
• MV* Patterns
• Big Four Frameworks
• Framework Comparison:
– Dependencies
– Data Binding
– Routers
– Views
– Testing
Mitesh Gandhi - MetaSys Software
- 3. Outline …
• Framework Comparison:
– Data
– Community
– Third Party Integration
– Development Tools
• React
• React vs AngularJS
• Guide Lines
Mitesh Gandhi - MetaSys Software
- 4. Outline …
• Principle of Natural Fit
• Team Adaptability & Learning Curve
Mitesh Gandhi - MetaSys Software
- 7. Big Four Frameworks
AngularJS Knockout Backbone Ember
Developed /
Maintained
Brat Tech LLC,
Google and
community
Steve
Sanderson
Jeremy
Ashkenas
Yehuda Katz
Design
Paradigm
MVW MVVM MVP MVC
Year
Released
2009 2010 2010 2011
Current
Stable
Release
1.4.7 /
Sep. 29, 2015.
3.3.0 /
Feb. 18, 2015
1.2.3 /
Sep. 03, 2015
2.1.0 /
Oct. 4, 2015
File Size 144 kb 21 kb 22.5 kb 427 kb
License MIT MIT MIT MIT
Website angularjs.org knockoutjs.com backbonejs.org emberjs.com
Mitesh Gandhi - MetaSys Software
- 8. Comparison - Dependencies
Framework Dependencies
AngularJS No Dependencies
Knockout No Dependencies
Backbone - Underscore.js
- jQuery
Ember - Handlebars
- jQuery
Mitesh Gandhi - MetaSys Software
- 9. Comparison – Data Binding
Mitesh Gandhi - MetaSys Software
• Process that establishes a connection
between the application UI (User
Interface) and business logic
- 10. Comparison – Data Binding …
• Data-binding is fully
supported
• Models use standard
JSON properties (e.g.
car.color = "red";)
• Provides Option for
Creating custom
bindings
Mitesh Gandhi - MetaSys Software
- 11. Comparison – Data Binding …
• Data-binding is fully
supported
• Data can be bind into
many attributes like
text, value, options,
enable etc..
• Provides Option for
Creating custom
bindings
Mitesh Gandhi - MetaSys Software
- 12. Comparison – Data Binding …
• Data-binding is not
supported by default.
• There are plugins
available to support
Data-binding
Mitesh Gandhi - MetaSys Software
- 13. Comparison – Data Binding …
• Data-binding is fully supported
• Models use getters and setters but the
binding is automatically and better than
Backbone.
Mitesh Gandhi - MetaSys Software
- 14. Comparison – ROUTERS
Mitesh Gandhi - MetaSys Software
• Used for routing your applications URL's
when using hash tags(#)
• Maps an url to a javaScript function
- 16. Comparison – ROUTERS …
• Knockout does not support routing by
default
• Still Routing is easily configurable by
following third party libraries
Mitesh Gandhi - MetaSys Software
- 18. Comparison – ROUTERS …
• Router is extremely capable, but very
complex
• Supported embedded routes
Mitesh Gandhi - MetaSys Software
/person/12/101
- 20. Comparison – Views …
• Uses HTML as templating language
• Automatically pulls in HTML templates via
AJAX when needed
Mitesh Gandhi - MetaSys Software
- 21. Comparison – Views …
• Uses HTML as templating language
Supports
• Native templates
– Using default control flow bindings
• String based templates
– Third-party template engine
Mitesh Gandhi - MetaSys Software
- 22. Comparison – Views …
• 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
Mitesh Gandhi - MetaSys Software
- 23. Comparison – Views …
• Extensive view type support
• Very easy to create re-usable components
• Handlebars are used for templating
Mitesh Gandhi - MetaSys Software
- 25. Comparison – Testing …
• Fantastic test support.
• Designed from the beginning to be easy to
test.
• Karma developed by Angular JS team is
popular test runner
Mitesh Gandhi - MetaSys Software
- 26. Comparison – Testing …
• As of now, no default debugging tools
• Functions like Console.log(), ko.toJSON()
helps debugging process
• Can use following third party solutions
Mitesh Gandhi - MetaSys Software
- 27. Comparison – Testing …
• No default test solution;
• Test it your own
• Can use following third party solutions
Mitesh Gandhi - MetaSys Software
- 28. Comparison – Testing …
• Poor testing initially
• Pretty good testing support now
Mitesh Gandhi - MetaSys Software
- 30. Comparison – Data …
• No JQuery
• Can do with Angular’s $http but much better
using $resource
• Very good API
Mitesh Gandhi - MetaSys Software
- 31. Comparison – Data …
• Uses JQuery’s $.ajax
• Uses knockout mapping plugin
• Maps JavaScript object into a view model
with the appropriate observables
Mitesh Gandhi - MetaSys Software
- 32. Comparison – Data …
• Uses JQuery’s $.ajax to power Backbone.
• Default behavior is relatively easy to
override
• Nothing is free in Backbone. Backbone
gives you some useful events to listen for
and lets you handle it yourself. But you
must wire up all the data binding yourself.
Mitesh Gandhi - MetaSys Software
- 33. Comparison – Data …
• Uses JQuery’s $.ajax under the covers
• Just “getting data” is relatively easy to do e.g.
Mitesh Gandhi - MetaSys Software
• Doing things the “Ember way” is a bit more
complex
- 34. Comparison – Community
Mitesh Gandhi - MetaSys Software
Metric AngularJS Backbone.js Ember.js Knockout
Stars on
Github
40.2k 18.8k 14.1k 6.8k
Third-Party
Modules
1488
ngmodules
256
backplugs
1155
emberaddons
208
npmjs & GitHub
StackOverflow
Questions
104k 18.2k 15.7k 14.8K
YouTube
Results
~93k ~10.6k ~9.1k ~17.6 K
GitHub
Contributors
96 265 501 61
Chrome
Extension
Users
275k 15.6k 66k 29.7k
Open Issues 922 13 413 188
Closed Issues 5,520 2,062 3,350 1,145
- 39. • An open-source JavaScript Library
released in 2013.
• Maintained by Facebook, Instagram and
the open source community.
• Built as a component for Facebook to
quickly update dynamic content
• Around 30,000 stars on its Github page
• Specific version for iOS development
called React Native
esh Gandhi - MetaSys Software
- 40. React
• Most performant way to
manage your DOM
• Specifically when using
large sets of data
• Implements one-way
reactive data flow
• Considered to only be the
view
• Library
AngularJS
• Primary goal
SinglePageApplication
• Load New content without
leaving the page
• Two-way data binding
• MVW
• Framework
Mitesh Gandhi - MetaSys Software
- 41. • Following are just guidelines and one
should not treat them like line carved in
stone. They are meant to be bent as
required.
Mitesh Gandhi - MetaSys Software
- 42. Principle of Natural Fit
• Some libraries are natural fit for certain
tasks.
• For example, Backbone.js apparent
choice for RESTful JSON applications.
• Frameworks like Angular, Backbone are
good choice for building Single Page
Applications.
Mitesh Gandhi - MetaSys Software
- 43. Team Adaptability &
Learning Curve
• Especially in case of rapid prototyping, it
helps development teams to select
libraries with less learning curve and
easier adaption.
• Library like Knockout or Kendo UI is easier
to catch on for WPF or Silverlight
developers as their philosophy is based
on same MVVM pattern.
Mitesh Gandhi - MetaSys Software
Editor's Notes
- Polymer – Web component
Vue - Intuitive, Fast and Composable MVVM for building interactive interfaces.
- Architecture presentation patterns
UI has complicated logic to manipulate the user interface objects and second it also maintains state of the application
- Yehuda Katz – Member of jQuery and Ruby on Rail
Steve Sanderson – Microsoft Employee
Jeremy Ashkenas – Also developed Underscore.JS and CoffeeScript
- Backbone - Underscore.js(For RESTful persistence and DOM manipulation with Backbone.View)
include jQuery ( >= 1.11.0), and json2.jsfor older Internet Explorer support.
- You need this feature if you’re in a client-side app and virtually switching pages on the client-side. So, whenever you click a link or change an URL in the address bar, that URL change or window.location change is being intercepted on the client, and a new virtual template will be loaded with new data.
- Router is similar to Backbone
- Router is similar to Backbone
- Router is similar to Backbone
- Router is similar to Backbone
- On the other hand, nothing is free in Backbone. Backbone gives you some useful events to listen for and lets you
handle it yourself. But you must wire up all the data binding yourself.
--Very Easy to understand
- Community is one of the most important factors to consider when choosing a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials…you get the point. I have put together a table with the numbers, as of June 30, 2015.
- How easy to integrate another JS library?
- Ember – SPA
Ember Desktop - Apple Music,[8] a feature of the iTunes desktop application.