Frontend data
Nolan Lawson
Speaker notes are in the console
Thanks for the introduction, Jake.
Hi everyone, I'm Nolan Lawson, and I'd like to set the stage
for a thrilling, fascinating, and often beguiling subject: offline data!
And yes, they have that in browsers now!
- ServiceWorkers
- ApplicationCache
- IndexedDB
- File System API
- WebSQL
- FileReader
- LocalStorage
- SessionStorage
- Cookies
First off, I'd like to say that I think it's an exciting time to
be a web developer. Storage and caching APIs that we couldn't have
dreamed of 5 years ago are now landing in major browsers.
Nowadays, if anything, it's easy to get overwhelmed by the
smorgasbord of options.
But to keep a lavel head, I like to focus on the kinds of cool apps
that people are building with this technology. So let's look at a few.
This is a humble example of frontend data that I really like. PHP.net
has a very snappy search bar, which is built using nothing more
than LocalStorage. When you first go to the site, a fat 1MB ball of
JSON is downloaded to LocalStorage, and then the search box uses that.
Isaac Schlueter, creator of NPM, has said that he really admires
PHP.net and this search box because of how fast it is.
Here's a more ambitious app, which Paul Lewis of the Google Chrome team made
for the Chrome dev summit.
Of course it looks great, with spiffy animations, and it shows
the whole conference schedule.
This app is not only responsive; it also works offline! So it
fulfills a huge requirement of any decent conference app, which is
that it should work for conference-goers who might have a
spotty hotel wifi connection, are on roaming, or might have
no connection at all. You want to at least
be able to see the schedule while you're offline.
This starts to show how offline data can really blur the line between
a "website" and an "app." All of this is possible with just a simple website.
The user goes to a URL, and the app is "installed."
You can even save an icon to your homescreen, with a custom high-quality icon.
Then you can launch the app while it's offline, and notice that it
has a custom, purple-tinted toolbar color, as well as a lack of
browser chrome. So it feels extra "appy."
This app is using Service Worker to achieve the offline capabilities,
and the rest is just meta tags on the HTML.
Can we go further with data storage? You bet! This is an app
built by PouchDB creator and Mozillian Dale Harvey, demonstrating
PouchDB's sync mechanism. Here I have three browsers open -
Chrome, Safari, and Firefox - and I'm showing off a simple
TodoMVC-like app, but with a twist: the data is being saved
and synced across all three browsers.
If you go offline, the app not only continues working,
but it can also save data while offline. Then when
we come back online, the data gets synced back to all three browsers.
This is great for apps that want to allow you to log in from
any device, and still be able to have your data and sync it on the go.
This app uses ApplicationCache and PouchDB.
Here's a really useful one - devdocs.io. You can save the
documentation for various frameworks and APIs locally, then search
instantly and read the docs, all while offline. Notice how slick
the UI feels - that's the power of offline! You'd never get that
speed with a network request, even if you were on a fast desktop
connection.
This one uses raw IndexedDB and Application Cache.
I was interested to see how far I could push offline
storage, so I also made this ridiculous showcase app called NPM Browser.
What it does is sync the entire NPM registry - the metadata
anyway - to your browser, which comes to a grand total of
818MB in WebSQL (Chrome) and 844MB in IndexedDB (Firefox).
Believe it or not, this works in Chrome, Firefox, Safari, and IE.
You can search for NPM modules and see who maintains them,
what the current version is, or browse the readme.
If you go offline, you get a nice little notification
telling you that you're offline.
And when you come back online, it just starts syncing
again where it left off.
And if you actually wait for this thing to sync all of NPM,
it switches into pure offline mode, polling for changing from NPM
in the background.
So since everything we need is now local, suddenly the
UI is super fast, because it doesn't need the server for anything!
Like the Dev Summit app, you can save it as a homescreen icon on
Android, iOS, or Firefox OS. All of this with
a single codebase! Unfortunately the iOS version
doesn't work so well because iOS Safari's WebSQL
is limited to 50MB, but you can't win 'em all.
Anyway, this app was about pushing limits.
Frontend data == cool apps
So I think I've demonstrated some cool things you can
do with offline data. I'm sure a lot of working web developers
would be surprised that any of this is even
possible. I feel that all of these APIs are thoroughly under-utilized.
But the panelists here are five of those stalwart souls who are
working to change that situation, so I want to highlight some of their work.
Jake Archibald has been tirelessly championing the offline
web for a long time, evangelizing many emerging web standards, such as
Promises, Application Cache, and Service Workers. He did
this cool Wikipedia app that works offline using Service
Workers. It even allows the user to choose which data to
store offline!
Dexie.js
David Fahlander has pushed the boundaries of IndexedDB,
penning articles for the Mozilla Hacks blog, as well as writing
a shim to bring IE up to speed with the IndexedDB spec. One of his
most popular works is Dexie, which is a beautiful IndexedDB
wrapper that manages to be both low-level and yet easy to use.
Relay
Jing Chen works on the React Native team at Facebook, and has
been a major contributor to React and Flux. This year at React Conf,
she introduced us to the new Relay engine, which offers a
radical new philosophy for handling client-side data in React/Flux
apps. The idea is that each component is responsible for
its own data, both from the local cache and from the remote
server, leading less error-prone code that is still performant.
LocalForage
Matt MacPherson is a Mozillian, and author of LocalForage, which
is a JavaScript library that answers the question: what if IndexedDB
and WebSQL were as easy to work with as LocalStorage,
and what if there was a single API that worked across all three?
LocalStorage accomplishes this remarkable feat, abstracting away the
nitty-gritty details of the different storage APIs, while still
providing a svelte library that's under 30kB.
PouchDB
There's me, Nolan Lawson. I work at Squarespace, and I also
help maintain PouchDB.
PouchDB is a JavaScript implementation of the CouchDB API using
IndexedDB, WebSQL, and LocalStorage, as well as LevelDB in Node.js.
It can also run as its own CouchDB-like webserver, called PouchDB Server.
And since it speaks the CouchDB replication protocol, it can sync
with CouchDB or similar services like Cloudant and Couchbase.
And by the way, our logo is a kangaroo. Nobody ever seems to guess that!
Cloudant
Also here is Glynn Bird, who I've had the pleasure of collaborating with
on PouchDB pretty frequently. Glynn works for Cloudant, which is one of
the major contributors to the open-source CouchDB project and has a hosted
backend that is CouchDB-compatible (and therefore PouchDB compatible). So Glynn
has done lots of interesting work with offline apps that sync from the browser
to Cloudant.
Let's talk frontend data!
So back to Jake, and let's talk about frontend data!
