JavaScript MV* Frameworks Comparison

JavaScript MV*
Frameworks
By Mitesh Gandhi - MetaSys Software

Outline
• MV* Patterns
• Big Four Frameworks
• Framework Comparison:
– Dependencies
– Data Binding
– Routers
– Views
– Testing
Mitesh Gandhi - MetaSys Software

Outline …
• Framework Comparison:
– Data
– Community
– Third Party Integration
– Development Tools
• React
• React vs AngularJS
• Guide Lines

Outline …
• Principle of Natural Fit
• Team Adaptability & Learning Curve

MV* Patterns

MVW (Modal-View-Whatever)

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

Comparison - Dependencies
Framework Dependencies
AngularJS No Dependencies
Knockout No Dependencies
Backbone - Underscore.js
- jQuery
Ember - Handlebars
- jQuery

Comparison – Data Binding
• Process that establishes a connection
between the application UI (User
Interface) and business logic

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

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

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

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

Comparison – ROUTERS
• Used for routing your applications URL's
when using hash tags(#)
• Maps an url to a javaScript function

Comparison – ROUTERS …
• Router is very simple
/person/12/101

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

• Routing is very simple
/person/12/101

• Router is extremely capable, but very
complex
• Supported embedded routes
/person/12/101

Comparison – Views
• How the stuffs are displayed in the screen

Comparison – Views …
• Uses HTML as templating language
• Automatically pulls in HTML templates via
AJAX when needed

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

• 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

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

Comparison – Testing
• Support for testing application

Comparison – Testing …
• Fantastic test support.
• Designed from the beginning to be easy to
test.
• Karma developed by Angular JS team is
popular test runner

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

• No default test solution;
• Test it your own
• Can use following third party solutions

• Poor testing initially
• Pretty good testing support now

Comparison – Data
• How do I get data from the sever?

Comparison – Data …
• No JQuery
• Can do with Angular’s $http but much better
using $resource
• Very good API

• Uses JQuery’s $.ajax
• Uses knockout mapping plugin
• Maps JavaScript object into a view model
with the appropriate observables

• 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.

• 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

Comparison – Community
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

Comparison – Community…
Google Trends
Interest Over Time – Web Search – Worldwide – Aug. 2011 to Oct. 2015

Comparison – Community /
Documentation

Comparison – Third Party
Integration

Comparison – Development
Tools

• 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

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

• Following are just guidelines and one
should not treat them like line carved in
stone. They are meant to be bent as
required.

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.

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.

Thank You!

JavaScript MV* Frameworks Comparison

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to JavaScript MV* Frameworks Comparison

Similar to JavaScript MV* Frameworks Comparison (20)

JavaScript MV* Frameworks Comparison

Editor's Notes