Downloaded 48 times
Uploaded byFDConf
Full stack JavaScript - the folly of choice
This document compares different options for building full stack JavaScript applications, including toolkits vs frameworks, languages, servers, databases, APIs, CSS/images, MV* libraries, templating, modules, build systems, minification, optimization, caching and concludes with recommendations to validate assumptions, question beliefs, start simply and optimize for enjoyment.
More Related Content
Similar to Full stack JavaScript - the folly of choice
Full stack JavaScript - the folly of choice
- 1. Full stack JavaScript thefolly of choice
- 2.
- 4.
- 6.
- 9. 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
- 10.
- 12.
- 13.
- 15. Server ● None – Direct useof API or e.g. parse.com ● Node.js with Express ● Meteor ● Derby ● Vert.x ● RingoJS with Stick ● Common Node
- 17.
- 19. Database ● SQL, perhaps withJSON blobs – also: JSON data type in Postgres ● CouchDB ● MongoDB
- 20.
- 22. API ● RESTful JSON – CRUD,with versioning ● Bespoke JSON over HTTP – GWT ● Bespoke JSON over WebSockets – Meteor, Derby
- 23.
- 25. “The flower-like structureof the SVG logo evokes creativity and growth, while the connected nodes indicate integration with other technologies.”
- 26. CSS & images ● Normalize.css ● TwitterBootstrap – Responsive or not? ● SVG ● Font Awesome icons
- 27. MV* library (or clientside framework)
- 29. MV* library ● None (jQuery) ● Backbone.js ● AngularJS,Ember.js, Knockout
- 31.
- 33. 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>
- 34.
- 36. AngularJS ● What HTML wouldhave 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
- 39.
- 40.
- 42.
- 43.
- 45. Minification ● Uglify for JS –use .min.js when available – also Closure Compiler, YUI compressor ● clean-css for CSS ● html-minifier for HTML – danger zone
- 46.
- 48. Optimization ● YSlow, Dev Tools,PageSpeed are your friends ● Split up libs and application JS/CSS ● Gzip, SPDY ● Caching
- 49. 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
- 50.
- 52. 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
- 53.