Your SlideShare is downloading. ×
0
MunichJS: 2011-04-06  Mike West (mkwst@google.com)
Hi. Im Mike.      You can email me atmkwst@google.com, follow me on Twitter @mikewest, or visit my outdated blog at mikewe...
Two topics:IndexedDB (which is awesome).Chromium extension goodness.
IndexedDB
Uxebu are awesome. Im thrilled that theyre writingabstraction layers. Seriously, this  rocks. If you havent read the      ...
“But how is this better    than localStorage? It            isnt.”Im less thrilled that theyre wrong.
My thesis: IndexedDB, or  something like it, is the way          forward. Yes, its complex, and the APIcould be better, bu...
Why IndexedDB?A short intro to Chromium         internals.
Chromium splits the world into one    trusted browser and many       untrusted renderers.
Browser All I/O goes through the browser;  its the only piece of Chromiumthat can make system calls, access files or DBs, a...
Sandboxed RenderersRenderers run in processes with as few permissions as possible, and   only have I/O access via IPCmessa...
I/O is a bottleneck Theres only one I/O messaging   thread on each renderer; itscritical not to block while waiting       ...
Asynchronous APIs!   The additional conceptualcomplexity aside, they allow you to smoothly continue responding to        u...
With that in mind...    Whats wrong with this code?var x = JSON.stringify( complexObject );window.localStorage[x] = x;wind...
Problem 1: localStorage requires objects be flattened via stringify,       called synchronously in             user-space.v...
IndexedDB stores unserialized objects  As far as your (single-threaded) JavaScript process is concerned,youll never block ...
Problem 2: localStorage itself is   synchronous, which means the assignment blocks while the write  goes through to the fil...
IndexedDB is    asynchronous.db.transaction(store, READ_WRITE).    objectStore(store).    put({ ... }).    addEventListene...
Problem 3: Theres no mechanism to ensure that both assignments go through successfully, nor that they   both apply to the ...
Transactions & Locking db.transaction(store, READ_WRITE)… db.transaction(store, READ_ONLY)…
Chrome Privacy
“Chromium provides users full transparency  and control over theinformation managed by     the browser.”Our privacy teams ...
The team approaches this task in a number of ways, notably in terms      of new extension APIs.
WebNavigation Events     onBeforeNavigate     onBeforeRetarget        onCommitted        onCompleted    onDOMContentLoaded...
Done when theyre     done...     WebRequest API  ContentSettings API DevTools (WebInspector,      Debugger, etc.) And more...
Stay up to datechromestatus.com and Last Week      in Chromium/Webkit    (goo.gl/XWEY3) are great            resources.HTM...
Questions?mkwst@google.com   @mikewest
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
MunichJS - 2011-04-06
Upcoming SlideShare
Loading in...5
×

MunichJS - 2011-04-06

1,013

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

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

No Downloads
Views
Total Views
1,013
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "MunichJS - 2011-04-06"

  1. 1. MunichJS: 2011-04-06 Mike West (mkwst@google.com)
  2. 2. Hi. Im Mike. You can email me atmkwst@google.com, follow me on Twitter @mikewest, or visit my outdated blog at mikewest.org.
  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... goo.gl/Hy6Jy
  26. 26. Stay up to datechromestatus.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).
  27. 27. Questions?mkwst@google.com @mikewest
  1. A particular slide catching your eye?

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

×