The document discusses a presentation titled "Rapid Prototyping HTML5 Applications with Node.js" given on October 5, 2012. The presentation introduces Node.js as an ideal platform for rapidly prototyping and accelerating the production of next-generation HTML5 applications. It covers how Node.js enables ubiquitous JavaScript, event-driven programming to create reactive systems, and its suitability for prototyping different types of HTML5 applications and experiments.
2. Jesse Cravens & Jeff Burtoft
HTML5
Hacks
Tips & Tools for Creating
Interactive Web Applications
@jdcravens
github.com/jessecravens
Tuesday, October 16, 12
3. Rapid Prototyping HTML5 Applications with Node.js
Node.js provides an ideal development
platform for the production acceleration of
next-generation HTML5 applications.
DEVCON5 HTML5 Summit 5 OCT 2012 3
Tuesday, October 16, 12
4. Rapid Prototyping HTML5 Applications with Node.js
what ?
• Define HTML5 Apps
• Tech Trends & Next Generation Web Applications
• SSJS with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 4
Tuesday, October 16, 12
5. Rapid Prototyping HTML5 Applications with Node.js
why ?
• Rapid Prototyping
• Production Acceleration
DEVCON5 HTML5 Summit 5 OCT 2012 5
Tuesday, October 16, 12
6. Rapid Prototyping HTML5 Applications with Node.js
how ?
• Ubiquitous JavaScript
• Event Driven, Reactionary Systems
DEVCON5 HTML5 Summit 5 OCT 2012 6
Tuesday, October 16, 12
7. Rapid Prototyping HTML5 Applications with Node.js
What this is not ?
• Comparison with other Evented Web Servers
• Node.js Production Deployment Best Practices
DEVCON5 HTML5 Summit 5 OCT 2012 7
Tuesday, October 16, 12
9. Rapid Prototyping HTML5 Applications with Node.js
Let’s use HTML5 :/
DEVCON5 HTML5 Summit 5 OCT 2012 9
Tuesday, October 16, 12
10. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
11. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
12. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
13. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
14. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
15. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
16. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
17. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
18. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
19. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
20. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
21. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
22. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
23. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
24. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
25. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
26. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 10
Tuesday, October 16, 12
27. Rapid Prototyping HTML5 Applications with Node.js
http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html
HTML5 Connectivity
DEVCON5 HTML5 Summit 5 OCT 2012 11
Tuesday, October 16, 12
28. Rapid Prototyping HTML5 Applications with Node.js
http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html
HTML5 Connectivity
DEVCON5 HTML5 Summit 5 OCT 2012 11
Tuesday, October 16, 12
29. 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
DEVCON5 HTML5 Summit 5 OCT 2012 12
Tuesday, October 16, 12
30. 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
DEVCON5 HTML5 Summit 5 OCT 2012 12
Tuesday, October 16, 12
32. Rapid Prototyping HTML5 Applications with Node.js
frog thought leadership
• Internet of Things
• Ambient, Ubiquitous Computing
• Connected City - hybrid digital/physical environment.
• Quantified Selves
http://designmind.frogdesign.com/blog/frogs-2012-technology-trend-predictions.html
DEVCON5 HTML5 Summit 5 OCT 2012 14
Tuesday, October 16, 12
33. 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)
DEVCON5 HTML5 Summit 5 OCT 2012 15
Tuesday, October 16, 12
37. Rapid Prototyping HTML5 Applications with Node.js
• Highly Accessible
• Low Barrier of Entry
• Event Driven
• Transferrable Skill Set
• Most Used Language
• #1 on Github
DEVCON5 HTML5 Summit 5 OCT 2012 19
Tuesday, October 16, 12
38. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 20
Tuesday, October 16, 12
39. Rapid Prototyping HTML5 Applications with Node.js
OS
Single Page Cross Platform Web HTML5
Independent Remote Other
Application Native Mobile Based Games and InternetOS
Desktop Sensor APIs Libraries
Frameworks Applications IDEs Graphics
Applications
node- boot2Gecko
sencha 2 apache cordova appJS cloud9 arduino construct 2 depthJS
(FirefoxOS)
titanium windows8, chromium
angularJS skywriter johnny-five entity.js kinect.js
appcelerator winJS OS
• @jdcravens
•
batman enyo enyo
github.com/jessecravens
nide duino isogenicengine nude.js
backbone akshell boneScript gamepad API phantom.js
node-
canJS three.js webRTC
serialport
sproutCore tizen
cappuccino
DEVCON5 HTML5 Summit 5 OCT 2012 21
Tuesday, October 16, 12
41. Rapid Prototyping HTML5 Applications with Node.js
• Single Thread
• Event Loop
• Event Queue
• Evented
• Distributed Events
• Non-Blocking
• Asynchronous
• Pub Sub
• Reactor Pattern (Reactionary)
DEVCON5 HTML5 Summit 5 OCT 2012 23
Tuesday, October 16, 12
42. 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
DEVCON5 HTML5 Summit 5 OCT 2012 24
Tuesday, October 16, 12
43. Rapid Prototyping HTML5 Applications with Node.js
• Buffer • Globals • STDIO
• C/C++ Addons • HTTP • Stream
• Child Processes • HTTPS • String Decoder
• Cluster • Modules • Timers
• Crypto • Net • TLS/SSL
• Debugger • OS • TTY
• DNS • Path • UDP/Datagram
• Domain • Process • URL
• Events • Punycode • Utilities
• File System • Query Strings • VM
• Readline • ZLIB
• REPL
DEVCON5 HTML5 Summit 5 OCT 2012 25
Tuesday, October 16, 12
44. 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
DEVCON5 HTML5 Summit 5 OCT 2012 26
Tuesday, October 16, 12
45. Rapid Prototyping HTML5 Applications with Node.js
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('hello world');
});
app.listen(3000);
DEVCON5 HTML5 Summit 5 OCT 2012 27
Tuesday, October 16, 12
46. Rapid Prototyping HTML5 Applications with Node.js
// 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');
})
DEVCON5 HTML5 Summit 5 OCT 2012 28
Tuesday, October 16, 12
47. Rapid Prototyping HTML5 Applications with Node.js
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);
}
DEVCON5 HTML5 Summit 5 OCT 2012 29
Tuesday, October 16, 12
48. 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
DEVCON5 HTML5 Summit 5 OCT 2012 30
Tuesday, October 16, 12
50. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
51. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
52. Rapid Prototyping HTML5 Applications with Node.js
“click”
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
53. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
54. Rapid Prototyping HTML5 Applications with Node.js
“mouseover”
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
55. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
56. Rapid Prototyping HTML5 Applications with Node.js
“load”
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
57. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
58. Rapid Prototyping HTML5 Applications with Node.js
“change”
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
59. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
60. Rapid Prototyping HTML5 Applications with Node.js
“readystatechange”
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
61. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
JavaScript runs code from an
event loop that takes events off
a queue of all the events
that have happened in the browser.
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
62. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
63. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
64. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
Whenever the JavaScript runtime is
idle, it takes the first event off the
queue and runs any handlers that were
registered to that event
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
65. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
66. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
As long as those handlers run quickly,
this makes for a responsive user
experience.
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
67. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
68. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
Events can be queued while code is running,
but they can’t fire until the runtime is
free.
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
69. Rapid Prototyping HTML5 Applications with Node.js
EVENTS
EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});
EVENT LOOP
ACTIONS
DEVCON5 HTML5 Summit 5 OCT 2012 32
Tuesday, October 16, 12
70. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 33
Tuesday, October 16, 12
71. Rapid Prototyping HTML5 Applications with Node.js
var a = false;
asyncFunction(function({
console.assert(a, 'a should be true');
})
a = true;
DEVCON5 HTML5 Summit 5 OCT 2012 34
Tuesday, October 16, 12
72. Rapid Prototyping HTML5 Applications with Node.js
data = file.read("/foo/bar");
// wait...
doSomething(data);
file.read("/foo/bar", function(data) {
// called after data is read
doSomething(data);
});
otherThing(); // executes immediately;
DEVCON5 HTML5 Summit 5 OCT 2012 35
Tuesday, October 16, 12
73. Rapid Prototyping HTML5 Applications with Node.js
data = file.read("/foo/bar");
// wait...
doSomething(data);
file.read("/foo/bar", function(data) {
// called after data is read
doSomething(data);
});
otherThing(); // executes immediately;
DEVCON5 HTML5 Summit 5 OCT 2012 36
Tuesday, October 16, 12
74. Rapid Prototyping HTML5 Applications with Node.js
• 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.
DEVCON5 HTML5 Summit 5 OCT 2012 37
Tuesday, October 16, 12
75. Rapid Prototyping HTML5 Applications with Node.js
Web Workers provide a simple means for web content to run
scripts in background threads.
Main Window
Context
Spawn
Worker
Context
DEVCON5 HTML5 Summit 5 OCT 2012 38
Tuesday, October 16, 12
76. Rapid Prototyping HTML5 Applications with Node.js
// 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
DEVCON5 HTML5 Summit 5 OCT 2012 39
Tuesday, October 16, 12
77. Rapid Prototyping HTML5 Applications with Node.js
// 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);
DEVCON5 HTML5 Summit 5 OCT 2012 40
Tuesday, October 16, 12
79. Rapid Prototyping HTML5 Applications with Node.js
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
DEVCON5 HTML5 Summit 5 OCT 2012 42
Tuesday, October 16, 12
80. Rapid Prototyping HTML5 Applications with Node.js
$.get("test.php").done(function() {
alert("$.get succeeded");
});
DEVCON5 HTML5 Summit 5 OCT 2012 43
Tuesday, October 16, 12
81. Rapid Prototyping HTML5 Applications with Node.js
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]));
DEVCON5 HTML5 Summit 5 OCT 2012 44
Tuesday, October 16, 12
82. Rapid Prototyping HTML5 Applications with Node.js
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();
DEVCON5 HTML5 Summit 5 OCT 2012 45
Tuesday, October 16, 12
89. Rapid Prototyping HTML5 Applications with Node.js
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");
DEVCON5 HTML5 Summit 5 OCT 2012 52
Tuesday, October 16, 12
90. Rapid Prototyping HTML5 Applications with Node.js
> 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
DEVCON5 HTML5 Summit 5 OCT 2012 53
Tuesday, October 16, 12
91. Rapid Prototyping HTML5 Applications with Node.js
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(){ ... }
]);
DEVCON5 HTML5 Summit 5 OCT 2012 54
Tuesday, October 16, 12
92. Robodeck Demo
Full Stack Evented Sockets
Tuesday, October 16, 12
93. Beaglebone Todo
Collaborative Micro Network Server
Tuesday, October 16, 12
94. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 57
Tuesday, October 16, 12
95. Rapid Prototyping HTML5 Applications with Node.js
DEVCON5 HTML5 Summit 5 OCT 2012 58
Tuesday, October 16, 12
96. Yeoman Demo
Front End Production Acceleration
Tuesday, October 16, 12