munichjs - 2011-04-06
DESCRIPTION
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/TRANSCRIPT
![Page 1: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/1.jpg)
MunichJS: 2011-04-06Mike West ([email protected])
![Page 2: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/2.jpg)
Hi. I'm Mike.You can email me at
[email protected], follow me onTwitter @mikewest, or visit myoutdated blog at mikewest.org.
![Page 3: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/3.jpg)
Two topics:IndexedDB (which is awesome).Chromium extension goodness.
![Page 4: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/4.jpg)
IndexedDB
![Page 5: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/5.jpg)
![Page 6: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/6.jpg)
Uxebu are awesome.I'm thrilled that they're writing
abstraction layers. Seriously, thisrocks. If you haven't read the
article, do.
![Page 7: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/7.jpg)
I'm less thrilled that they're wrong.
“But how is this betterthan localStorage? It
isn't.”
![Page 8: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/8.jpg)
![Page 9: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/9.jpg)
My thesis: IndexedDB, orsomething like it, is the way
forward.
Yes, it's complex, and the APIcould be better, but we're adults
here. We'll deal.
![Page 10: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/10.jpg)
Why IndexedDB?A short intro to Chromium
internals.
![Page 11: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/11.jpg)
![Page 12: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/12.jpg)
Chromium splits the world into onetrusted browser and many
untrusted renderers.
![Page 13: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/13.jpg)
BrowserAll I/O goes through the browser;it's the only piece of Chromium
that can make system calls, accessfiles or DBs, and display output to
the user.
![Page 14: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/14.jpg)
![Page 15: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/15.jpg)
Sandboxed RenderersRenderers run in processes with as
few permissions as possible, andonly have I/O access via IPC
messages to the browser's process.
![Page 16: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/16.jpg)
![Page 17: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/17.jpg)
I/O is a bottleneckThere's only one I/O messaging
thread on each renderer; it'scritical not to block while waiting
for a response.
![Page 18: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/18.jpg)
![Page 19: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/19.jpg)
Asynchronous APIs!The additional conceptual
complexity aside, they allow you tosmoothly continue responding to
user interactions.
![Page 20: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/20.jpg)
With that in mind...What's wrong with this code?
var x = JSON.stringify( complexObject );window.localStorage['x'] = x;window.localStorage['anotherX'] = x;
![Page 21: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/21.jpg)
Problem 1: localStorage requiresobjects be flattened via stringify,
called synchronously inuser-space.
var x = JSON.stringify( complexObject );window.localStorage['x'] = x;window.localStorage['anotherX'] = x;
![Page 22: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/22.jpg)
IndexedDB storesunserialized objectsAs far as your (single-threaded)JavaScript process is concerned,
you'll never block while processingJSON.
![Page 23: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/23.jpg)
Problem 2: localStorage itself issynchronous, which means the
assignment blocks while the writegoes through to the file system.
var x = JSON.stringify( complexObject );window.localStorage['x'] = x;window.localStorage['anotherX'] = x;
![Page 24: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/24.jpg)
IndexedDB isasynchronous.
db.transaction(store, READ_WRITE). objectStore(store). put({ ... }). addEventListener( 'onsuccess', function (e) { ... });
![Page 25: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/25.jpg)
Problem 3: There's no mechanismto ensure that both assignments gothrough successfully, nor that theyboth apply to the same baseline.
var x = JSON.stringify( complexObject );window.localStorage['x'] = x;window.localStorage['anotherX'] = x;
![Page 26: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/26.jpg)
Transactions & Locking
db.transaction(store, READ_WRITE)…db.transaction(store, READ_ONLY)…
![Page 27: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/27.jpg)
![Page 28: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/28.jpg)
Chrome Privacy
![Page 29: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/29.jpg)
Our privacy team's missionstatement.
“Chromium providesusers full transparency
and control over theinformation managed by
the browser.”
![Page 30: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/30.jpg)
The team approaches this task in anumber of ways, notably in terms
of new extension APIs.
![Page 31: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/31.jpg)
![Page 32: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/32.jpg)
![Page 33: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/33.jpg)
![Page 34: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/34.jpg)
WebNavigation EventsonBeforeNavigateonBeforeRetarget
onCommittedonCompleted
onDOMContentLoadedonErrorOccurred
![Page 35: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/35.jpg)
Done when they'redone...
WebRequest APIContentSettings API
DevTools (WebInspector,Debugger, etc.)
And more... goo.gl/Hy6Jy
![Page 36: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/36.jpg)
Stay up to datechromestatus.com and Last Week
in Chromium/Webkit(goo.gl/XWEY3) are great
resources.
HTML5Rocks.com is full of usefultutorials (and will be localized
soonish).
![Page 37: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/37.jpg)
![Page 38: MunichJS - 2011-04-06](https://reader034.vdocuments.us/reader034/viewer/2022052523/55514f0bb4c905f2288b53ab/html5/thumbnails/38.jpg)