Client Killed the Server Star

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

Web 1.0: The dumb client

Web 2.0: So Happy Together?

Web 3.0: The Server Sidekick

Why? The future is...

Server = Servant

Communications Hub

Sync state change between clients

Cached, Broad Queries (Not Fine-Grained)

Batch communication

How?

App Engine

Memcache

Request/Response

Datastore

Client = Master

Resource Storage

Data Storage

State Management

Heavy Computation

Dynamic Graphics

Bitmap Manipulation

How?

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:

localStorage

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

0 comments

Notes on slide 1

1 Favorite