Rapid Prototyping HTML5 Apps with Node.js

Rapid Prototyping HTML5 Applications with Node.js
5 OCTOBER 2012

Tuesday, October 16, 12

Jesse Cravens & Jeff Burtoft

HTML5
Hacks
Tips & Tools for Creating
Interactive Web Applications

@jdcravens
github.com/jessecravens



Node.js provides an ideal development
platform for the production acceleration of
next-generation HTML5 applications.

DEVCON5 HTML5 Summit 5 OCT 2012 3



what ?
• Deﬁne HTML5 Apps
• Tech Trends & Next Generation Web Applications
• SSJS with Node.js




why ?
• Rapid Prototyping
• Production Acceleration




how ?
• Ubiquitous JavaScript
• Event Driven, Reactionary Systems




What this is not ?
• Comparison with other Evented Web Servers
• Node.js Production Deployment Best Practices



Deﬁning HTML5
Applications



Let’s use HTML5 :/




http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html

HTML5 Connectivity




HTML5 Performance and
Integration
• Web Workers
• WebSockets rather than Comet over XHR
• CSS3 Hardware Acceleration
• XHR2
• CORS
• Upload Progress Events
• Uploading/Downloading Binary Data



Trends



frog thought leadership

• Internet of Things
• Ambient, Ubiquitous Computing
• Connected City - hybrid digital/physical environment.
• Quantiﬁed Selves

http://designmind.frogdesign.com/blog/frogs-2012-technology-trend-predictions.html




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)



Prototypes



Types of Prototypes

• Hacks
• Agile Spikes
• Simulations
• UX Prototypes



Ubiquitous JavaScript



• Highly Accessible
• Low Barrier of Entry
• Event Driven
• Transferrable Skill Set
• Most Used Language
• #1 on Github




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-ﬁve 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



Node.js and SSJS



• Single Thread
• Event Loop
• Event Queue
• Evented
• Distributed Events
• Non-Blocking
• Asynchronous
• Pub Sub
• Reactor Pattern (Reactionary)




• 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




• 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




• 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




var express = require('express');
var app = express();

app.get('/', function(req, res){
res.send('hello world');
});

app.listen(3000);




// 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');
})




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);
}




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



Reactionary Systems
with Async JavaScript



EVENTS

EVENT
QUEUE

EVENT LOOP

ACTIONS




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




“click”

EVENTS
EVENT
QUEUE

EVENT LOOP

ACTIONS



“mouseover”

EVENTS
EVENT
QUEUE

EVENT LOOP

ACTIONS



“load”

EVENTS
EVENT
QUEUE

EVENT LOOP

ACTIONS




“change”
EVENTS
EVENT
QUEUE

EVENT LOOP

ACTIONS




“readystatechange”
EVENTS
EVENT
QUEUE

EVENT LOOP

ACTIONS




EVENTS

EVENT
QUEUE
element.addEventListener('click',
function() {
//do something
});

EVENT LOOP

ACTIONS




EVENTS
Whenever the JavaScript runtime is
idle, it takes the ﬁrst event off the
queue and runs any handlers that were
registered to that event
EVENT
QUEUE
function() {
//do something
});

EVENT LOOP

ACTIONS




EVENTS
As long as those handlers run quickly,
this makes for a responsive user
experience.

EVENT
QUEUE
function() {
//do something
});

EVENT LOOP

ACTIONS




EVENTS

EVENT
QUEUE
function() {
//do something
});

EVENT LOOP
Events can be queued while code is running,
but they can’t ﬁre until the runtime is
free.

ACTIONS




var a = false;

asyncFunction(function({
console.assert(a, 'a should be true');
})

a = true;




data = file.read("/foo/bar");
// wait...
doSomething(data);

file.read("/foo/bar", function(data) {
// called after data is read
doSomething(data);
});

otherThing(); // executes immediately;




• Processing large arrays or JSON responses.
• Prefetching and/or caching data for later use.
• Analyzing video or audio data.
• Polling of webservices.
• Image ﬁltering in Canvas.
• Updating many rows of Local Storage DB.




Web Workers provide a simple means for web content to run
scripts in background threads.

Main Window
Context
Spawn
Worker
Context




// 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




// 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);



Web Workers Hacks
from ‘HTML5 Hacks’



1. JavaScript uses a Single Threaded Runtime

2. Events can be queued while code is running,
but they can’t ﬁre 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




$.get("test.php").done(function() {
alert("$.get succeeded");
});



disneybaby.com Iris.js
Distributed Events



dbaby.Iris = (function ($) {

function one(){};

function two(){};

function init(){};

// onload
$(init);

// public methods
return {
one: one,
two: two
};

}(jQuery));




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);!
}
};



SSJS
Events



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");




> 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




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(){ ... }
]);



Robodeck Demo
Full Stack Evented Sockets


Beaglebone Todo
Collaborative Micro Network Server


Yeoman Demo
Front End Production Acceleration


Thanks!


Rapid Prototyping HTML5 Apps with Node.js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Ähnlich wie Rapid Prototyping HTML5 Apps with Node.js

Ähnlich wie Rapid Prototyping HTML5 Apps with Node.js (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Rapid Prototyping HTML5 Apps with Node.js