Full stack JavaScript - the folly of choice

  • 2,891 views
Uploaded on

by Oleg Podsechin on Frontend DEV Conf'13 …

by Oleg Podsechin on Frontend DEV Conf'13
http://bit.ly/Oleg_Podsechin

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

Views

Total Views
2,891
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
29
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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