• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rapid Prototyping HTML5 Applications with Node.js
 

Rapid Prototyping HTML5 Applications with Node.js

on

  • 6,649 views

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

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.

Statistics

Views

Total Views
6,649
Views on SlideShare
6,637
Embed Views
12

Actions

Likes
12
Downloads
88
Comments
0

3 Embeds 12

http://www.linkedin.com 9
http://www.slashdocs.com 2
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rapid Prototyping HTML5 Applications with Node.js Rapid Prototyping HTML5 Applications with Node.js Presentation Transcript

    • Rapid Prototyping HTML5 Applications with Node.js 5 OCTOBER 2012Tuesday, October 16, 12
    • Jesse Cravens & Jeff Burtoft HTML5 Hacks Tips & Tools for Creating Interactive Web Applications @jdcravens github.com/jessecravensTuesday, October 16, 12
    • 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 3Tuesday, October 16, 12
    • 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 4Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js why ? • Rapid Prototyping • Production Acceleration DEVCON5 HTML5 Summit 5 OCT 2012 5Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js how ? • Ubiquitous JavaScript • Event Driven, Reactionary Systems DEVCON5 HTML5 Summit 5 OCT 2012 6Tuesday, October 16, 12
    • 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 7Tuesday, October 16, 12
    • Defining HTML5 ApplicationsTuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js Let’s use HTML5 :/ DEVCON5 HTML5 Summit 5 OCT 2012 9Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 10Tuesday, October 16, 12
    • 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 11Tuesday, October 16, 12
    • 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 11Tuesday, October 16, 12
    • 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 12Tuesday, October 16, 12
    • 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 12Tuesday, October 16, 12
    • TrendsTuesday, October 16, 12
    • 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 14Tuesday, October 16, 12
    • 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 15Tuesday, October 16, 12
    • PrototypesTuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js Types of Prototypes • Hacks • Agile Spikes • Simulations • UX Prototypes DEVCON5 HTML5 Summit 5 OCT 2012 17Tuesday, October 16, 12
    • Ubiquitous JavaScriptTuesday, October 16, 12
    • 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 19Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 20Tuesday, October 16, 12
    • 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 21Tuesday, October 16, 12
    • Node.js and SSJSTuesday, October 16, 12
    • 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 23Tuesday, October 16, 12
    • 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 24Tuesday, October 16, 12
    • 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 25Tuesday, October 16, 12
    • 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 26Tuesday, October 16, 12
    • 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 27Tuesday, October 16, 12
    • 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 28Tuesday, October 16, 12
    • 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 29Tuesday, October 16, 12
    • 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 30Tuesday, October 16, 12
    • Reactionary Systems with Async JavaScriptTuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js EVENTS EVENT QUEUE EVENT LOOP ACTIONS DEVCON5 HTML5 Summit 5 OCT 2012 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js EVENTS EVENT QUEUE EVENT LOOP ACTIONS DEVCON5 HTML5 Summit 5 OCT 2012 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • 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 32Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 33Tuesday, October 16, 12
    • 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 34Tuesday, October 16, 12
    • 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 35Tuesday, October 16, 12
    • 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 36Tuesday, October 16, 12
    • 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 37Tuesday, October 16, 12
    • 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 38Tuesday, October 16, 12
    • 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 39Tuesday, October 16, 12
    • 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 40Tuesday, October 16, 12
    • Web Workers Hacks from ‘HTML5 Hacks’Tuesday, October 16, 12
    • 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 42Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js $.get("test.php").done(function() {   alert("$.get succeeded"); }); DEVCON5 HTML5 Summit 5 OCT 2012 43Tuesday, October 16, 12
    • 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 44Tuesday, October 16, 12
    • 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 45Tuesday, October 16, 12
    • disneybaby.com Iris.js Distributed EventsTuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js dbaby.Iris = (function ($) { function one(){}; function two(){}; function init(){}; // onload $(init); // public methods return { one: one, two: two }; }(jQuery)); DEVCON5 HTML5 Summit 5 OCT 2012 47Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js 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);! } }; DEVCON5 HTML5 Summit 5 OCT 2012 48Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js 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 were 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; } DEVCON5 HTML5 Summit 5 OCT 2012 49Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js 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); }); }); } } } DEVCON5 HTML5 Summit 5 OCT 2012 50Tuesday, October 16, 12
    • SSJS EventsTuesday, October 16, 12
    • 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 52Tuesday, October 16, 12
    • 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.logd true //return value > example_emitter.emit("print", "message"); message //console.logd true //return value > example_emitter.emit("unhandled"); false //return value DEVCON5 HTML5 Summit 5 OCT 2012 53Tuesday, October 16, 12
    • 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 54Tuesday, October 16, 12
    • Robodeck Demo Full Stack Evented SocketsTuesday, October 16, 12
    • Beaglebone Todo Collaborative Micro Network ServerTuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 57Tuesday, October 16, 12
    • Rapid Prototyping HTML5 Applications with Node.js DEVCON5 HTML5 Summit 5 OCT 2012 58Tuesday, October 16, 12
    • Yeoman Demo Front End Production AccelerationTuesday, October 16, 12
    • Thanks!Tuesday, October 16, 12