MunichJS - 2011-04-06


Published on

Presentation to Munich JS on 2011-04-06: covers the Munich Chrome team's privacy efforts, and argues that IndexedDB is a better mechanism than localStorage for applications of any real complexity.

HTML version up at

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MunichJS - 2011-04-06

  1. 1. MunichJS: 2011-04-06 Mike West (
  2. 2. Hi. Im Mike. You can email me, follow me on Twitter @mikewest, or visit my outdated blog at
  3. 3. Two topics:IndexedDB (which is awesome).Chromium extension goodness.
  4. 4. IndexedDB
  5. 5. Uxebu are awesome. Im thrilled that theyre writingabstraction layers. Seriously, this rocks. If you havent read the article, do.
  6. 6. “But how is this better than localStorage? It isnt.”Im less thrilled that theyre wrong.
  7. 7. My thesis: IndexedDB, or something like it, is the way forward. Yes, its complex, and the APIcould be better, but were adults here. Well deal.
  8. 8. Why IndexedDB?A short intro to Chromium internals.
  9. 9. Chromium splits the world into one trusted browser and many untrusted renderers.
  10. 10. Browser All I/O goes through the browser; its the only piece of Chromiumthat can make system calls, access files or DBs, and display output to the user.
  11. 11. Sandboxed RenderersRenderers run in processes with as few permissions as possible, and only have I/O access via IPCmessages to the browsers process.
  12. 12. I/O is a bottleneck Theres only one I/O messaging thread on each renderer; itscritical not to block while waiting for a response.
  13. 13. Asynchronous APIs! The additional conceptualcomplexity aside, they allow you to smoothly continue responding to user interactions.
  14. 14. With that in mind... Whats wrong with this code?var x = JSON.stringify( complexObject );window.localStorage[x] = x;window.localStorage[anotherX] = x;
  15. 15. Problem 1: localStorage requires objects be flattened via stringify, called synchronously in user-space.var x = JSON.stringify( complexObject );window.localStorage[x] = x;window.localStorage[anotherX] = x;
  16. 16. IndexedDB stores unserialized objects As far as your (single-threaded) JavaScript process is concerned,youll never block while processing JSON.
  17. 17. Problem 2: localStorage itself is synchronous, which means the assignment blocks while the write goes through to the file system.var x = JSON.stringify( complexObject );window.localStorage[x] = x;window.localStorage[anotherX] = x;
  18. 18. IndexedDB is asynchronous.db.transaction(store, READ_WRITE). objectStore(store). put({ ... }). addEventListener( onsuccess, function (e) { ... });
  19. 19. Problem 3: Theres no mechanism to ensure that both assignments go through successfully, nor that they both apply to the same baseline.var x = JSON.stringify( complexObject );window.localStorage[x] = x;window.localStorage[anotherX] = x;
  20. 20. Transactions & Locking db.transaction(store, READ_WRITE)… db.transaction(store, READ_ONLY)…
  21. 21. Chrome Privacy
  22. 22. “Chromium provides users full transparency and control over theinformation managed by the browser.”Our privacy teams mission statement.
  23. 23. The team approaches this task in a number of ways, notably in terms of new extension APIs.
  24. 24. WebNavigation Events onBeforeNavigate onBeforeRetarget onCommitted onCompleted onDOMContentLoaded onErrorOccurred
  25. 25. Done when theyre done... WebRequest API ContentSettings API DevTools (WebInspector, Debugger, etc.) And more...
  26. 26. Stay up to and Last Week in Chromium/Webkit ( are great is full of useful tutorials (and will be localized soonish).
  27. 27. Questions? @mikewest
  1. A particular slide catching your eye?

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