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