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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (6)

Similar to Node Powered Mobile

Similar to Node Powered Mobile (20)

Recently uploaded

Recently uploaded (20)

Node Powered Mobile