Download - Client Killed the Server Star
![Page 1: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/1.jpg)
Client Killed the Server Star
http://tr.im/clientkilledserver
@pamelafox
![Page 2: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/2.jpg)
Web 1.0: The dumb client
![Page 3: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/3.jpg)
Web 2.0: So Happy Together?
![Page 4: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/4.jpg)
Web 3.0: The Server Sidekick
![Page 5: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/5.jpg)
Why? The future is...
![Page 6: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/6.jpg)
Server = Servant
• Communications Hub
• Sync state change between clients
• Cached, Broad Queries (Not Fine-Grained)
• Batch communication
![Page 7: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/7.jpg)
How?
![Page 8: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/8.jpg)
App Engine
• Memcache
• Request/Response
• Datastore
![Page 9: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/9.jpg)
Client = Master
• Resource Storage
• Data Storage
• State Management
• Heavy Computation
• Dynamic Graphics
• Bitmap Manipulation
![Page 10: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/10.jpg)
How?
![Page 11: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/11.jpg)
HTML 5
<!DOCTYPE HTML> <html> <head><title>HTML 5</title></head> <body>Hello World!</body> </html>
![Page 12: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/12.jpg)
Gears
LocalServer Database WorkerPool Blob Desktop Geolocation
![Page 13: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/13.jpg)
Wrappers
• Dojo (HTML5/Gears Database)
• ActiveRecord (Gears/AIR/HTML5/JSON/Server DB)
• HTML5/Gears (Manifest)
• Excanvas (Canvas/VML)
• RaphaelJS (VML/SVG)
![Page 14: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/14.jpg)
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
![Page 15: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/15.jpg)
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.htmlhttp://www.foo.com/header.pnghttp://www.foo.com/blah/blahsomethingElse.jpg
Demo
![Page 16: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/16.jpg)
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
![Page 17: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/17.jpg)
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
![Page 18: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/18.jpg)
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
![Page 19: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/19.jpg)
Gears: LocalServer
• FavIcoop
![Page 20: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/20.jpg)
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
![Page 21: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/21.jpg)
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
![Page 22: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/22.jpg)
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
![Page 23: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/23.jpg)
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
![Page 24: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/24.jpg)
Gears: Database• Bloggears
• AutoDesk Draw
• MySpace Messages
Also: RTMilk, GMail/GDocs/GReader, Zoho, WordPress, AJAX Helper
![Page 25: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/25.jpg)
State Management
Store session data on the client. Server is stateless.• HTML 5: sessionStorage
![Page 26: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/26.jpg)
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
![Page 27: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/27.jpg)
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
![Page 28: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/28.jpg)
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));};
![Page 29: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/29.jpg)
Gears: WorkerPoolCreate 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.jsvar 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
![Page 30: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/30.jpg)
Gears: WorkerPool
Sudoku
Prime Calculation
Mandelbrot (with & without )
Others: GMail, MySpace
![Page 31: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/31.jpg)
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
![Page 32: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/32.jpg)
HTML 5: CanvasCreate <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
![Page 33: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/33.jpg)
HTML 5: Canvas
Polygonzo
MontageMaker
Car Navigation
More: Box2dJS , Yahoo Pipes, 3D w/ 2D
![Page 34: Client Killed the Server Star](https://reader036.vdocuments.net/reader036/viewer/2022081514/554923f9b4c90547498baabf/html5/thumbnails/34.jpg)
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!