client killed the server star
Post on 06-May-2015
6.316 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
top related