Your SlideShare is downloading. ×
0
Testable, client-side MVC apps in Javascript Demo using Spine, Jasmine, & node.JS
Motivation <ul><ul><li>Browser environment is becoming increasingly powerful </li></ul></ul><ul><ul><ul><li>'Serverside fo...
Thin-Server Architecture <ul><li>Server Responsibilities </li></ul><ul><ul><li>Persistence </li></ul></ul><ul><ul><ul><li>...
Accessibility? <ul><ul><li>Premature optimisation. </li></ul></ul><ul><ul><li>Make something cool first. </li></ul></ul><u...
Graceful Degredation? <ul><ul><li>Premature optimisation.  </li></ul></ul><ul><ul><li>Make something cool first.  </li></u...
Give your code a fighting chance <ul><li>Polyfills </li></ul><ul><ul><ul><li>  &quot;A polyfill, or polyfiller, is a piece...
Add some structure <ul><li>MVC </li></ul><ul><ul><ul><li>Backbone  http://documentcloud.github.com/backbone/ </li></ul></u...
Visuals should be easy and fun <ul><li>A language that compiles to CSS </li></ul><ul><ul><ul><li>stylus  http://learnboost...
Optimise your resources <ul><li>Image Reduction </li></ul><ul><ul><ul><li>http://pornel.net/imagealpha </li></ul></ul></ul...
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 a...
Self Improvement <ul><li>http://stackoverflow.com/questions/1711/what-is-the-single-most-influential-book-every-programmer...
CommonJS <ul><ul><li>Community Driven </li></ul></ul><ul><ul><li>The W3C of Javascript </li></ul></ul><ul><ul><li>Define s...
Loading Modules <ul><ul><li>Load modules with the CommonJS require() function </li></ul></ul><ul><ul><li>RequireJS = async...
CommonJS Modules <ul><ul><li>Avoid naming collisions </li></ul></ul><ul><ul><li>Wraps module in a closure, keeping the mod...
Resources <ul><li>nodeJS Patterns http://www.derekhammer.com/2010/07/05/node-js-patterns.html </li></ul><ul><li>Mastering ...
Resources <ul><li>Polyfills </li></ul><ul><li>https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills </...
Upcoming SlideShare
Loading in...5
×

Testable client side_mvc_apps_in_javascript

2,183

Published on

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,183
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Serverside technology and jobs Serverside technology and vendor lock-in Serverside technology and legacy Possible issues with browser environments becoming outdated quickly Probably a good thing though
  • Your database operations should be abstracted anyway Persistence &amp;  Caching     if the client has already downloaded that data why do they need to download it again Client-side prediction - quake Client should do anything it can do easily.
  • in a quick bit of research, looks like less than 5%, more IE5.5 users
  • Doesn&apos;t need to be complicated don&apos;t let it scare you away from making an awesome app  There&apos;s always a way to fall back nicely Regressive Enhancement
  • One of the best things about javascript is how fast it moves. Since beginning this 2 months ago, the hardest part has been selecting the right tools.  Modernizer is a HTML5 shim and a feature detector HTML5 Boilerplate is a shim and a CSS reset also includes a bunch of css stubs. it&apos;s a little bloated and to get started you may want to go for something a little more lightweight
  • Variables Mixins Cross-browser Templates
  • CSS not included
  • No Tests,  Bugs around every corner No guarantee that the app actually works Rigorous manual testing means testing doens&apos;t happen Unprofessional Documentation The original developer(s) only person who can fix bugs without inducing homicidal rage Documentation gets out of sync if it&apos;s too heavy only when totally necessary &amp;quot;Refactoring? Just write it well the first time&amp;quot; Code gets worse with time Urge to rewrite each piece of software every 6 months Knee-jerk Methodology Always in crisis mode Impossible to keep deadlines Overworked staff Minimal technology options Sticking with what you know Don&apos;t fix it if it ain&apos;t broke  When all you have is a hammer everything looks like a nail
  • There are others but these ones are most general. Allows you to identify &apos;code smells&apos; in any language Surprising how many people don&apos;t read this kind of material These books make it easier to communicate ideas and me not sound like a madman with strange ideas designed to ruin projects
  • Transcript of "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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×