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