Full stack JavaScript - the folly of choice

Uploaded on

by Oleg Podsechin on Frontend DEV Conf'13 …

by Oleg Podsechin on Frontend DEV Conf'13

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Full stack JavaScriptthe folly of choice
  • 2. helsinkijs.orgcommunityjs.org
  • 3. starthq.com
  • 4. Toolkits vs. Frameworks
  • 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. Language
  • 7. Language●JavaScript●CoffeeScript●altjs.org●Traceur●es5-shim
  • 8. Server
  • 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. Database
  • 11. Database●SQL, perhaps with JSON blobs– also: JSON data type in Postgres●CouchDB●MongoDB
  • 12. API
  • 13. API●RESTful JSON– CRUD, with versioning●Bespoke JSON over HTTP– GWT●Bespoke JSON over WebSockets– Meteor, Derby
  • 14. CSS & images
  • 15. “The flower-like structure of the SVGlogo evokes creativity and growth,while the connected nodes indicateintegration with other technologies.”
  • 16. CSS & images●Normalize.css●Twitter Bootstrap– Responsive or not?●SVG●Font Awesome icons
  • 17. MV* library(or client side framework)
  • 18. MV* library●None (jQuery)●Backbone.js●AngularJS, Ember.js, Knockout
  • 19. Templating
  • 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. AngularJS
  • 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. Modules●CommonJS●RequireJS●Harmony●None●Some of the above
  • 24. Build System
  • 25. Build System●Yeoman●Grunt●None
  • 26. MinificationMinification
  • 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. Optimization & Caching
  • 29. Optimization●YSlow, Dev Tools, PageSpeed are yourfriends●Split up libs and application JS/CSS●Gzip, SPDY●Caching
  • 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. Conclusion
  • 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. Thank you!@olegpodsechingithub.com/olegpstarthq.com