Testable client side_mvc_apps_in_javascript
Download as PPT, PDF3 likes1,186 views
This document discusses building testable, client-side MVC apps in JavaScript using Spine, Jasmine, and Node.js. It advocates pushing as much work to the client as possible for responsiveness, and outlines a thin-server architecture with common front-end technologies and libraries to structure code, add interactivity, and optimize resources.
Testable client side_mvc_apps_in_javascript
- 1. Testable, client-side MVC apps in Javascript Demo using Spine, Jasmine, & node.JS
- 2. Motivation Browser environment is becoming increasingly powerful 'Serverside for everything' exists because there was no other choice Flash platform no longer required/ideal for rich interaction Server infrastructure is expensive Push as much work onto the client as possible Less importance on what server-side tech you select Unnecessary to talk to server for every action More responsive interaction Smoother UX -> better customers* Web applications not web sites Web browser is (mostly) cross-platform * http://www.codinghorror.com/blog/2006/11/speed-still-matters.html
- 3. Thin-Server Architecture Server Responsibilities Persistence Storage & retrieval of unformatted data Sessions Validation Sanity Security Resource serving Modules Images DRY HTML CSS Handling/reporting state SEO/Accessibility Client Responsibilities Behaviour Navigation User Prompt Layout Visual Hierarchy Theme Data Presentation Data (e.g. JSON) -> HTML via templates Pseudo Persistence Caching Processing (eg filtering) Validation The eye candy is the application is the eye candy
- 4. Accessibility? Premature optimisation. Make something cool first. Simple to achieve later, IF you need it
- 5. Graceful Degredation? Premature optimisation. Make something cool first.
- 6. Give your code a fighting chance Polyfills "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." https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills HTML5 + Shim/Shiv http://html5boilerplate.com/ http://www.modernizr.com/ CSS Reset http://www.cssreset.com/ http://html5boilerplate.com/ http://necolas.github.com/normalize.css/
- 7. Add some structure MVC Backbone http://documentcloud.github.com/backbone/ Spine http://maccman.github.com/spine/ Tests jasmine http://pivotal.github.com/jasmine/ jasmine-node https://github.com/mhevery/jasmine-node expresso http://visionmedia.github.com/expresso/ vows http://vowsjs.org/
- 8. Visuals should be easy and fun A language that compiles to CSS stylus http://learnboost.github.com/stylus/ https://github.com/lucasmazza/stylus_rails sass http://sass-lang.com/ A language that compiles to HTML jade http://jade-lang.com/ haml http://haml-lang.com/ Language that cross-browserizes your css & adds cool stuff nib https://github.com/visionmedia/nib Compass http://compass-style.org/ Templating system for lists http://jsperf.com/dom-vs-innerhtml-based-templating/160
- 9. Optimise your resources Image Reduction http://pornel.net/imagealpha http://imageoptim.pornel.net/ Smush.it via YSlow http://developer.yahoo.com/yslow/smushit/ JS Reduction Google Closure Compiler http://code.google.com/closure/compiler/ UglifyJS https://github.com/mishoo/UglifyJS http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js CSS Reduction YUICompressor http://tools.w3clubs.com/cssmin/
- 10. Familiar? Out of date tests, or none at all Out of date documentation, or none at all "Refactoring? Just write it well the first time" Knee-jerk Methodology Minimal technology options, from 5+ years ago
- 12. CommonJS Community Driven The W3C of Javascript Define specs for console modules assert packages Module spec
- 13. Loading Modules Load modules with the CommonJS require() function RequireJS = async require() Compare with HeadJS Transparent, client-side require: Stitch/Browserify, – dependency on nodeJS though In-browser support not ideal, but manageable - workarounds available //commonjs synchronous require var module = require( 'moduleName' ) //requirejs asynchronous require var module; require( 'moduleName' , function (loadedModule) { module = loadedModule; }) // headjs has no concept of commonjs modules head.js( "moduleName.js" , "myOtherModule.js" , function () { // module loaded }); <head> <script src= "/mymodule.js" ></script> <script src= "/myOtherModule.js" ></script> <script src= "/YAM.js" ></script> <script src= "/ilovemodules.js" ></script> <script> // ewww. Polluting the global namespace?! myModule.use() </script> </head>
- 14. CommonJS Modules Avoid naming collisions Wraps module in a closure, keeping the module's internals private Encourages Good Practice Exposes properties through the special module.exports object // define my module var Me = { name : "Tim" ,doDishes : function () { return false } } //export module module.exports = Me;
- 15. Resources nodeJS Patterns http://www.derekhammer.com/2010/07/05/node-js-patterns.html Mastering Node http://visionmedia.github.com/masteringnode/book.html Javascript Templating http://jsperf.com/dom-vs-innerhtml-based-templating/160
- 16. Resources Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/
Editor's Notes
- #3: 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
- #4: Your database operations should be abstracted anyway Persistence & 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.
- #5: in a quick bit of research, looks like less than 5%, more IE5.5 users
- #6: Doesn't need to be complicated don't let it scare you away from making an awesome app There's always a way to fall back nicely Regressive Enhancement
- #7: 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's a little bloated and to get started you may want to go for something a little more lightweight
- #9: Variables Mixins Cross-browser Templates
- #10: CSS not included
- #11: No Tests, Bugs around every corner No guarantee that the app actually works Rigorous manual testing means testing doens'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's too heavy only when totally necessary &quot;Refactoring? Just write it well the first time&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't fix it if it ain't broke When all you have is a hammer everything looks like a nail
- #12: There are others but these ones are most general. Allows you to identify 'code smells' in any language Surprising how many people don'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