SlideShare a Scribd company logo
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

More Related Content

What's hot

Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
micahr
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
jeresig
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
Vlad Filippov
 
Node PDX: Intro to Sails.js
Node PDX: Intro to Sails.jsNode PDX: Intro to Sails.js
Node PDX: Intro to Sails.js
Mike McNeil
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
Matthew Lancaster
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
Matt Raible
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
jeresig
 
Atomic Design with Next.js
Atomic Design with Next.jsAtomic Design with Next.js
Atomic Design with Next.js
Patrick Smith
 
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
Angular2 + AWS LambdaでサーバサイドレンダリングしてみたAngular2 + AWS Lambdaでサーバサイドレンダリングしてみた
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
暁 三宅
 
Javascript Frameworks
Javascript FrameworksJavascript Frameworks
Javascript Frameworks
Mitesh Gandhi
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
Rich Snapp
 
Javascript Frameworks Comparison
Javascript Frameworks ComparisonJavascript Frameworks Comparison
Javascript Frameworks Comparison
Deepu S Nath
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
reebalazs
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
Matt Raible
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
Jimmy Huang
 
The Onion
The OnionThe Onion
The Onion
Jörn Zaefferer
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Matt Raible
 
Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.jsAvoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
Alex Speller
 
Frontend architecture design for large(r) team final
Frontend architecture design for large(r) team   finalFrontend architecture design for large(r) team   final
Frontend architecture design for large(r) team final
Chadchapol Vittavutkarnvej
 

What's hot (20)

Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
 
Node PDX: Intro to Sails.js
Node PDX: Intro to Sails.jsNode PDX: Intro to Sails.js
Node PDX: Intro to Sails.js
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
 
Atomic Design with Next.js
Atomic Design with Next.jsAtomic Design with Next.js
Atomic Design with Next.js
 
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
Angular2 + AWS LambdaでサーバサイドレンダリングしてみたAngular2 + AWS Lambdaでサーバサイドレンダリングしてみた
Angular2 + AWS Lambdaでサーバサイドレンダリングしてみた
 
Javascript Frameworks
Javascript FrameworksJavascript Frameworks
Javascript Frameworks
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
 
Javascript Frameworks Comparison
Javascript Frameworks ComparisonJavascript Frameworks Comparison
Javascript Frameworks Comparison
 
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devicesSlickGrid Touch: Making complex JavaScript widgets work on mobile devices
SlickGrid Touch: Making complex JavaScript widgets work on mobile devices
 
Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
 
The Onion
The OnionThe Onion
The Onion
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
 
Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.jsAvoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
 
Frontend architecture design for large(r) team final
Frontend architecture design for large(r) team   finalFrontend architecture design for large(r) team   final
Frontend architecture design for large(r) team final
 

Viewers also liked

Modern JavaScript Talk
Modern JavaScript TalkModern JavaScript Talk
Modern JavaScript Talk
Derek Binkley
 
Plack at OSCON 2010
Plack at OSCON 2010Plack at OSCON 2010
Plack at OSCON 2010
Tatsuhiko Miyagawa
 
Why SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptWhy SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScript
martinlippert
 
Introduction to Underscore.js
Introduction to Underscore.jsIntroduction to Underscore.js
Introduction to Underscore.js
David Jacobs
 
MVC Revivial on the Web
MVC Revivial on the WebMVC Revivial on the Web
MVC Revivial on the Web
ESUG
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
AmarInfotech
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone framework
frontendne
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
José Barbosa
 
Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014
Matt Raible
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
floydophone
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible
 

Viewers also liked (11)

Modern JavaScript Talk
Modern JavaScript TalkModern JavaScript Talk
Modern JavaScript Talk
 
Plack at OSCON 2010
Plack at OSCON 2010Plack at OSCON 2010
Plack at OSCON 2010
 
Why SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptWhy SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScript
 
Introduction to Underscore.js
Introduction to Underscore.jsIntroduction to Underscore.js
Introduction to Underscore.js
 
MVC Revivial on the Web
MVC Revivial on the WebMVC Revivial on the Web
MVC Revivial on the Web
 
Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017Latest Javascript MVC & Front End Frameworks 2017
Latest Javascript MVC & Front End Frameworks 2017
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone framework
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014Comparing JVM Web Frameworks - February 2014
Comparing JVM Web Frameworks - February 2014
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 

Similar to JavaScript MV* Framework - Making the Right Choice

Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.jsCome Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Eric Nograles
 
Drupal Backbone.js in the Frontend
Drupal Backbone.js in the FrontendDrupal Backbone.js in the Frontend
Drupal Backbone.js in the Frontend
David Corbacho Román
 
Angularjs cascade
Angularjs cascadeAngularjs cascade
Angularjs cascade
hannonhill
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
Alexandre Morgaut
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter Bootstrap
Kevingo Tsai
 
Brad Enterprise Solution Architect
Brad Enterprise Solution ArchitectBrad Enterprise Solution Architect
Brad Enterprise Solution Architect
Brad Travis
 
FrontEnd-Roadmap.pdf
FrontEnd-Roadmap.pdfFrontEnd-Roadmap.pdf
FrontEnd-Roadmap.pdf
Mohankumar975815
 
Modern UI Development With Node.js
Modern UI Development With Node.jsModern UI Development With Node.js
Modern UI Development With Node.js
Ryan Anklam
 
Node.js for .NET Developers
Node.js for .NET DevelopersNode.js for .NET Developers
Node.js for .NET Developers
David Neal
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
Elad Hirsch
 
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ... Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Mikko Ohtamaa
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Jeremy Likness
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
Einar Ingebrigtsen
 
JavaScript Architectures
JavaScript ArchitecturesJavaScript Architectures
JavaScript Architectures
Jason Yeo Jie Shun
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022
Matt Raible
 
Technology Trends
Technology TrendsTechnology Trends
Technology Trends
Henry Jacob
 
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Matt Raible
 

Similar to JavaScript MV* Framework - Making the Right Choice (20)

Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.jsCome Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
Come Sail Away With Me (you guys): Node.js MVC Web API's Using Sails.js
 
Drupal Backbone.js in the Frontend
Drupal Backbone.js in the FrontendDrupal Backbone.js in the Frontend
Drupal Backbone.js in the Frontend
 
Angularjs cascade
Angularjs cascadeAngularjs cascade
Angularjs cascade
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter Bootstrap
 
Brad Enterprise Solution Architect
Brad Enterprise Solution ArchitectBrad Enterprise Solution Architect
Brad Enterprise Solution Architect
 
FrontEnd-Roadmap.pdf
FrontEnd-Roadmap.pdfFrontEnd-Roadmap.pdf
FrontEnd-Roadmap.pdf
 
Modern UI Development With Node.js
Modern UI Development With Node.jsModern UI Development With Node.js
Modern UI Development With Node.js
 
Node.js for .NET Developers
Node.js for .NET DevelopersNode.js for .NET Developers
Node.js for .NET Developers
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ... Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
Beautiful Maintainable ModularJavascript Codebase with RequireJS - HelsinkiJ...
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
 
JavaScript Architectures
JavaScript ArchitecturesJavaScript Architectures
JavaScript Architectures
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022Micro Frontends for Java Microservices - Cork JUG 2022
Micro Frontends for Java Microservices - Cork JUG 2022
 
Technology Trends
Technology TrendsTechnology Trends
Technology Trends
 
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
Full Stack Reactive with React and Spring WebFlux - Dublin JUG 2019
 

More from Dmitry Sheiko

The Flavor of TypeScript
The Flavor of TypeScriptThe Flavor of TypeScript
The Flavor of TypeScript
Dmitry Sheiko
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
Dmitry Sheiko
 
Tooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding styleTooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding style
Dmitry Sheiko
 
Modular JavaScript with CommonJS Compiler
Modular JavaScript with CommonJS CompilerModular JavaScript with CommonJS Compiler
Modular JavaScript with CommonJS Compiler
Dmitry Sheiko
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
Dmitry Sheiko
 
A Quick Start - Version Control with Git
A Quick Start - Version Control with GitA Quick Start - Version Control with Git
A Quick Start - Version Control with Git
Dmitry Sheiko
 
Bringing classical OOP into JavaScript
Bringing classical OOP into JavaScriptBringing classical OOP into JavaScript
Bringing classical OOP into JavaScript
Dmitry Sheiko
 

More from Dmitry Sheiko (7)

The Flavor of TypeScript
The Flavor of TypeScriptThe Flavor of TypeScript
The Flavor of TypeScript
 
Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSSWriting Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
 
Tooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding styleTooling JavaScript to ensure consistency in coding style
Tooling JavaScript to ensure consistency in coding style
 
Modular JavaScript with CommonJS Compiler
Modular JavaScript with CommonJS CompilerModular JavaScript with CommonJS Compiler
Modular JavaScript with CommonJS Compiler
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
A Quick Start - Version Control with Git
A Quick Start - Version Control with GitA Quick Start - Version Control with Git
A Quick Start - Version Control with Git
 
Bringing classical OOP into JavaScript
Bringing classical OOP into JavaScriptBringing classical OOP into JavaScript
Bringing classical OOP into JavaScript
 

Recently uploaded

存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 

Recently uploaded (16)

存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 

JavaScript MV* Framework - Making the Right Choice

  • 1. JavaScript MV* Framework - Making the Right Choice by @sheiko
  • 2. Who’s the dude? I’m Dmitry Sheiko, a web-developer, blogger, open source contributor. http://dsheiko.com @sheiko https://github.com/dsheiko
  • 3. What do I need a framework for? • Abstractions (separation of concerns) • Implicit conventions • Code reusability • Data Binding • Widgets Library
  • 4. 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
  • 6. How they implement MV* bit.ly/1p24xgq Collection Model Template Router Controller Scope View AngularJS Backbone Ember.js
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. Wonna really be in control of your own code?
  • 11. You have to know then exactly what the framework does
  • 13. Backbone is our hero! http://backbonejs.org/docs/backbone.html
  • 14. What about dependencies? Do we need them? Backbone jQuery Underscore
  • 16. Exoskeleton is an optimized Backbone Faster Lightweight Dependencies optional http://exosjs.com Custom builds Backbone drop-in replacement
  • 17. What about legacy browsers? 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 credits to www.flaticon.com for these amazing free vector icons and surely to Paul Miller and Adam Krebs for Exoskeleton