MunichJS - 2011-04-06

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 mikewest.org.

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 article, do.

“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, but were adults here. Well deal.

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 ﬁles or DBs, and display output to the user.

Sandboxed RenderersRenderers run in processes with as few permissions as possible, and only have I/O access via IPCmessages to the browsers process.

I/O is a bottleneck Theres only one I/O messaging thread on each renderer; itscritical not to block while waiting for a response.

Asynchronous APIs! The additional conceptualcomplexity aside, they allow you to smoothly continue responding to user interactions.

With that in mind... Whats 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,youll 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: 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;

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 mission statement.

The team approaches this task in a number of ways, notably in terms of new extension APIs.

WebNavigation Events onBeforeNavigate onBeforeRetarget onCommitted onCompleted onDOMContentLoaded onErrorOccurred

Done when theyre done... WebRequest API ContentSettings API DevTools (WebInspector, Debugger, etc.) And more... goo.gl/Hy6Jy

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).

Questions?mkwst@google.com @mikewest

MunichJS - 2011-04-06

by Mike West on Apr 07, 2011

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 33

Statistics

MunichJS - 2011-04-06 Presentation Transcript

http://lanyrd.com	32
http://stg.lanyrd.org	1