rapid prototyping html5 applications with node.js

Rapid Prototyping HTML5 Applications with Node.js5 OCTOBER 2012

Tuesday, October 16, 12

@jdcravensgithub.com/jessecravens

HacksHTML5

Tips & Tools for Creating Interactive Web Applications

Jesse Cravens & Jeff Burtoft


5 OCT 2012DEVCON5 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




what ?

4

•Define HTML5 Apps•Tech Trends & Next Generation Web Applications•SSJS with Node.js




why ?

5

•Rapid Prototyping•Production Acceleration




how ?

6

•Ubiquitous JavaScript•Event Driven, Reactionary Systems




What this is not ?

7

•Comparison with other Evented Web Servers•Node.js Production Deployment Best Practices


Defining HTML5 Applications




Let’s use HTML5 :/

9




10




HTML5 Connectivity

11

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






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


Trends




frog thought leadership

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

•Quantified Selves

14

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)

15


Prototypes




Types of Prototypes

•Hacks•Agile Spikes•Simulations•UX Prototypes

17


Ubiquitous JavaScript




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

19




20




• @jdcravens• github.com/jessecravens

21

Single Page ApplicationFrameworks

Cross Platform Native Mobile Applications

OS IndependentDesktop Applications

Web Based IDEs

Remote Sensor APIs

HTML5 Games and Graphics

InternetOS OtherLibraries

sencha 2 apache cordova appJS cloud9node-arduino construct 2 boot2Gecko

(FirefoxOS) depthJS

angularJS titanium appcelerator

windows8, winJS skywriter johnny-five 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


Node.js and SSJS




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

23




•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




•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




•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




27

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

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

app.listen(3000);




28

// all environmentsapp.configure(function(){ app.set('title', 'My Application');})

// development onlyapp.configure('development', function(){ app.set('db uri', 'localhost/dev');})

// production onlyapp.configure('production', function(){ app.set('db uri', 'n.n.n.n/prod');})




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




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 eventuallyrewrite in something 'more production-worthy'.

Or not.

- voodootikigod

30


Reactionary Systemswith Async JavaScript




32

EVENTS

EVENTQUEUE

EVENT LOOP

ACTIONS




32

JavaScript runs code from an event loop that takes events off a queue of all the eventsthat have happened in the browser.

EVENTS

EVENTQUEUE

EVENT LOOP

ACTIONS




32


“click”

EVENTS

EVENTQUEUE

EVENT LOOP

ACTIONS
