×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
JavaScript MV* Framework - Making the Right Choice by @sheiko
Slide 2
Slide 2 text
Who’s the dude? I’m Dmitry Sheiko, a web-developer, blogger, open source contributor. http://dsheiko.com @sheiko https://github.com/dsheiko
Slide 3
Slide 3 text
What do I need a framework for? • Abstractions (separation of concerns) • Implicit conventions • Code reusability • Data Binding • Widgets Library
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Big Three AngularJS Backbone Ember.js
Slide 6
Slide 6 text
How they implement MV* bit.ly/1p24xgq Collection Model Template Router Controller Scope View AngularJS Backbone Ember.js
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Wonna really be in control of your own code?
Slide 11
Slide 11 text
You have to know then exactly what the framework does
Slide 12
Slide 12 text
Ember.js? AngularJS? Unlikely…
Slide 13
Slide 13 text
Backbone is our hero! http://backbonejs.org/docs/backbone.html
Slide 14
Slide 14 text
What about dependencies? Do we need them? Backbone jQuery Underscore
Slide 15
Slide 15 text
Not really! jQuery Underscore Backbone4 Exoskeleton
Slide 16
Slide 16 text
Exoskeleton is an optimized Backbone Faster Lightweight Dependencies optional http://exosjs.com Custom builds Backbone drop-in replacement
Slide 17
Slide 17 text
What about legacy browsers? https://github.com/es-shims/es5-shim
Slide 18
Slide 18 text
An example? TODO MVC http://bit.ly/T0oREh Exoskeleton + CommonJS Compiler http://bit.ly/1lr1R7Z
Slide 19
Slide 19 text
Thank you! My credits to www.flaticon.com for these amazing free vector icons and surely to Paul Miller and Adam Krebs for Exoskeleton