full stack javascript - the folly of choice
DESCRIPTION
by Oleg Podsechin on Frontend DEV Conf'13 http://bit.ly/Oleg_PodsechinTRANSCRIPT
Full stack JavaScriptthe folly of choice
helsinkijs.org
communityjs.org
starthq.com
Toolkits vs. Frameworks
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
Language
Language
● JavaScript● CoffeeScript● altjs.org
● Traceur● es5-shim
Server
Server
● None– Direct use of API or e.g. parse.com
● Node.js with Express● Meteor● Derby● Vert.x● RingoJS with Stick● Common Node
Database
Database
● SQL, perhaps with JSON blobs– also: JSON data type in Postgres
● CouchDB● MongoDB
API
API
● RESTful JSON– CRUD, with versioning
● Bespoke JSON over HTTP– GWT
● Bespoke JSON over WebSockets– Meteor, Derby
CSS & images
“The flower-like structure of the SVG logo evokes creativity and growth, while the connected nodes indicate integration with other technologies.”
CSS & images
● Normalize.css● Twitter Bootstrap
– Responsive or not?● SVG● Font Awesome icons
MV* library(or client side framework)
MV* library
● None (jQuery)● Backbone.js● AngularJS, Ember.js, Knockout
Templating
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>
AngularJS
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
Modules
● CommonJS● RequireJS● Harmony● None● Some of the above
Build System
Build System
● Yeoman● Grunt● None
MinificationMinification
Minification
● Uglify for JS– use .min.js when available– also Closure Compiler, YUI compressor
● clean-css for CSS● html-minifier for HTML
– danger zone
Optimization & Caching
Optimization
● YSlow, Dev Tools, PageSpeed are your friends
● Split up libs and application JS/CSS● Gzip, SPDY● Caching
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
Conclusion
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
Thank you!
@olegpodsechin
github.com/olegp
starthq.com