Rapid Prototyping HTML5 Applications with Node.js

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

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

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

with Node.js what ? 4 •Deﬁne HTML5 Apps •Tech Trends & Next Generation Web Applications •SSJS with Node.js Tuesday, October 16, 12

with Node.js why ? 5 •Rapid Prototyping •Production Acceleration Tuesday, October 16, 12

with Node.js how ? 6 •Ubiquitous JavaScript •Event Driven, Reactionary Systems Tuesday, October 16, 12

with Node.js What this is not ? 7 •Comparison with other Evented Web Servers •Node.js Production Deployment Best Practices Tuesday, October 16, 12

Deﬁning HTML5 Applications Tuesday, October 16, 12

with Node.js Let’s use HTML5 :/ 9 Tuesday, October 16, 12

with Node.js 10 Tuesday, October 16, 12

with Node.js HTML5 Connectivity 11 http://marakana.com/s/peter_lubbers_the_html5_connectivity_revolution_devcon5,1170/index.html Tuesday, October 16, 12

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

Trends Tuesday, October 16, 12

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

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

Prototypes Tuesday, October 16, 12

with Node.js Types of Prototypes •Hacks •Agile Spikes •Simulations •UX Prototypes 17 Tuesday, October 16, 12

Ubiquitous JavaScript Tuesday, October 16, 12

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

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

Node.js and SSJS Tuesday, October 16, 12

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

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

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

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

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

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

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

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

Reactionary Systems with Async JavaScript Tuesday, October 16, 12

with Node.js 32 EVENTS EVENT QUEUE EVENT LOOP ACTIONS Tuesday, October 16, 12

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

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

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

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

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

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

with Node.js 32 EVENTS EVENT QUEUE EVENT LOOP ACTIONS Tuesday, October 16, 12

with Node.js 32 element.addEventListener('click', function() { //do something }); EVENTS EVENT QUEUE EVENT LOOP ACTIONS Tuesday, October 16, 12

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

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

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

with Node.js 34 var a = false; asyncFunction(function({ console.assert(a, 'a should be true'); }) a = true; Tuesday, October 16, 12

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

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

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

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

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

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

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

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

with Node.js 43 $.get("test.php").done(function() { alert("$.get succeeded"); }); Tuesday, October 16, 12

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

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

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

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

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

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

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

SSJS Events Tuesday, October 16, 12

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

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

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

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

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

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

Thanks! Tuesday, October 16, 12

Rapid Prototyping HTML5 Applications with Node.js

Rapid Prototyping HTML5 Applications with Node.js

More Decks by Jesse Cravens

Other Decks in Programming

Featured

Transcript