![Gears: LocalServer
Use ResourceStore to grab array of files:
var pageFiles = [
location.pathname,
'gears_init.js'
];
var l...](https://image.slidesharecdn.com/clientkilledtheserverstar-1235081217592719-1/85/client-killed-the-server-star-17-320.jpg?cb=1422642134)
Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
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!