Node Powered Mobile

Node Powered Mobile
By Tim Caswell

Saturday, June 5, 2010

Simple but Different


What is needed


What is needed
• Simple Interface

• Light Code

• Networked Data

• Real-Time Data

• Free Deployment

• Open Workﬂow


What is needed
• Simple Interface • HTML, SVG, CSS

• Light Code • JavaScript

• Networked Data • HTTP Services

• Real-Time Data • PubSub

• Free Deployment • Browser Apps

• Open Workﬂow • It’s just text!


Connect
We’ll use a new node
framework that “connects”
the mobile browser to data
on the server.


It’s like Japanese Legos

Pre-Built Blocks
Connect.createServer([
{filter: "log"},
{filter: "body-decoder"},
{filter: "conditional-get"},
{filter: "cache"},
{filter: "gzip"},
{provider: "cache-manifest", root: root},
{provider: "static", root: root}
]);


And easy too!

method-override.js
var key;
// Initialize any state (on server startup)
exports.setup = function (env) {
key = this.key || "_method";
};
// Modify the request stream (on request)
exports.handle = function(err, req, res, next){
if (key in req.body) {
req.method = req.body[key].toUpperCase();
}
next();
};

response-time.js
exports.handle = function(err, req, res, next){
var start = new Date,
writeHead = res.writeHead;

res.writeHead = function(code, headers){
res.writeHead = writeHead;
headers['X-Response-Time'] =
(new Date - start) + "ms";
res.writeHead(code, headers);
};

next();
};

Well, actually, it’s
not always easy.

static.js


static.js
var fs = require('fs'),
Url = require('url'),
Path = require('path');

var lifetime = 1000 * 60 * 60; // 1 hour browser cache lifetime

var DEFAULT_MIME = 'application/octet-stream';

module.exports = {

setup: function (env) {
this.root = this.root || process.cwd();
},

handle: function (err, req, res, next) {
// Skip on error
if (err) {
next();
return;
}
var url = Url.parse(req.url);

var pathname = url.pathname.replace(/..+/g, '.'),
filename = Path.join(this.root, pathname);

if (filename[filename.length - 1] === "/") {
filename += "index.html";
}


static.js
// Buffer any events that fire while waiting on the stat.
var fs = require('fs'), var events = [];
Url = require('url'), function onData() {
Path = require('path'); events.push(["data"].concat(Array.prototype.slice.call(arguments)));
}
var lifetime = 1000 * 60 * 60; // 1 hourfunction onEnd() {
browser cache lifetime
events.push(["end"].concat(Array.prototype.slice.call(arguments)));
}
req.addListener("data", onData);
module.exports = { req.addListener("end", onEnd);

setup: function (env) { fs.stat(filename, function (err, stat) {
}, // Stop buffering events
req.removeListener("data", onData);
handle: function (err, req, res, next) {req.removeListener("end", onEnd);
// Skip on error
if (err) { // Fall through for missing files, thow error for other problems
next(); if (err) {
return; if (err.errno === process.ENOENT) {
} next();
var url = Url.parse(req.url); // Refire the buffered events
events.forEach(function (args) {
req.emit.apply(req, args);
var pathname = url.pathname.replace(/..+/g, '.'),
});
return;
if (filename[filename.length - 1] === "/") {
}


static.js
}
events.push(["end"].concat(Array.prototype.slice.call(arguments)));
}
module.exports = { req.addListener("end", onEnd);

(err);
setup: function (env) { fs.stat(filename, function (err, stat) {
rn;
}, // Stop buffering events
req.removeListener("end", onEnd);
the file directly using (err, req, res, next) {
handle: function buffers
ile(filename, function error data) {
// Skip on (err,
if (err) { // Fall through for missing files, thow error for other problems
err) {
next(); if (err) {
next(err);
return;
} next();
var url = Url.parse(req.url); // Refire the buffered events
writeHead(200, {
ontent-Type": Mime.type(filename),
req.emit.apply(req, args);
ontent-Length": pathname = url.pathname.replace(/..+/g, '.'),
var data.length,
});
ast-Modified": stat.mtime.toUTCString(),
return;
/ Cache in browser for 1 year
ache-Control": (filename[filename.length - 1] === "/") {
if "public max-age=" + 31536000
end(data); }


static.js
}
}; events.push(["end"].concat(Array.prototype.slice.call(arguments)));
}
// Mini mime module for static file serving
module.exports = { var req.addListener("end", onEnd);
Mime = {

(err); type: function getMime(path) (err, stat) {
setup: function (env) { fs.stat(filename, function {
rn; var index = path.lastIndexOf(".");
}, if (index < buffering events
// Stop 0) {
return DEFAULT_MIME;
} req.removeListener("end", onEnd);
the file directly using (err, req, res, next) { type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
var
ile(filename, // function error data) {
Skip on (err,
if (err) { return Fall through for missing files, thow error "; charset=utf-8" : type;
// (/(text|javascript)/).test(type) ? type + for other problems
err) { },
next(); if (err) {
next(err);
return; TYPES : { ".3gp"
} next(); "video/3gpp",
:
var url = Url.parse(req.url); ".a" Refire the buffered events
// : "application/octet-stream",
writeHead(200, { ".ai" : "application/postscript",
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args);
: "audio/x-aiff",
ontent-Length": pathname = url.pathname.replace(/..+/g, '.'), "audio/x-aiff",
var data.length,
".aiff" :
});
ast-Modified": stat.mtime.toUTCString(), ".asc"
return; "application/pgp-signature",
:
/ Cache in browser for 1 year ".asf" : "video/x-ms-asf",
".asm" : "text/x-asm",
".asx" : "video/x-ms-asf",
end(data); }
".atom" : "application/atom+xml",
".au" : "audio/basic",
Saturday, June 5, 2010 ".avi" : "video/x-msvideo",

static.js
var fs = require('fs'), : "video/x-flv",var events = [];
".flv"
".for" : function onData() {
Url = require('url'), "text/x-fortran",
".gem" events.push(["data"].concat(Array.prototype.slice.call(arguments)));
: "application/octet-stream",
}
".gemspec" : "text/x-script.ruby",
var lifetime = ".gif" 60: *"image/gif", function onEnd() {
1000 * 60; // 1 hour browser cache lifetime
".gz" : "application/x-gzip",
".h" : "text/x-c", }
".hh" : "text/x-c",
module.exports ".htm"
= { var Mime = {
: "text/html", req.addListener("end", onEnd);
(err); ".html" : "text/html",
rn; setup: function (env) "image/vnd.microsoft.icon", getMime(path) (err, stat) {
".ico" : { type: function
fs.stat(filename, function {
var index = path.lastIndexOf(".");
".ics" : "text/calendar",
}, ".ifb" : "text/calendar", (index < buffering events
if // Stop 0) {
".iso" : "application/octet-stream",
}
: req, res, next) {req.removeListener("end", onEnd);
the file directly ".jar" (err,"application/java-archive",
using var type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
ile(filename, // function error: data) {
Skip".java"
on (err, "text/x-java-source",
if (err) { return Fall through for missing files, thow error "; charset=utf-8" : type;
// (/(text|javascript)/).test(type) ? type + for other problems
".jnlp" : "application/x-java-jnlp-file",
err) { },
next();
".jpeg" : "image/jpeg", if (err) {
next(err);
return;
".jpg" : "image/jpeg", if (err.errno === process.ENOENT) {
return; TYPES : { ".3gp" : "video/3gpp",
} ".js" : "application/javascript", next();
var url = Url.parse(req.url); ".a" Refire the buffered events
writeHead(200, { ".json" : "application/json", ".ai" : "application/postscript",
".log" : "text/plain", events.forEach(function (args) {
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args);
: "audio/x-aiff",
var data.length, "audio/x-mpegurl",
".m3u" :
".aiff" :
".m4v" : "video/mp4", });
:
/ Cache in browser ".man" year "text/troff",
for 1 :
".asf" : "video/x-ms-asf",
".mathml" : "application/mathml+xml",
".asm" : "text/x-asm",
filename += : "application/mbox",
".mbox" "index.html";
end(data); } ".mdoc" : "text/troff",
".me" : "text/troff", ".atom" : "application/atom+xml",
".mid" : "audio/midi",

static.js
// Buffer any events that fire while waiting "text/x-c",
".cc" : on the stat.
".flv" ".chm" : "application/vnd.ms-htmlhelp",
".for" : function onData() { ".class" : "application/octet-stream",
: "application/octet-stream", ".com" : "application/x-msdownload",
}
".gemspec" : "text/x-script.ruby", ".conf" : "text/plain",
1000 * 60; // 1 hour browser cache lifetime ".cpp" : "text/x-c",
".crt" : "application/x-x509-ca-cert",
".h" : "text/x-c", } ".css" : "text/css",
req.addListener("data", onData); ".csv" : "text/csv",
".hh" : "text/x-c",
module.exports ".htm"= { var Mime = {
: "text/html", req.addListener("end", onEnd); ".cxx" : "text/x-c",
".html" : "text/html", ".deb" : "application/x-debian-package",
(err);
fs.stat(filename, function { ".der" : "application/x-x509-ca-cert",
var index = path.lastIndexOf(".");".diff" : "text/x-diff",
if // Stop 0) { ".djv" : "image/vnd.djvu",
".djvu" : "image/vnd.djvu",
}
: req, res, next) {req.removeListener("end", onEnd); ".dll" : "application/x-msdownload",
the file directly ".jar" (err,"application/java-archive",
using var type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
// function error: data) {
Skip".java"
on (err, "text/x-java-source", ".dmg" : "application/octet-stream",
ile(filename, return Fall through for missing files, thow error "; charset=utf-8" : type;
if (err) { // (/(text|javascript)/).test(type) ? : "application/msword",
".jnlp" : "application/x-java-jnlp-file", ".doc" type + for other problems
err) { },
next();
".jpeg" : "image/jpeg", if (err) { ".dot" : "application/msword",
next(err);
return;
".jpg" : "image/jpeg", if (err.errno === process.ENOENT) { "application/xml-dtd",
".dtd" :
return; TYPES : { ".3gp" : "video/3gpp", ".dvi"
} ".js" : "application/javascript", next(); : "application/x-dvi",
var url = Url.parse(req.url); ".a" Refire the buffered events : "application/java-archive",
".ear"
".log" : "text/plain", events.forEach(function (args) : "message/rfc822",
".eml" {
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args); : "application/postscript",
: "audio/x-aiff",
".eps"
".m3u" :
".aiff" :
".m4v" : "video/mp4", }); ".exe" : "application/x-msdownload",
: ".f" : "text/x-fortran",
for 1 :
".f77" : "text/x-fortran",
".asm" : "text/x-asm", ".f90"
".mbox" "index.html"; : "text/x-fortran",

static.js
// Buffer any events that fire while waiting "text/x-c",
".cc" : on the stat.
".flv" ".chm" : "application/vnd.ms-htmlhelp",
".for" : function onData() { ".class" : "application/octet-stream",
: "application/octet-stream", ".com" : "application/x-msdownload",
}
".gemspec" : "text/x-script.ruby", ".conf" : "text/plain",
1000 * 60; // 1 hour browser cache lifetime ".cpp" : "text/x-c",
".crt" : "application/x-x509-ca-cert",
".h" : "text/x-c", } ".css" : "text/css",
req.addListener("data", onData); ".csv" : "text/csv",
".hh" : "text/x-c",
module.exports ".htm"= { var Mime = {
: "text/html", req.addListener("end", onEnd); ".cxx" : "text/x-c",
".html" : "text/html", ".deb" : "application/x-debian-package",
(err);
fs.stat(filename, function { ".der" : "application/x-x509-ca-cert",
var index = path.lastIndexOf(".");".diff" : "text/x-diff",
if // Stop 0) { ".djv" : "image/vnd.djvu",
".djvu" : "image/vnd.djvu",
} req.removeListener("end", onEnd);
".dll" : "application/x-msdownload",
the file directly ".jar"".bmp" req, "image/bmp", type = Mime.TYPES[path.substring(index).toLowerCase()] || DEFAULT_MIME;
handle: function (err,"application/java-archive",
using buffers : res, next) {
:
var
// function error: data) {
Skip".java"
on (err, "text/x-java-source",
".bz2" : "application/x-bzip2", ".dmg" : "application/octet-stream",
ile(filename, return (/(text|javascript)/).test(type) ? : "application/msword", : type;
type + "; charset=utf-8"
err) { if (err) { : "text/x-c", // Fall through for missing files, thow error for other problems
".jnlp" : "application/x-java-jnlp-file",
".c" ".doc"
}, if (err) { ".dot" : "application/msword",
next(err); next(); ".cab"
".jpeg" : "image/jpeg",
: "application/vnd.ms-cab-compressed",
return;
".jpg" : "image/jpeg", if (err.errno === process.ENOENT) { "application/xml-dtd",
".dtd" :
return; TYPES : { ".3gp" : "video/3gpp", ".dvi"
} ".js" : "application/javascript", next(); : "application/x-dvi",
var url = Url.parse(req.url); ".a" Refire the buffered events : "application/java-archive",
".ear"
".log" : "text/plain", events.forEach(function (args) : "message/rfc822",
".eml" {
ontent-Type": Mime.type(filename), ".aif" req.emit.apply(req, args); : "application/postscript",
: "audio/x-aiff",
".eps"
".m3u" :
".aiff" :
".m4v" : "video/mp4", }); ".exe" : "application/x-msdownload",
: ".f" : "text/x-fortran",
for 1 :
".f77" : "text/x-fortran",
".asm" : "text/x-asm", ".f90"
".mbox" "index.html"; : "text/x-fortran",

Built-in Filter Modules
• Authentication • Error Handler

• Authorization • Gzip

• Body Decoder • Log

• Cache • Method Override

• Conditional Get • Response Time

• Debug • Session


Built-in Data Providers

• Static • Cache Manifest

• Rest • Direct

• Router • JSON-RPC

• PubSub • More...


Raphaël JS
Raphaël is a small
JavaScript library that
should simplify your
work with vector
graphics on the web.


Multi-Touch Vectors

http://vimeo.com/11610421


multitouch-demo.js
window.onload = function () {
var R = Raphael(0, 0, "100%", "100%"),
r = R.circle(100, 100, 50),
g = R.circle(210, 100, 50),
b = R.circle(320, 100, 50),
p = R.circle(430, 100, 50);
var start = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.animate({r: 70, opacity: .25}, 500, ">");
},
move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
};
R.set(r, g, b, p).drag(move, start, up);
};

Creating Shapes
var R = Raphael(0, 0, "100%", "100%"),
r = R.circle(100, 100, 50)
.attr({fill: "hsb(0, 1, 1)"}),
g = R.circle(210, 100, 50)
.attr({fill: "hsb(.3, 1, 1)"}),
b = R.circle(320, 100, 50)
.attr({fill: "hsb(.6, 1, 1)"}),
p = R.circle(430, 100, 50)
.attr({fill: "hsb(.8, 1, 1)"});


Attaching Events
function start() {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
}
function move(dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
}
function up() {
}
R.set(r, g, b, p).drag(move, start, up);


Let’s combine them!


• Serving static assets (HTML, CSS,
JS)

• Live Interaction (Pub Sub)

• Performance Tweaks (Cache, Gzip)

• Ofﬂine Mode (Cache Manifest)

• HTTP Request Logging


app.js (stack)
require.paths.unshift("./lib");
var Connect = require('connect');
var root = __dirname + "/public";

module.exports = Connect.createServer([
{filter: "log"},
{filter: "body-decoder"},
{provider: "pubsub", route: "/stream",
logic: Backend},
{filter: "conditional-get"},
{filter: "cache"},
{filter: "gzip"},
{provider: "cache-manifest", root: root},
{provider: "static", root: root}
]);

app.js (Backend)
var Backend = {
subscribe: function (subscriber) {
if (subscribers.indexOf(subscriber) < 0) {
subscribers.push(subscriber);
}
},
unsubscribe: function (subscriber) {
var pos = subscribers.indexOf(subscriber);
if (pos >= 0) {
subscribers.slice(pos);
}
},
publish: function (message, callback) {
subscribers.forEach(function (subscriber) {
subscriber.send(message);
});
callback();
}
};

index.html
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Node + Raphaël</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="raphael.js"></script>
<script src="client.js"></script>
</head>
<body>
<div id="holder"></div>
</body>
</html>


Demo Time!


http://github.com/extjs/connect

http://twitter.com/creationix

http://raphaeljs.com

http://nodejs.org


Any
Questions
?


Node Powered Mobile

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to Node Powered Mobile (20)

Recently uploaded (20)

Node Powered Mobile