Full stack JavaScript - the folly of choice


Published on

by Oleg Podsechin on Frontend DEV Conf'13

Published in: Technology

Full stack JavaScript - the folly of choice

  1. 1. Full stack JavaScriptthe folly of choice
  2. 2. helsinkijs.orgcommunityjs.org
  3. 3. starthq.com
  4. 4. Toolkits vs. Frameworks
  5. 5. 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
  6. 6. Language
  7. 7. Language●JavaScript●CoffeeScript●altjs.org●Traceur●es5-shim
  8. 8. Server
  9. 9. Server●None– Direct use of API or e.g. parse.com●Node.js with Express●Meteor●Derby●Vert.x●RingoJS with Stick●Common Node
  10. 10. Database
  11. 11. Database●SQL, perhaps with JSON blobs– also: JSON data type in Postgres●CouchDB●MongoDB
  12. 12. API
  13. 13. API●RESTful JSON– CRUD, with versioning●Bespoke JSON over HTTP– GWT●Bespoke JSON over WebSockets– Meteor, Derby
  14. 14. CSS & images
  15. 15. “The flower-like structure of the SVGlogo evokes creativity and growth,while the connected nodes indicateintegration with other technologies.”
  16. 16. CSS & images●Normalize.css●Twitter Bootstrap– Responsive or not?●SVG●Font Awesome icons
  17. 17. MV* library(or client side framework)
  18. 18. MV* library●None (jQuery)●Backbone.js●AngularJS, Ember.js, Knockout
  19. 19. Templating
  20. 20. 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>
  21. 21. AngularJS
  22. 22. AngularJS●What HTML would have been, had it beendesigned 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
  23. 23. Modules●CommonJS●RequireJS●Harmony●None●Some of the above
  24. 24. Build System
  25. 25. Build System●Yeoman●Grunt●None
  26. 26. MinificationMinification
  27. 27. Minification●Uglify for JS– use .min.js when available– also Closure Compiler, YUI compressor●clean-css for CSS●html-minifier for HTML– danger zone
  28. 28. Optimization & Caching
  29. 29. Optimization●YSlow, Dev Tools, PageSpeed are yourfriends●Split up libs and application JS/CSS●Gzip, SPDY●Caching
  30. 30. 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
  31. 31. Conclusion
  32. 32. 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 its small●Optimize for development enjoyment– Its a never ending journey
  33. 33. Thank you!@olegpodsechingithub.com/olegpstarthq.com