This document provides an overview and comparison of popular JavaScript MV* frameworks, including AngularJS, Knockout, Backbone, and Ember. It outlines the frameworks, compares their dependencies, data binding, routing, views, testing support, how to get data from servers, their communities and documentation, and third-party integration. Guidelines are provided that frameworks should fit tasks naturally and have low learning curves for development teams.
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
15. Comparison – ROUTERS …
• Router is very simple
Mitesh Gandhi - MetaSys Software
/person/12/101
16. Comparison – ROUTERS …
• Knockout does not support routing by
default
• Still Routing is easily configurable by
following third party libraries
Mitesh Gandhi - MetaSys Software
17. Comparison – ROUTERS …
• Routing is very simple
Mitesh Gandhi - MetaSys Software
/person/12/101
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
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
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.