Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Client Killed the Server Star

  • 7,667 views
Uploaded on

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......

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,667
On Slideshare
7,661
From Embeds
6
Number of Embeds
2

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 6

http://www.slideshare.net 3
http://localhost 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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(&quot;Not cached yet&quot;);
    • }
    • appCache.oncached = function() {
    •    alert(&quot;Cached now!&quot;);
    • }
    • 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:
    • { &quot;betaManifestVersion&quot;: 1, 
    •    &quot;version&quot;: &quot;v1&quot;, 
    •    &quot;entries&quot;: [ { &quot;url&quot;: &quot;managed_store.html&quot;, 
    •                  &quot;src&quot;: &quot;managed_store_v1.html&quot; }, ...]}
    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:
        • localStorage  
        • 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(&quot;MyDB&quot;, &quot;1.0&quot;, &quot;Example&quot;, 200000);
    • db = openDatabase(&quot;NoteTest&quot;, &quot;1.0&quot;, &quot;HTML5 Database API example&quot;, 200000); db.transaction(function (tx) { 
    •    tx.executeSql(&quot;INSERT INTO WebKitStickyNotes 
    •    (id, note, timestamp, left, top, zindex) VALUES 
    •    (?, ?, ?, ?, ?, ?)&quot;, 
    •    [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=&quot;step3.html&quot; method=post onsubmit=&quot;save(n2)&quot;> 
    •    Adjective: <input name=n2> 
    •    <input type=&quot;submit&quot; value=&quot;Next...&quot;> 
    • </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=&quot;canvas&quot; width=&quot;150&quot; height=&quot;150&quot;></canvas>
    • Then call functions on CanvasRenderingContext2D:
    • var canvas = document.getElementById(&quot;canvas&quot;);
    • var ctx = canvas.getContext(&quot;2d&quot;);
    • ctx.fillStyle = &quot;rgb(200,0,0)&quot;;
    • ctx.fillRect (10, 10, 55, 50);
    • ctx.fillStyle = &quot;rgba(0, 0, 200, 0.5)&quot;;
    • 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!