KEMBAR78
JavaScript MV* Framework - Making the Right Choice | PDF
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 UIPureMVC
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
Backbone4
Exoskeleton
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

JavaScript MV* Framework - Making the Right Choice

  • 1.
    JavaScript MV* Framework- Making the Right Choice by @sheiko
  • 2.
    Who’s the dude? I’mDmitry Sheiko, a web-developer, blogger, open source contributor. http://dsheiko.com @sheiko https://github.com/dsheiko
  • 3.
    What do Ineed a framework for? • Abstractions (separation of concerns) • Implicit conventions • Code reusability • Data Binding • Widgets Library
  • 4.
    What framework doI 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 UIPureMVC Olives PlastronJS Dijon rAppid.js DeftJS + ExtJS SAPUI5 Exoskeleton Atma.js Ractive.js ComponentJS Vue.js
  • 5.
  • 6.
    How they implementMV* bit.ly/1p24xgq Collection Model Template Router Controller Scope View AngularJS Backbone Ember.js
  • 7.
    How active developerscommunity 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
  • 8.
    How good FAQsupport 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
  • 9.
    The hidden partof 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
  • 10.
    Wonna really bein control of your own code?
  • 11.
    You have toknow then exactly what the framework does
  • 12.
  • 13.
    Backbone is ourhero! http://backbonejs.org/docs/backbone.html
  • 14.
    What about dependencies? Dowe need them? Backbone jQuery Underscore
  • 15.
  • 16.
    Exoskeleton is anoptimized Backbone Faster Lightweight Dependencies optional http://exosjs.com Custom builds Backbone drop-in replacement
  • 17.
    What about legacybrowsers? https://github.com/es-shims/es5-shim
  • 18.
    An example? TODO MVC http://bit.ly/T0oREh Exoskeleton+ CommonJS Compiler http://bit.ly/1lr1R7Z
  • 19.
    Thank you! My creditsto www.flaticon.com for these amazing free vector icons and surely to Paul Miller and Adam Krebs for Exoskeleton