Javascript Frameworks

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 EmberDeveloped / 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.comMitesh Gandhi - MetaSys Software

Comparison - Dependencies

Framework DependenciesAngularJS 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 KnockoutStars on Github

40.2k 18.8k 14.1k 6.8k

Third-Party Modules

1488 ngmodules

256 backplugs

1155 emberaddons

208npmjs & 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 TrendsInterest 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 NativeMitesh 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!


Documents

Javascript Frameworks