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)
• Bat...
How?
App Engine
• Memcache
• Request/Response
• Datastore
Client = Master
• Resource Storage
• Data Storage
• State Management
• Heavy Computation
• Dynamic Graphics
• Bitmap Manip...
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...
Resource Storage
Only ask the server for resources when the app's been
updated.
Resources = JS, CSS, HTML, IMGs, etc.
• HT...
HTML 5: Manifest
Point to manifest file in HTML:
<html manifest=”foo.manifest”>
Create foo.manifest:
CACHE MANIFEST
# v1
#...
HTML 5: ApplicationCache
Use ApplicationCache object and window.applicationCache:
var appCache = window.applicationCache;
...
Gears: LocalServer
Use ResourceStore to grab array of files:
var pageFiles = [
location.pathname,
'gears_init.js'
];
var l...
Gears: LocalServer
Use ManagedResourceStore to use manifest file:
var localServer = google.gears.factory.create('beta.loca...
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: localStorage
Store strings in keys using Storage object & 
window.localStorage:
function doSave() {
var filename =...
HTML 5: Database
Open DB with window.openDatabase, then use Database 
object:
var db = openDatabase("MyDB", "1.0", "Exampl...
Gears: Database
Open DB, then execute SQL statements
var db = google.gears.factory.create('beta.database',
'1.0');
db.open...
Gears: Database
• Bloggears 
• AutoDesk Draw 
• MySpace Messages 
Also: RTMilk, GMail/GDocs/GReader, Zoho, 
WordPress, AJA...
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...
Heavy Computation
JS is surprisingly fast at non-DOM operations. 
Proof: TSP Solver , Clustering, Spatial queries
But if i...
Web Worker Spec
Create a worker and send messages to it:
var searcher = new Worker('searcher.js');
function search(query) ...
Gears: WorkerPool
Create worker IDs in WorkerPool, send/receive messages:
workerPool.onmessage = function(a, b, message) {...
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 3...
HTML 5: Canvas
Create <canvas> element:
<canvas id="canvas" width="150"
height="150"></canvas>
Then call functions on Canv...
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 feature...
Upcoming SlideShare
Loading in...5
×

Client Killed the Server Star

6,349

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,349
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • - Browser does nothing
    - All state in relational DB
  •   - client replicates some functionality of server
      - server is still queried constantly - but better UI for users
  •   - client used for heavy computation, heavy storage
      - server is backup storage
  • - Offline
    - Lower latency
    - Performance = immediate user response
    - Privacy
    - Scalability
  • Memcache
    AppEngine
    BigTable
    De-Normalized Databases/Non-Relational databases
  • HTML5 is the next evolution of HTML, and will be backward compatible with existing HTML. As the spec is being worked on, parts of it being gradually adopted by the various browsers. The whole spec likely won’t be officially done for another decade.Founded by people from Apple, Mozilla, Opera, after a disappointing W3C workshop.One editor (Ian Hickson) reviews submissions and modifies the specification.
  • Gears is an open source plug-in that makes the browser more powerful. A popular use of Gears is to give web apps offline functionality using the following 3 modules:
  • http://webkit.org/misc/DatabaseExample.html
  • http://webkit.org/misc/DatabaseExample.html
  • http://webkit.org/misc/DatabaseExample.html
  • same-domain!
  • same-domain!
  • same-domain!
  • http://webkit.org/misc/DatabaseExample.html
        -- presidential helper
     -- mysql message search
  • file storer demo
    expected to store user documents
    per-site, per-browser
  • full relational DB
    sqllite
    asynchronous
    readTransaction, transaction
    insert/create/delete/select
    callbacks for errors
  • also has FTS2
    synchronous
    myspace messaging!
  • also has FTS2
    synchronous
    myspace messaging!
  • per-window key/value
    e.g. purchasing plane tickets
  • TSP solver
    Spatial queries
    web workers isnt part of html 5 spec, but it is being worked on by same group (WHATWG)
    lots of XMLHRs
    encryption
    searching a database
  • Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. The examples below show some appropriate uses of workers.
    Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.
    lots of examples on web worker spec
  • Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. The examples below show some appropriate uses of workers.
    Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.
    lots of examples on web worker spec
  • Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four megapixel image. The examples below show some appropriate uses of workers.
    Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.
    lots of examples on web worker spec
  •   // used to have to render on servers or plugins to be fast enough
      -- Polygonzo
      -- Fractals
      // dont need a server to change pixel data, can do it on the client
      -- Montage Maker
  •   // used to have to render on servers or plugins to be fast enough
      -- Polygonzo
      -- Fractals
      // dont need a server to change pixel data, can do it on the client
      -- Montage Maker
  •   // used to have to render on servers or plugins to be fast enough
      -- Polygonzo
      -- Fractals
      // dont need a server to change pixel data, can do it on the client
      -- Montage Maker
  • Client Killed the Server Star

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×