Choosing a JS Framework James Mason, 'bear454' SUSE Studio Developer
[email protected]
Hello, world.
Hello, world.
[email protected]
Hello, world. gplus.to/bear454 @bear454 facebook.com/bear454
[email protected]
Why?
Why ask why?
Why would you do this to yourself?
Why should you use a framework?
> 78k lines of JS & CS cloc http://cloc.sourceforge.net/ http://software.opensuse.org/package/cloc
> 78k lines!!!
#coolnewthing
The Choice Problem
TodoMVC http://todomvc.com/
TodoMVC If you can't find it here, you're gonna have to roll your own.
TodoMVC Vanilla JS
jQuery
TodoMVC Vanilla JS Backbone.js
jQuery Spine
TodoMVC Vanilla JS Backbone.js
jQuery Spine AngularJS
Ember.js Flight
TodoMVC jQuery
Vanilla JS
Spine
Backbone.js
AngularJS
Ember.js Flight
Maria
CanJS Closure
Dojo
TodoMVC jQuery
Vanilla JS
Spine
Backbone.js
AngularJS
Ember.js Flight
Maria
CanJS Closure
KnockoutJS
Agility.js
Dojo
TodoMVC jQuery
Vanilla JS
Spine
Backbone.js
AngularJS
Ember.js Flight
Maria
CanJS Closure
KnockoutJS
Dojo
Agility.js YUI
Knockback.js
Dart GWT
TodoMVC jQuery
Vanilla JS
Spine
Backbone.js
AngularJS
Ember.js Flight
Maria
CanJS Closure
KnockoutJS
Agility.js
Dojo Knockout+RequireJS YUI
Ember.js+RequireJS Knockback.js
Dart GWT
Backbone.js+RequireJS
TodoMVC Vanilla JS soma.js cujo.js Spine Dijon Backbone.js
jQuery Ember.js
Derby
Chaplin+Brunch TypeScript+Backbone.js AngularJS Flight Ext.js CanJS+RequireJS TroopJS Batman.js dermis Maria CanJS Meteor rAppid.js Montage MarionetteJS Thorax Closure Epitome Dojo PlastronJS PureMVC AngularJS (optimized) KnockoutJS Olives Knockout+RequireJS Agility.js TypeScript+AngularJS Ember.js+RequireJS Sammy.js DeftJS+ExtJS YUI Thorax+Lumbar Knockout+ClassBinding Enyo+Backbone.js Dart Kendo UI Knockback.js Funnyface.js SocketStream Serenade.js GWT Aria Templates Backbone.js+RequireJS Stapes DUEL AngularJS+RequireJS
TodoMVC Mojito
SAPUI5
CoffeeScript+AngularJS
Vanilla JS soma.js cujo.js Spine Dijon Backbone.js
jQuery
Ember.js
Derby
Chaplin+Brunch TypeScript+Backbone.js AngularJS Flight Ext.js CanJS+RequireJS TroopJS Batman.js dermis Maria CanJS Meteor rAppid.js Montage MarionetteJS Thorax Closure Epitome Dojo PlastronJS PureMVC AngularJS (optimized) KnockoutJS Olives Knockout+RequireJS Agility.js TypeScript+AngularJS Ember.js+RequireJS Sammy.js DeftJS+ExtJS YUI Thorax+Lumbar Knockout+ClassBinding Enyo+Backbone.js Dart Kendo UI Knockback.js Funnyface.js SocketStream Serenade.js GWT Aria Templates Backbone.js+RequireJS Stapes DUEL AngularJS+RequireJS
Throne of JS
Throne of JS backbone.js batman.js ember.js Meteor AngularJS Spine.js CanJS
Throne of JS http://throneofjs.com/ http://www.infoq.com/throne_of_js/
Start with what you know you want.
Start with what you know you want. License
FOSS-ness
Start with what you know you want. License
Docs
Examples FOSS-ness
Start with what you know you want. License
Docs Existing codebase
Style
Examples FOSS-ness
Start with what you know. Backbone.js
YUI
ember.js closure
Start with what you know. Backbone.js
YUI
Spine
Dojo
ember.js batman.js
closure AngularJS
Start. Take good notes. Make a spreadsheet even.
Start to find what you don't want.
Start to find what you don't want. “
Date: {{ '2012-04-01' | date:'fullDate' }}” - AngularJS.org
Start to find what you don't want. “ Date: {{ '2012-04-01' | date:'fullDate' }}” - AngularJS.org “Backbone.js lacks a clear direction of use. Every tutorial I read used a different structure, and it almost seemed too easy to disregard proven design patterns.” - http://destroytoday.com/blog/reasons-for-spinejs/
Start to find what you don't want. “ Date: {{ '2012-04-01' | date:'fullDate' }}” - AngularJS.org “Backbone.js lacks a clear direction of use. Every tutorial I read used a different structure, and it almost seemed too easy to disregard proven design patterns.” - http://destroytoday.com/blog/reasons-for-spinejs/ “...it compiles from JavaScript to better JavaScript.” - https://developers.google.com/closure/compiler/
Start to rule things out. Document “why”. #important
Dig in!
Be opinionated!
The subset. This is the really hard part.
Again... what do you want?
Again... what do you want? Community
Again... what do you want? Community Consistency
Again... what do you want? Community Documentation Consistency
Again... what do you want? Community Documentation Consistency Publicity
Again... what do you want? Community Documentation Consistency Publicity Maturity
Again... what do you want? Community Documentation Consistency Publicity Maturity
Tolerance
Again... what do you want? Community Documentation Consistency Publicity Maturity
Rails Tolerance
Your own TodoMVC. Satisfy your inner code monkey: build the same app 5-10x!
Score.
Score fairly. Be objective about pros & cons.
Score again. Make sure you're getting it right. Don't be afraid to add attributes or revise.
Score contacts. Reach out to maintainers. Consider how & when (or even if) they respond.
Score unfairly. Some things can't be objectively evaluated. Factor these into your final opinion.
Score unfairly. Some things can't be objectively evaluated. Factor these into your final opinion. Experience
Score unfairly. Some things can't be objectively evaluated. Factor these into your final opinion. Experience Papercuts
Score unfairly. Some things can't be objectively evaluated. Factor these into your final opinion. Long view
Experience Papercuts
Score!
Score! Congratulations, its an opinion.
Score! Congratulations, its an opinion. And someone will hate it.
Score a second opinion.
Score a second opinion. And a third, fifth, and tenth, if you can.
Dive deeper Build a prototype, or mock up a new feature. http://build-tab-demo-2.herokuapp.com/
“Whoops.”
“Whoops.” Try again. Be smarter this time.
“Whoops; it worked!”
“Whoops; it worked!” http://youtu.be/Gzj723LkRJY?t=25s
Thanks, and happy hunting! http://blog.susestudio.com/2013/03/clientside-js-mv-framework-roundup.html http://goo.gl/2tpBR
