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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Client Killed the Server Star

Similaire à Client Killed the Server Star (20)

Plus de Pamela Fox

Plus de Pamela Fox (20)

Dernier

Dernier (20)

Client Killed the Server Star

Notes de l'éditeur