Testable client side_mvc_apps_in_javascript

  • 2,124 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,124
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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 &  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'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
  • 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
  • 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'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 "Refactoring? Just write it well the first time" 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
  • 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

Transcript

  • 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
  • 11. Self Improvement
    • http://stackoverflow.com/questions/1711/what-is-the-single-most-influential-book-every-programmer-should-read
  • 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= &quot;/mymodule.js&quot; ></script>
    • <script src= &quot;/myOtherModule.js&quot; ></script>
    • <script src= &quot;/YAM.js&quot; ></script>
    • <script src= &quot;/ilovemodules.js&quot; ></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 : &quot;Tim&quot;      ,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/