JavaScript MV* Framework -
Making the Right Choice
by @sheiko
Who’s the dude?
I’m Dmitry Sheiko, a web-developer, blogger,
open source contributor.
http://dsheiko.com
@sheiko
https://github.com/dsheiko
What do I need a framework for?
• Abstractions (separation of concerns)
• Implicit conventions
• Code reusability
• Data Binding
• Widgets Library
What framework do I need?
MVC
Backbone
MVP
MVVM
AngularJS
Ember.js
Dojo
YUI
Agility.js
KnockoutJS
CanJS
Maria
Polymer
React
cujoJS Montage
Sammy.js
Stapes
Epitome
DUEL
Kendo UI PureMVC
Olives
PlastronJS
Dijon
rAppid.js
DeftJS + ExtJS
SAPUI5
Exoskeleton
Atma.js
Ractive.js
ComponentJS
Vue.js
Big Three
AngularJS
Backbone
Ember.js
How they implement MV*
bit.ly/1p24xgq
Collection
Model
Template
Router
Controller
Scope View
AngularJS
Backbone
Ember.js
How active developers community
Backbone Stars: 18 264
Forks: 4 066
Open issues: 26
Closed issues: 3 151
Ember.js Stars: 10 442
Forks: 2 249
Open issues: 220
Closed issues: 4 788
AngularJS Stars: 24 958
Forks: 8 635
Open issues: 1 117
Closed issues: 6 704
via Github
13.06.2014
How good FAQ support
Backbone Questions: 15 191
Answered: 9 193
60%
Avg answers per question: 2.24
Ember.js Questions: 18 243
Answered: 11 120
61%
Avg answers per question: 2.40
AngularJS Questions: 40 312
Answered: 22 382
55%
Avg answers per question: 2.30
via StackExchange
13.06.2014
The hidden part of the iceberg
AngularJS Logical LOC: 6 748
Mean parameter count: 1.5
Cyclomatic complexity: 1 548
Cyclomatic complexity
density: 23%
Maintainability index: 113
Production build: 108K
Ember.js* Logical LOC: 43 390
Mean parameter count: 1.2
Cyclomatic complexity: 2 543
Cyclomatic complexity
density: 17%
Maintainability index: 113
Production build: 276K
Backbone* Logical LOC: 965
Mean parameter count: 1.3
Cyclomatic complexity: 275
Cyclomatic complexity
density: 28%
Maintainability index: 108
Production build: 20K
* without dependencies
Wonna really be in control of
your own code?
You have to know then exactly
what the framework does
Ember.js? AngularJS?
Unlikely…
Backbone is our hero!
http://backbonejs.org/docs/backbone.html
What about dependencies?
Do we need them?
Backbone
jQuery Underscore
Not really!
jQuery Underscore
Backbone4Exoskeleton
Exoskeleton is an optimized Backbone
Faster
Lightweight
Dependencies
optional
http://exosjs.com
Custom builds
Backbone drop-in
replacement
What about legacy browsers?
https://github.com/es-shims/es5-shim
An example?
TODO MVC
http://bit.ly/T0oREh
Exoskeleton + CommonJS Compiler
http://bit.ly/1lr1R7Z
Thank you!
My credits to www.flaticon.com for
these amazing free vector icons and
surely to Paul Miller and Adam Krebs
for Exoskeleton