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

1. Full stack JavaScript
the folly of choice

2. helsinkijs.org
communityjs.org

4. starthq.com

6. Toolkits vs. Frameworks

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. Language

12. Language
●
JavaScript
●
CoffeeScript
●
altjs.org
●
Traceur
●
es5-shim

13. Server

15. Server
●
None
– Direct use of API or e.g. parse.com
●
Node.js with Express
●
Meteor
●
Derby
●
Vert.x
●
RingoJS with Stick
●
Common Node

17. Database

19. Database
●
SQL, perhaps with JSON blobs
– also: JSON data type in Postgres
●
CouchDB
●
MongoDB

20. API

22. API
●
RESTful JSON
– CRUD, with versioning
●
Bespoke JSON over HTTP
– GWT
●
Bespoke JSON over WebSockets
– Meteor, Derby

23. CSS & images

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

26. CSS & images
●
Normalize.css
●
Twitter Bootstrap
– Responsive or not?
●
SVG
●
Font Awesome icons

27. MV* library
(or client side framework)

29. MV* library
●
None (jQuery)
●
Backbone.js
●
AngularJS, Ember.js, Knockout

31. Templating

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. AngularJS

36. 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

39. Modules
●
CommonJS
●
RequireJS
●
Harmony
●
None
●
Some of the above

40. Build System

42. Build System
●
Yeoman
●
Grunt
●
None

43. MinificationMinification

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. Optimization & Caching

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. Conclusion

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. Thank you!
@olegpodsechin
github.com/olegp
starthq.com