Rapid Prototyping HTML5 Applications with Node.js - Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Deﬁning HTML5 Applications Tuesday, October 16, 12

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Trends Tuesday, October 16, 12

Slide 32

Slide 32 text

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. •Quantiﬁed Selves 14 http://designmind.frogdesign.com/blog/frogs-2012-technology-trend-predictions.html Tuesday, October 16, 12

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Prototypes Tuesday, October 16, 12

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Ubiquitous JavaScript Tuesday, October 16, 12

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Node.js and SSJS Tuesday, October 16, 12

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Reactionary Systems with Async JavaScript Tuesday, October 16, 12

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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 ﬁrst event off the queue and runs any handlers that were registered to that event EVENTS EVENT QUEUE EVENT LOOP ACTIONS Tuesday, October 16, 12

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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 ﬁre until the runtime is free. element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Tuesday, October 16, 12

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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 ﬁltering in Canvas. •Updating many rows of Local Storage DB. Tuesday, October 16, 12

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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 ﬁ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 Tuesday, October 16, 12

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

SSJS Events Tuesday, October 16, 12

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Thanks! Tuesday, October 16, 12