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.

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