際際滷

際際滷Share a Scribd company logo

MunichJS - 2011-04-06

M
Mike West

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 http://20110406-munichjs.appspot.com/

1 of 39
Downloaded 11 times
MunichJS: 2011-04-06 Mike West (mkwst@google.com)
Hi. I'm Mike. You can email me at mkwst@google.com, follow me on Twitter @mikewest, or visit my outdated blog at mikewest.org.
Two topics: IndexedDB (which is awesome). Chromium extension goodness.
IndexedDB
MunichJS - 2011-04-06
Uxebu are awesome. I'm thrilled that they're writing abstraction layers. Seriously, this rocks. If you haven't read the article, do.
But how is this better than localStorage? It isn't. I'm less thrilled that they're wrong.
MunichJS - 2011-04-06
My thesis: IndexedDB, or something like it, is the way forward. Yes, it's complex, and the API could be better, but we're adults here. We'll deal.
Why IndexedDB? A short intro to Chromium internals.
MunichJS - 2011-04-06
Chromium splits the world into one trusted browser and many untrusted renderers.
Browser All I/O goes through the browser; it's the only piece of Chromium that can make system calls, access 鍖les or DBs, and display output to the user.
MunichJS - 2011-04-06
Sandboxed Renderers Renderers run in processes with as few permissions as possible, and only have I/O access via IPC messages to the browser's process.
MunichJS - 2011-04-06
I/O is a bottleneck There's only one I/O messaging thread on each renderer; it's critical not to block while waiting for a response.
MunichJS - 2011-04-06
Asynchronous APIs! The additional conceptual complexity aside, they allow you to smoothly continue responding to user interactions.
With that in mind... What's wrong with this code? var x = JSON.stringify( complexObject ); window.localStorage['x'] = x; window.localStorage['anotherX'] = x;
Problem 1: localStorage requires objects be 鍖attened via stringify, called synchronously in user-space. var x = JSON.stringify( complexObject ); window.localStorage['x'] = x; window.localStorage['anotherX'] = x;
IndexedDB stores unserialized objects As far as your (single-threaded) JavaScript process is concerned, you'll never block while processing JSON.
Problem 2: localStorage itself is synchronous, which means the assignment blocks while the write goes through to the 鍖le system. var x = JSON.stringify( complexObject ); window.localStorage['x'] = x; window.localStorage['anotherX'] = x;
IndexedDB is asynchronous. db.transaction(store, READ_WRITE). objectStore(store). put({ ... }). addEventListener( 'onsuccess', function (e) { ... });
Problem 3: There's 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;
Transactions & Locking db.transaction(store, READ_WRITE) db.transaction(store, READ_ONLY)
MunichJS - 2011-04-06
Chrome Privacy
Chromium provides users full transparency and control over the information managed by the browser. Our privacy team's mission statement.
The team approaches this task in a number of ways, notably in terms of new extension APIs.
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
WebNavigation Events onBeforeNavigate onBeforeRetarget onCommitted onCompleted onDOMContentLoaded onErrorOccurred
Done when they're done... WebRequest API ContentSettings API DevTools (WebInspector, Debugger, etc.) And more... goo.gl/Hy6Jy
Stay up to date chromestatus.com and Last Week in Chromium/Webkit (goo.gl/XWEY3) are great resources. HTML5Rocks.com is full of useful tutorials (and will be localized soonish).
MunichJS - 2011-04-06
MunichJS - 2011-04-06
Questions? mkwst@google.com @mikewest

More Related Content

MunichJS - 2011-04-06

  • 1. MunichJS: 2011-04-06 Mike West (mkwst@google.com)
  • 2. Hi. I'm Mike. You can email me at mkwst@google.com, follow me on Twitter @mikewest, or visit my outdated blog at mikewest.org.
  • 3. Two topics: IndexedDB (which is awesome). Chromium extension goodness.
  • 6. Uxebu are awesome. I'm thrilled that they're writing abstraction layers. Seriously, this rocks. If you haven't read the article, do.
  • 7. But how is this better than localStorage? It isn't. I'm less thrilled that they're wrong.
  • 9. My thesis: IndexedDB, or something like it, is the way forward. Yes, it's complex, and the API could be better, but we're adults here. We'll deal.
  • 10. Why IndexedDB? A short intro to Chromium internals.
  • 12. Chromium splits the world into one trusted browser and many untrusted renderers.
  • 13. Browser All I/O goes through the browser; it's the only piece of Chromium that can make system calls, access 鍖les or DBs, and display output to the user.
  • 15. Sandboxed Renderers Renderers run in processes with as few permissions as possible, and only have I/O access via IPC messages to the browser's process.
  • 17. I/O is a bottleneck There's only one I/O messaging thread on each renderer; it's critical not to block while waiting for a response.
  • 19. Asynchronous APIs! The additional conceptual complexity aside, they allow you to smoothly continue responding to user interactions.
  • 20. With that in mind... What's wrong with this code? var x = JSON.stringify( complexObject ); window.localStorage['x'] = x; window.localStorage['anotherX'] = x;
  • 21. Problem 1: localStorage requires objects be 鍖attened via stringify, called synchronously in user-space. var x = JSON.stringify( complexObject ); window.localStorage['x'] = x; window.localStorage['anotherX'] = x;
  • 22. IndexedDB stores unserialized objects As far as your (single-threaded) JavaScript process is concerned, you'll never block while processing JSON.
  • 23. Problem 2: localStorage itself is synchronous, which means the assignment blocks while the write goes through to the 鍖le system. var x = JSON.stringify( complexObject ); window.localStorage['x'] = x; window.localStorage['anotherX'] = x;
  • 24. IndexedDB is asynchronous. db.transaction(store, READ_WRITE). objectStore(store). put({ ... }). addEventListener( 'onsuccess', function (e) { ... });
  • 25. Problem 3: There's 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;
  • 26. Transactions & Locking db.transaction(store, READ_WRITE) db.transaction(store, READ_ONLY)
  • 29. Chromium provides users full transparency and control over the information managed by the browser. Our privacy team's mission statement.
  • 30. The team approaches this task in a number of ways, notably in terms of new extension APIs.
  • 34. WebNavigation Events onBeforeNavigate onBeforeRetarget onCommitted onCompleted onDOMContentLoaded onErrorOccurred
  • 35. Done when they're done... WebRequest API ContentSettings API DevTools (WebInspector, Debugger, etc.) And more... goo.gl/Hy6Jy
  • 36. Stay up to date chromestatus.com and Last Week in Chromium/Webkit (goo.gl/XWEY3) are great resources. HTML5Rocks.com is full of useful tutorials (and will be localized soonish).