Full stack JavaScriptthe folly of choice

helsinkijs.org

communityjs.org

starthq.com

Toolkits vs. Frameworks

Toolkits vs. Frameworks

● Toolkit: collection of libraries– some assembly required

● Libraries should “do one thing and do it well”● Inversion of control

– You call a library, but a framework calls you

Language

Language

● JavaScript● CoffeeScript● altjs.org

● Traceur● es5-shim

Server

Server

● None– Direct use of API or e.g. parse.com

● Node.js with Express● Meteor● Derby● Vert.x● RingoJS with Stick● Common Node

Database

Database

● SQL, perhaps with JSON blobs– also: JSON data type in Postgres

● CouchDB● MongoDB

API

API

● RESTful JSON– CRUD, with versioning

● Bespoke JSON over HTTP– GWT

● Bespoke JSON over WebSockets– Meteor, Derby

CSS & images

“The flower-like structure of the SVG logo evokes creativity and growth, while the connected nodes indicate integration with other technologies.”

CSS & images

● Normalize.css● Twitter Bootstrap

– Responsive or not?● SVG● Font Awesome icons

MV* library(or client side framework)

MV* library

● None (jQuery)● Backbone.js● AngularJS, Ember.js, Knockout

Templating

Templating

● None (use JavaScript)

DIV({class:'main'}, H1('Title'), P('Text')) ● Underscore● Mustache, Handlebars - logicless

{{#items}} <li>{{name}}</li> {{/items}}● leonidas/transparency● AngularJS

<li ng-repeat=”item in items”>{{item.name}}</li>

AngularJS

AngularJS

● What HTML would have been, had it been designed for building web apps

● 80% of code deals with manipulating the DOM– AngularJS makes this go away

● Two way data binding● Definitely a standalone framework

– modules, templating, dependency injection, events, services, promises, testing, directives, http, interceptors, history

Modules

● CommonJS● RequireJS● Harmony● None● Some of the above

Build System

Build System

● Yeoman● Grunt● None

MinificationMinification

Minification

● Uglify for JS– use .min.js when available– also Closure Compiler, YUI compressor

● clean-css for CSS● html-minifier for HTML

– danger zone

Optimization & Caching

Optimization

● YSlow, Dev Tools, PageSpeed are your friends

● Split up libs and application JS/CSS● Gzip, SPDY● Caching

Caching

● Explicit “Cache-Control: no-cache” for API● Cache everything else

– Far off Expires header– Use Etags, include in URI

● Application Cache?● Use s Content Distribution Network

Conclusion

Conclusion

● Validate assumptions first– Fail fast

● Question your beliefs– Black box abstractions are OK

● Start with a clean slate, add when needed– Reinvent the wheel if it's small

● Optimize for development enjoyment– It's a never ending journey

Thank you!

@olegpodsechin

github.com/olegp

starthq.com