$30 off During Our Annual Pro Sale. View Details »

Rapid Prototyping HTML5 Applications with Node.js

Rapid Prototyping HTML5 Applications with Node.js

With HTML5, the modern web browser continues to mature as a capable application platform.

The new specifications are broad, impacting nearly every technology associated with modern web development including graphics, connectivity, client-side storage, offline access, graphics, multimedia, and performance.

JavaScript continues to be front and center as the core language. NodeJS extends JavaScript's event loop paradigm to the server, and provides JavaScript engineers with the ability to produce functionality deeper in the software stack. This phenomenon has had an impact on types of software development ranging from full-scale, enterprise, mobile applications to robot hobbyists platforms.

See innovative example solutions and learn why NodeJS is an ideal development platform for the production acceleration of next-generation HTML5 applications.

Jesse Cravens

October 05, 2012
Tweet

More Decks by Jesse Cravens

Other Decks in Programming

Transcript

  1. Rapid Prototyping HTML5 Applications with Node.js
    5 OCTOBER 2012
    Tuesday, October 16, 12

    View Slide

  2. @jdcravens
    github.com/jessecravens
    Hacks
    HTML5
    Tips & Tools for Creating
    Interactive Web Applications
    Jesse Cravens & Jeff Burtoft
    Tuesday, October 16, 12

    View Slide

  3. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    Node.js provides an ideal development
    platform for the production acceleration of
    next-generation HTML5 applications.
    3
    Tuesday, October 16, 12

    View Slide

  4. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    what ?
    4
    •Define HTML5 Apps
    •Tech Trends & Next Generation Web Applications
    •SSJS with Node.js
    Tuesday, October 16, 12

    View Slide

  5. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    why ?
    5
    •Rapid Prototyping
    •Production Acceleration
    Tuesday, October 16, 12

    View Slide

  6. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    how ?
    6
    •Ubiquitous JavaScript
    •Event Driven, Reactionary Systems
    Tuesday, October 16, 12

    View Slide

  7. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    What this is not ?
    7
    •Comparison with other Evented Web Servers
    •Node.js Production Deployment Best Practices
    Tuesday, October 16, 12

    View Slide

  8. Defining HTML5
    Applications
    Tuesday, October 16, 12

    View Slide

  9. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    Let’s use HTML5 :/
    9
    Tuesday, October 16, 12

    View Slide

  10. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  11. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  12. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  13. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  14. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  15. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  16. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  17. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  18. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  19. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  20. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  21. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  22. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  23. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  24. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  25. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  26. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    10
    Tuesday, October 16, 12

    View Slide

  27. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    HTML5 Connectivity
    11
    http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html
    Tuesday, October 16, 12

    View Slide

  28. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    HTML5 Connectivity
    11
    http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html
    Tuesday, October 16, 12

    View Slide

  29. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    HTML5 Performance and
    Integration
    •Web Workers
    •WebSockets rather than Comet over XHR
    •CSS3 Hardware Acceleration
    •XHR2
    • CORS
    • Upload Progress Events
    • Uploading/Downloading Binary Data
    12
    Tuesday, October 16, 12

    View Slide

  30. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    HTML5 Performance and
    Integration
    •Web Workers
    •WebSockets rather than Comet over XHR
    •CSS3 Hardware Acceleration
    •XHR2
    • CORS
    • Upload Progress Events
    • Uploading/Downloading Binary Data
    12
    Tuesday, October 16, 12

    View Slide

  31. Trends
    Tuesday, October 16, 12

    View Slide

  32. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    frog thought leadership
    •Internet of Things
    •Ambient, Ubiquitous Computing
    •Connected City - hybrid digital/physical environment.
    •Quantified Selves
    14
    http://designmind.frogdesign.com/blog/frogs-2012-technology-trend-predictions.html
    Tuesday, October 16, 12

    View Slide

  33. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    web standard technologies
    •HTML5 Connectivity Revolution
    •HTML5 and TV, Game Consoles
    •HTML5 and the Car
    •WebGL 3d Graphics / WebSockets
    •Windows 8 and WinJS
    •Open Hardware (Linux Based MicroControllers, Remote
    Sensors, Robotics)
    15
    Tuesday, October 16, 12

    View Slide

  34. Prototypes
    Tuesday, October 16, 12

    View Slide

  35. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    Types of Prototypes
    •Hacks
    •Agile Spikes
    •Simulations
    •UX Prototypes
    17
    Tuesday, October 16, 12

    View Slide

  36. Ubiquitous JavaScript
    Tuesday, October 16, 12

    View Slide

  37. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    •Highly Accessible
    •Low Barrier of Entry
    •Event Driven
    •Transferrable Skill Set
    •Most Used Language
    •#1 on Github
    19
    Tuesday, October 16, 12

    View Slide

  38. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    20
    Tuesday, October 16, 12

    View Slide

  39. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    • @jdcravens
    • github.com/jessecravens
    21
    Single Page
    Application
    Frameworks
    Cross Platform
    Native Mobile
    Applications
    OS
    Independent
    Desktop
    Applications
    Web
    Based
    IDEs
    Remote
    Sensor APIs
    HTML5
    Games and
    Graphics
    InternetOS
    Other
    Libraries
    sencha 2 apache cordova appJS cloud9
    node-
    arduino construct 2
    boot2Gecko
    (FirefoxOS)
    depthJS
    angularJS
    titanium
    appcelerator
    windows8,
    winJS
    skywriter johnny-five entity.js
    chromium
    OS
    kinect.js
    batman enyo enyo nide duino isogenicengine nude.js
    backbone akshell boneScript gamepad API phantom.js
    canJS
    node-
    serialport
    three.js webRTC
    sproutCore tizen
    cappuccino
    Tuesday, October 16, 12

    View Slide

  40. Node.js and SSJS
    Tuesday, October 16, 12

    View Slide

  41. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    •Single Thread
    •Event Loop
    •Event Queue
    •Evented
    •Distributed Events
    •Non-Blocking
    •Asynchronous
    •Pub Sub
    •Reactor Pattern (Reactionary)
    23
    Tuesday, October 16, 12

    View Slide

  42. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    •Node.js is an event-driven, server-side JavaScript
    environment
    •v8
    • Google Chrome and Chromium
    • Standalone high performance engine that can be integrated into
    independent projects
    24
    Tuesday, October 16, 12

    View Slide

  43. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    •Buffer
    •C/C++ Addons
    •Child Processes
    •Cluster
    •Crypto
    •Debugger
    •DNS
    •Domain
    •Events
    •File System
    25
    •STDIO
    •Stream
    •String Decoder
    •Timers
    •TLS/SSL
    •TTY
    •UDP/Datagram
    •URL
    •Utilities
    •VM
    •ZLIB
    •Globals
    •HTTP
    •HTTPS
    •Modules
    •Net
    •OS
    •Path
    •Process
    •Punycode
    •Query Strings
    •Readline
    •REPL
    Tuesday, October 16, 12

    View Slide

  44. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    •Highly Interactive (high quantity of small request/responses)
    •Collaborative Web Applications
    •Real time UI updates
    •API servers
    •Network Servers
    •Traditional Web Applications
    • Express
    • Geddy
    • RailwayJS
    26
    Tuesday, October 16, 12

    View Slide

  45. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    27
    var express = require('express');
    var app = express();
    app.get('/', function(req, res){
    res.send('hello world');
    });
    app.listen(3000);
    Tuesday, October 16, 12

    View Slide

  46. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    28
    // all environments
    app.configure(function(){
    app.set('title', 'My Application');
    })
    // development only
    app.configure('development', function(){
    app.set('db uri', 'localhost/dev');
    })
    // production only
    app.configure('production', function(){
    app.set('db uri', 'n.n.n.n/prod');
    })
    Tuesday, October 16, 12

    View Slide

  47. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    29
    var ua = req.headers['user-agent'],
    DeviceData = {};
    // Mobile?
    if (/mobile/i.test(ua))
    DeviceData.mobile = true;
    // Apple device?
    if (/like Mac OS X/.test(ua)) {
    DeviceData.iOS = /CPU( iPhone)? OS ([0-9\._]+)
    like Mac OS X/.exec(ua)[2].replace(/_/g, '.');
    DeviceData.iPhone = /iPhone/.test(ua);
    DeviceData.iPad = /iPad/.test(ua);
    }
    Tuesday, October 16, 12

    View Slide

  48. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    It is lightweight, simple, and easy to make complex
    reactionary systems with little effort.
    Best of all it is JavaScript, so you have no risk of falling
    madly in love with your initial prototype and will
    eventually
    rewrite in something 'more production-worthy'.
    Or not.
    - voodootikigod
    30
    Tuesday, October 16, 12

    View Slide

  49. Reactionary Systems
    with Async JavaScript
    Tuesday, October 16, 12

    View Slide

  50. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  51. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  52. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “click”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  53. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  54. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “mouseover”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  55. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  56. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “load”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  57. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  58. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “change”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  59. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  60. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    “readystatechange”
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  61. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    JavaScript runs code from an
    event loop that takes events off
    a queue of all the events
    that have happened in the browser.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  62. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  63. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  64. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    element.addEventListener('click',
    function() {
    //do something
    });
    Whenever the JavaScript runtime is
    idle, it takes the first event off the
    queue and runs any handlers that were
    registered to that event
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  65. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  66. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    element.addEventListener('click',
    function() {
    //do something
    });
    As long as those handlers run quickly,
    this makes for a responsive user
    experience.
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  67. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  68. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    Events can be queued while code is running,
    but they can’t fire until the runtime is
    free.
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  69. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    32
    element.addEventListener('click',
    function() {
    //do something
    });
    EVENTS
    EVENT
    QUEUE
    EVENT LOOP
    ACTIONS
    Tuesday, October 16, 12

    View Slide

  70. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    33
    Tuesday, October 16, 12

    View Slide

  71. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    34
    var a = false;
    asyncFunction(function({
    console.assert(a, 'a should be true');
    })
    a = true;
    Tuesday, October 16, 12

    View Slide

  72. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    35
    data = file.read("/foo/bar");
    // wait...
    doSomething(data);
    file.read("/foo/bar", function(data) {
    // called after data is read
    doSomething(data);
    });
    otherThing(); // executes immediately;
    Tuesday, October 16, 12

    View Slide

  73. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    36
    data = file.read("/foo/bar");
    // wait...
    doSomething(data);
    file.read("/foo/bar", function(data) {
    // called after data is read
    doSomething(data);
    });
    otherThing(); // executes immediately;
    Tuesday, October 16, 12

    View Slide

  74. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    37
    •Processing large arrays or JSON responses.
    •Prefetching and/or caching data for later use.
    •Analyzing video or audio data.
    •Polling of webservices.
    •Image filtering in Canvas.
    •Updating many rows of Local Storage DB.
    Tuesday, October 16, 12

    View Slide

  75. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    38
    Web Workers provide a simple means for web content to run
    scripts in background threads.
    Main Window
    Context Worker
    Context
    Spawn
    Tuesday, October 16, 12

    View Slide

  76. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    39
    // Simple Worker Spawn from Main Thread
    var message = {"row": 1000, "col": 1000}
    var worker = new Worker('worker.js');
    worker.postMessage(JSON.stringify(message));
    worker.addEventListener('message',
    function(event){
    // do something with the computated data
    }, false);
    //continue executing
    Tuesday, October 16, 12

    View Slide

  77. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    40
    // Move high Computation to the Worker
    self.addEventListener('message', function(e) {
    var msg = JSON.parse(e.data);
    var r = msg.row;
    var c = msg.col;
    var a = new Array(r);
    for (var i = 0; i < r; i++) {
    a[i] = new Array(c);
    for (var j = 0; j < c; j++) {
    a[i][j] = "[" + i + "," + j + "]";
    }
    }
    postMessage(a);
    }, false);
    Tuesday, October 16, 12

    View Slide

  78. Web Workers Hacks
    from ‘HTML5 Hacks’
    Tuesday, October 16, 12

    View Slide

  79. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    42
    1. JavaScript uses a Single Threaded Runtime
    2. Events can be queued while code is running,
    but they can’t fire until the runtime is free.
    3. Keep the handlers running quickly and returning to the event loop.
    4. Or, move those long running scripts to workers
    5. But now, I have a lot of nested callbacks, single event listeners,
    AND SPAGHETTI CODE
    Tuesday, October 16, 12

    View Slide

  80. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    43
    $.get("test.php").done(function() {
    alert("$.get succeeded");
    });
    Tuesday, October 16, 12

    View Slide

  81. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    44
    function fn1() {
    //do something;
    }
    function fn2() {
    //do something;
    }
    function fn3(n) {
    //do something;
    }
    /* create a deferred object */
    var dfd = $.Deferred();
    /* add handlers to be called
    when dfd is resolved */
    /* .done() can take any number of
    functions or arrays of functions */
    dfd.done([fn1, fn2], fn3, [fn2, fn1]));
    Tuesday, October 16, 12

    View Slide

  82. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    45
    var Sidebar = Backbone.Model.extend({
    promptColor: function() {
    var cssColor = prompt("Please enter a CSS
    color:");
    this.set({color: cssColor});
    }
    });
    window.sidebar = new Sidebar;
    sidebar.on('change:color', function(model, color) {
    $('#sidebar').css({background: color});
    });
    sidebar.set({color: 'white'});
    sidebar.promptColor();
    Tuesday, October 16, 12

    View Slide

  83. disneybaby.com Iris.js
    Distributed Events
    Tuesday, October 16, 12

    View Slide

  84. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    47
    dbaby.Iris = (function ($) {
    function one(){};
    function two(){};
    function init(){};
    // onload
    $(init);
    // public methods
    return {
    one: one,
    two: two
    };
    }(jQuery));
    Tuesday, October 16, 12

    View Slide

  85. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    48
    function init() {
    // Global variables
    dbaby.Iris.delay = 7000;
    // ...
    var loopReadyDfd = loadSlides();
    $.when(loopReadyDfd).done(function() {
    // reposition the last slide
    $('#promo-' + dbaby.Iris.lastslide).css('right', -800 + "px");
    // ...
    nextIris(dbaby.Iris.delay);!
    }
    };
    Tuesday, October 16, 12

    View Slide

  86. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    49
    function loadSlides() {
    var dfd = $.Deferred();
    // Determine slug from URL.
    var slug = $('#iris').data('slug');
    // Request additional slides.
    $.ajax({
    url: '/ajax/get/iris/' + slug + '/'
    }).done(
    function(data) {
    // fetch new promo HTML from response
    // ..
    // fetch src of all new images we're trying to load
    src = $.map( $promos.find('img'), function( img ) {
    return img.src;
    });
    // preload all new images
    $.when(dbaby.preloadImg( src ) ).then(
    function() {
    // ... set up a bunch of listeners
    // resolve deferred object
    dfd.resolve();
    }
    );
    });
    return dfd;
    }
    Tuesday, October 16, 12

    View Slide

  87. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    50
    function nextIris(delay) {
    if (tickerOn) {
    if (irisOn && slideNow == dbaby.Iris.totalSlides) {
    var x1 = 0;
    var $pxWrap = $('#iris-wrapper');
    if ( Modernizr.csstransforms && $.browser.webkit ) {
    // for CSS transitions
    $pxWrap.css(TRANSITION, '0s cubic-bezier(.333, 0, 0, 1)');
    $pxWrap.css(TRANSFORM, 'translateX('+x1+'px)');
    }
    else {
    // for Animated transitions
    $pxWrap.css('margin-right', x1 + 'px');
    };
    $.when(nextSetReadyDfd,animReadyDfd).done(function(obj) {
    .when(transitionMomentSet(
    obj.$momentSet,
    obj.pixieDustType)
    ).done(function(){
    nextIris(delay);
    });
    });
    }
    }
    }
    Tuesday, October 16, 12

    View Slide

  88. SSJS
    Events
    Tuesday, October 16, 12

    View Slide

  89. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    52
    var example_emitter = new (require('events').EventEmitter);
    example_emitter.on("test", function ()
    { console.log("test"); });
    example_emitter.on("print", function (message)
    { console.log(message); });
    example_emitter.emit("test");
    example_emitter.emit("print", "message");
    example_emitter.emit("unhandled");
    Tuesday, October 16, 12

    View Slide

  90. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    53
    > var example_emitter = new
    (require('events').EventEmitter);
    {}
    > example_emitter.on("test", function ()
    { console.log("test"); });
    { _events: { test: [Function] } }
    > example_emitter.on("print", function (message)
    { console.log(message); });
    { _events: { test: [Function], print: [Function] } }
    > example_emitter.emit("test");
    test //console.log'd
    true //return value
    > example_emitter.emit("print", "message");
    message //console.log'd
    true //return value
    > example_emitter.emit("unhandled");
    false //return value
    Tuesday, October 16, 12

    View Slide

  91. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    54
    async.map(['file1','file2','file3'], fs.stat,
    function(err, results){
    // results is now an array of stats for each file
    });
    async.filter(['file1','file2','file3'], path.exists,
    function(results){
    // results now equals an array of the existing files
    });
    async.parallel([
    function(){ ... },
    function(){ ... }
    ], callback);
    async.series([
    function(){ ... },
    function(){ ... }
    ]);
    Tuesday, October 16, 12

    View Slide

  92. Robodeck Demo
    Full Stack Evented Sockets
    Tuesday, October 16, 12

    View Slide

  93. Beaglebone Todo
    Collaborative Micro Network Server
    Tuesday, October 16, 12

    View Slide

  94. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    57
    Tuesday, October 16, 12

    View Slide

  95. 5 OCT 2012
    DEVCON5 HTML5 Summit
    Rapid Prototyping HTML5 Applications with Node.js
    58
    Tuesday, October 16, 12

    View Slide

  96. Yeoman Demo
    Front End Production Acceleration
    Tuesday, October 16, 12

    View Slide

  97. Thanks!
    Tuesday, October 16, 12

    View Slide