View
6.310
Download
0
Category
Preview:
DESCRIPTION
Most modern websites still place a large burden on the server, constantly sending it requests and asking it to do heavy computations. In the brave new world, the client is king and the server is its faithful shadow. In this talk, we'll look at how cutting-edge technology like Gears, HTML5, and Google App Engine can be used to create websites where the caching, storage, and computing is done primarily in the browser/desktop and the server is used merely as a backup store. Presented at Webstock 2009. Original version (not PPTed): http://tr.im/clientkilledserver
Citation preview
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.htmlhttp://www.foo.com/header.pnghttp://www.foo.com/blah/blahsomethingElse.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: 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
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: 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
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!
Recommended