Client Killed the Server Star

Client Killed the Server Star
http://tr.im/clientkilledserver
@pamelafox

Server = Servant
• Communications Hub
• Sync state change between clients
• Cached, Broad Queries (Not Fine-Grained)
• Batch communication

App Engine
• Memcache
• Request/Response
• Datastore

Client = Master
• Resource Storage
• Data Storage
• State Management
• Heavy Computation
• Dynamic Graphics
• Bitmap Manipulation

HTML 5
<!DOCTYPE HTML>
<html>
<head><title>HTML 5</title></head>
<body>Hello World!</body>
</html>

Gears
LocalServer Database WorkerPool Blob Desktop Geolocation

Wrappers
• Dojo (HTML5/Gears Database)
• ActiveRecord (Gears/AIR/HTML5/JSON/Server DB)
• HTML5/Gears (Manifest)
• Excanvas (Canvas/VML)
• RaphaelJS (VML/SVG)

Resource Storage
Only ask the server for resources when the app's been
updated.
Resources = JS, CSS, HTML, IMGs, etc.
• HTML 5: Application Cache, Manifest
• Gears: LocalServer

HTML 5: Manifest
Point to manifest file in HTML:
<html manifest=”foo.manifest”>
Create foo.manifest:
CACHE MANIFEST
# v1
# This is a comment.
http://www.foo.com/index.html
http://www.foo.com/header.png
http://www.foo.com/blah/blah
somethingElse.jpg
Demo

HTML 5: ApplicationCache
Use ApplicationCache object and window.applicationCache:
var appCache = window.applicationCache;
if (appCache.status ==
ApplicationCache.UNCACHED) {
alert("Not cached yet");
}
appCache.oncached = function() {
alert("Cached now!");
}
Also available:
update, swapCache, onchecking, onerror,
onnoupdate, ondownloading, onprogress,
onupdateready, oncached, onobsolete

Gears: LocalServer
Use ResourceStore to grab array of files:
var pageFiles = [
location.pathname,
'gears_init.js'
];
var localServer =
google.gears.factory.create('beta.localserver', '1.0');
var store = localServer.openStore(this.storeName) ||
localServer.createStore(this.storeName);
store.capture(pageFiles, function(url, success, captureId) {
console.log(url + ' capture ' + (success ? 'succeeded' :
'failed'));
});
Demo

Gears: LocalServer
Use ManagedResourceStore to use manifest file:
var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore(STORE_NAME);
store.manifestUrl = 'manifest_v1.json';
store.checkForUpdate();
manifest_v1.json:
{ "betaManifestVersion": 1,
"version": "v1",
"entries": [ { "url": "managed_store.html",
"src": "managed_store_v1.html" }, ...]}
Demo

Gears: LocalServer
• FavIcoop

Data Storage
Persist data locally, both in DBs and hash tables.
Issue complex queries on the client, not on the server.
• HTML 5:
o localStorage
o Database
• Gears: Database

HTML 5: localStorage
Store strings in keys using Storage object &
window.localStorage:
function doSave() {
var filename = document.forms.editor.filename.value;
var data = document.forms.editor.data.value;
localStorage.setItem('file-' + filename, data);
}
function doOpen() {
var filename = document.forms.editor.filename.value;
document.forms.editor.data.value =
localStorage.getItem('file-' + filename);
}
Also use: removeItem, clear, window.onstorage
Demo

HTML 5: Database
Open DB with window.openDatabase, then use Database
object:
var db = openDatabase("MyDB", "1.0", "Example", 200000);
db = openDatabase("NoteTest", "1.0", "HTML5 Database API
example", 200000);
db.transaction(function (tx) {
tx.executeSql("INSERT INTO WebKitStickyNotes
(id, note, timestamp, left, top, zindex) VALUES
(?, ?, ?, ?, ?, ?)",
[note.id, note.text, note.timestamp, note.left, note.top,
note.zIndex]);
});
Demo

Gears: Database
Open DB, then execute SQL statements
var db = google.gears.factory.create('beta.database',
'1.0');
db.open('database-demo');
db.execute('create table if not exists Demo (Phrase
varchar(255), Timestamp int)');
db.execute('insert into Demo values (?, ?)', [phrase,
currTime]);
var rs = db.execute('select * from Demo order by Timestamp
desc');
Demo

Gears: Database
• Bloggears
• AutoDesk Draw
• MySpace Messages
Also: RTMilk, GMail/GDocs/GReader, Zoho,
WordPress, AJAX Helper

State Management
Store session data on the client. Server is stateless.
• HTML 5: sessionStorage

HTML 5: sessionStorage
Use window.sessionStorage with Storage object:
<form action="step3.html" method=post
onsubmit="save(n2)">
Adjective: <input name=n2>
<input type="submit" value="Next...">
</form>
function save(element) {
sessionStorage.setItem(element.name,element.value);
}
Also use: getItem, removeItem, clear, window.onstorage
Demo

Heavy Computation
JS is surprisingly fast at non-DOM operations.
Proof: TSP Solver , Clustering, Spatial queries
But if in-page JS isn't fast enough or locks up the UI, offload
the task into a worker.
Use for: Encryption, DB tasks, Syncing, Farming
• Web Workers
• Gears: WorkerPool

Web Worker Spec
Create a worker and send messages to it:
var searcher = new Worker('searcher.js');
function search(query) {
searcher.postMessage(query);
}
Respond to messages in worker JS:
importScripts('io.js');
onmessage = function (event) {
postMessage(get('search.cgi?' + event.data));
};

Gears: WorkerPool
Create worker IDs in WorkerPool, send/receive messages:
workerPool.onmessage = function(a, b, message) {
insertRow('Async Result:' + message.body);
};
var childId = workerPool.createWorkerFromUrl('worker.js');
workerPool.sendMessage(2501234, childId);
// worker.js
var wp = google.gears.workerpool;
wp.onmessage = function(messageText, senderId, message) {
wp.sendMessage(identity(message.body), senderId);
};
function identity(stuff) {
// do hard math with stuff
}
Demo

Gears: WorkerPool
Sudoku
Prime Calculation
Mandelbrot (with & without )
Others: GMail, MySpace

Dynamic Graphics
Render graphics or manipulate bitmaps in JS. No servers or
plugins needed to generate them.
Both 2d and 3d graphics can be done in browser.
• HTML 5: Canvas
• SVG

HTML 5: Canvas
Create <canvas> element:
<canvas id="canvas" width="150"
height="150"></canvas>
Then call functions on CanvasRenderingContext2D:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
Also use: scale, rotate, translate, transform,
createGradientPattern, bezierCurveTo,
putImageData, filLText, etc.
Demo

HTML 5: Canvas
Polygonzo
MontageMaker
Car Navigation
More: Box2dJS , Yahoo Pipes, 3D w/ 2D

Get Involved!
HTML 5/Web Worker:
• Join mailing list.
• Subscribe two twitter updates (@whatwg).
• Experiment with features using nightly builds:
• IE 8 beta, Opera Labs , MineField (FF), Webkit
Gears:
• Join the project.
• Discuss in group.
• Make real apps!

Client Killed the Server Star

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Client Killed the Server Star

Similar to Client Killed the Server Star (20)

More from Pamela Fox

More from Pamela Fox (20)

Recently uploaded

Recently uploaded (20)

Client Killed the Server Star

Editor's Notes