Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Testable client side_mvc_apps_in_javascript

2,583 views

Published on

Overview of some technologies I've been looking at in the past few weeks

Published in: Technology, Design
  • Be the first to comment

Testable client side_mvc_apps_in_javascript

  1. 1. Testable, client-side MVC apps in Javascript Demo using Spine, Jasmine, & node.JS
  2. 2. Motivation <ul><ul><li>Browser environment is becoming increasingly powerful </li></ul></ul><ul><ul><ul><li>'Serverside for everything' exists because there was no other choice </li></ul></ul></ul><ul><ul><ul><li>Flash platform no longer required/ideal for rich interaction  </li></ul></ul></ul><ul><ul><li>Server infrastructure is expensive </li></ul></ul><ul><ul><ul><li>Push as much work onto the client as possible </li></ul></ul></ul><ul><ul><ul><li>Less importance on what server-side tech you select </li></ul></ul></ul><ul><ul><ul><li>Unnecessary to talk to server for every action </li></ul></ul></ul><ul><ul><li>More responsive interaction </li></ul></ul><ul><ul><ul><li>Smoother UX -> better customers* </li></ul></ul></ul><ul><ul><li>Web applications not web sites </li></ul></ul><ul><ul><ul><li>Web browser is (mostly) cross-platform </li></ul></ul></ul><ul><li>* http://www.codinghorror.com/blog/2006/11/speed-still-matters.html </li></ul>
  3. 3. Thin-Server Architecture <ul><li>Server Responsibilities </li></ul><ul><ul><li>Persistence </li></ul></ul><ul><ul><ul><li>Storage & retrieval of unformatted data </li></ul></ul></ul><ul><ul><ul><li>Sessions </li></ul></ul></ul><ul><ul><li>Validation </li></ul></ul><ul><ul><ul><li>Sanity </li></ul></ul></ul><ul><ul><ul><li>Security </li></ul></ul></ul><ul><ul><li>Resource serving </li></ul></ul><ul><ul><ul><li>Modules </li></ul></ul></ul><ul><ul><ul><li>Images </li></ul></ul></ul><ul><ul><ul><li>DRY HTML </li></ul></ul></ul><ul><ul><ul><li>CSS </li></ul></ul></ul><ul><ul><li>Handling/reporting state </li></ul></ul><ul><ul><li>SEO/Accessibility </li></ul></ul><ul><li>Client Responsibilities </li></ul><ul><ul><li>Behaviour </li></ul></ul><ul><ul><ul><li>Navigation </li></ul></ul></ul><ul><ul><ul><li>User Prompt </li></ul></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><ul><li>Visual Hierarchy </li></ul></ul></ul><ul><ul><ul><li>Theme </li></ul></ul></ul><ul><ul><li>Data Presentation </li></ul></ul><ul><ul><ul><li>Data (e.g. JSON)  ->  HTML via templates </li></ul></ul></ul><ul><ul><li>Pseudo Persistence </li></ul></ul><ul><ul><ul><li>Caching </li></ul></ul></ul><ul><ul><ul><li>Processing (eg filtering) </li></ul></ul></ul><ul><ul><li>Validation </li></ul></ul><ul><ul><li>The eye candy is the application is the eye candy </li></ul></ul>
  4. 4. Accessibility? <ul><ul><li>Premature optimisation. </li></ul></ul><ul><ul><li>Make something cool first. </li></ul></ul><ul><ul><li>Simple to achieve later, IF you need it </li></ul></ul>
  5. 5. Graceful Degredation? <ul><ul><li>Premature optimisation.  </li></ul></ul><ul><ul><li>Make something cool first.  </li></ul></ul>
  6. 6. Give your code a fighting chance <ul><li>Polyfills </li></ul><ul><ul><ul><li>  &quot;A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will.&quot; </li></ul></ul></ul><ul><ul><ul><li>https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills </li></ul></ul></ul><ul><li>HTML5 + Shim/Shiv </li></ul><ul><ul><ul><li>http://html5boilerplate.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.modernizr.com/ </li></ul></ul></ul><ul><li>CSS Reset </li></ul><ul><ul><ul><li>http://www.cssreset.com/ </li></ul></ul></ul><ul><ul><ul><li>http://html5boilerplate.com/ </li></ul></ul></ul><ul><ul><ul><li>http://necolas.github.com/normalize.css/ </li></ul></ul></ul><ul><li>  </li></ul>
  7. 7. Add some structure <ul><li>MVC </li></ul><ul><ul><ul><li>Backbone  http://documentcloud.github.com/backbone/ </li></ul></ul></ul><ul><ul><ul><li>Spine  http://maccman.github.com/spine/ </li></ul></ul></ul><ul><li>Tests </li></ul><ul><ul><ul><li>jasmine  http://pivotal.github.com/jasmine/ </li></ul></ul></ul><ul><ul><ul><ul><li>jasmine-node  https://github.com/mhevery/jasmine-node </li></ul></ul></ul></ul><ul><ul><ul><li>expresso  http://visionmedia.github.com/expresso/ </li></ul></ul></ul><ul><ul><ul><li>vows  http://vowsjs.org/ </li></ul></ul></ul>
  8. 8. Visuals should be easy and fun <ul><li>A language that compiles to CSS </li></ul><ul><ul><ul><li>stylus  http://learnboost.github.com/stylus/   https://github.com/lucasmazza/stylus_rails </li></ul></ul></ul><ul><ul><ul><li>sass  http://sass-lang.com/ </li></ul></ul></ul><ul><li>A language that compiles </li></ul><ul><li>  to HTML </li></ul><ul><ul><ul><li>jade  http://jade-lang.com/ </li></ul></ul></ul><ul><ul><ul><li>haml  http://haml-lang.com/ </li></ul></ul></ul><ul><li>Language that cross-browserizes your css & adds cool stuff </li></ul><ul><ul><ul><li>nib  https://github.com/visionmedia/nib </li></ul></ul></ul><ul><ul><ul><li>Compass  http://compass-style.org/ </li></ul></ul></ul><ul><li>Templating system for lists </li></ul><ul><ul><ul><li>  http://jsperf.com/dom-vs-innerhtml-based-templating/160 </li></ul></ul></ul>
  9. 9. Optimise your resources <ul><li>Image Reduction </li></ul><ul><ul><ul><li>http://pornel.net/imagealpha </li></ul></ul></ul><ul><ul><ul><li>http://imageoptim.pornel.net/ </li></ul></ul></ul><ul><ul><ul><li>Smush.it via YSlow </li></ul></ul></ul><ul><ul><ul><ul><li>http://developer.yahoo.com/yslow/smushit/ </li></ul></ul></ul></ul><ul><li>JS Reduction </li></ul><ul><ul><ul><li>Google Closure Compiler http://code.google.com/closure/compiler/ </li></ul></ul></ul><ul><ul><ul><li>UglifyJS  https://github.com/mishoo/UglifyJS </li></ul></ul></ul><ul><ul><ul><ul><li>http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js </li></ul></ul></ul></ul><ul><li>    CSS Reduction </li></ul><ul><ul><ul><li>YUICompressor  http://tools.w3clubs.com/cssmin/ </li></ul></ul></ul>
  10. 10. Familiar? <ul><ul><li>Out of date tests, or none at all </li></ul></ul><ul><ul><li>Out of date documentation, or none at all </li></ul></ul><ul><ul><li>&quot;Refactoring? Just write it well the first time&quot; </li></ul></ul><ul><ul><li>Knee-jerk Methodology </li></ul></ul><ul><ul><li>Minimal technology options, from 5+ years ago </li></ul></ul>
  11. 11. Self Improvement <ul><li>http://stackoverflow.com/questions/1711/what-is-the-single-most-influential-book-every-programmer-should-read </li></ul>
  12. 12. CommonJS <ul><ul><li>Community Driven </li></ul></ul><ul><ul><li>The W3C of Javascript </li></ul></ul><ul><ul><li>Define specs for </li></ul></ul><ul><ul><ul><li>console </li></ul></ul></ul><ul><ul><ul><li>modules </li></ul></ul></ul><ul><ul><ul><li>assert </li></ul></ul></ul><ul><ul><ul><li>packages </li></ul></ul></ul><ul><ul><li>Module spec  </li></ul></ul>
  13. 13. Loading Modules <ul><ul><li>Load modules with the CommonJS require() function </li></ul></ul><ul><ul><li>RequireJS = async require() </li></ul></ul><ul><ul><li>Compare with HeadJS </li></ul></ul><ul><ul><li>Transparent, client-side require: Stitch/Browserify, – dependency on nodeJS though </li></ul></ul><ul><ul><li>In-browser support not ideal, but manageable - workarounds available </li></ul></ul><ul><li>//commonjs synchronous require </li></ul><ul><li>var module = require( 'moduleName' ) </li></ul><ul><li>//requirejs asynchronous require </li></ul><ul><li>var module; </li></ul><ul><li>require( 'moduleName' , function (loadedModule) { </li></ul><ul><li>     module = loadedModule; </li></ul><ul><li>}) </li></ul><ul><li>// headjs has no concept of commonjs modules </li></ul><ul><li>head.js( &quot;moduleName.js&quot; , &quot;myOtherModule.js&quot; , function () { </li></ul><ul><li>     // module loaded </li></ul><ul><li>}); </li></ul><ul><li><head> </li></ul><ul><li><script src= &quot;/mymodule.js&quot; ></script> </li></ul><ul><li><script src= &quot;/myOtherModule.js&quot; ></script> </li></ul><ul><li><script src= &quot;/YAM.js&quot; ></script> </li></ul><ul><li><script src= &quot;/ilovemodules.js&quot; ></script> </li></ul><ul><li><script> </li></ul><ul><li>       // ewww. Polluting the global namespace?! </li></ul><ul><li>       myModule.use() </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul>
  14. 14. CommonJS Modules <ul><ul><li>Avoid naming collisions </li></ul></ul><ul><ul><li>Wraps module in a closure, keeping the module's internals private </li></ul></ul><ul><ul><li>Encourages Good Practice </li></ul></ul><ul><ul><li>Exposes properties through the special module.exports object </li></ul></ul>// define my module var Me = {       name : &quot;Tim&quot;      ,doDishes : function () {          return false      } } //export module module.exports = Me;
  15. 15. Resources <ul><li>nodeJS Patterns http://www.derekhammer.com/2010/07/05/node-js-patterns.html </li></ul><ul><li>Mastering Node http://visionmedia.github.com/masteringnode/book.html </li></ul><ul><li>Javascript Templating http://jsperf.com/dom-vs-innerhtml-based-templating/160 </li></ul>
  16. 16. Resources <ul><li>Polyfills </li></ul><ul><li>https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills </li></ul><ul><li>http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/ </li></ul>

×