Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Architecting web apps to “just work” offline

Islam Sharabash (Superhuman)
9:50am–10:30am Wednesday, June 21, 2017
Modern Web Essentials
Location: 210 CG Level: Intermediate
Secondary topics:  Designing for performance, Progressive web apps
Average rating: ****.
(4.14, 14 ratings)

Who is this presentation for?

  • Intermediate JavaScript developers who would like to build a robust offline web app

Prerequisite knowledge

  • Familiarity with modern frontend frameworks, JavaScript, and SQL

What you'll learn

  • Learn how to model updates to data as a series of changes, how to handle changes to data synchronously and asynchronously so that UI responds instantly, and how to architect so that there is a single, simple, code path for offline

Description

Modern browser technologies now make it possible to ship completely offline web applications with native-like performance. However, actually building such an application is a different story.

Superhuman recently built an offline-first email client in the browser, using open source libraries to help manage the problems the team faced. Drawing on this experience, Islam Sharabash explains how to architect an application that loads offline, persists data to disk, and even resolves conflicts in data and shares the challenges he encountered, including managing optimistic updates, syncing, and performance on a single thread, and the solutions that worked best. Along the way, Islam covers the basics of how to load code offline using service workers and how to store data locally using IndexedDB and CacheStorage. (Even the venerable localStorage gets a mention.)

Islam then digs into the “syncing” problem—the Achilles’ heel of offline apps. How do you ensure that you don’t lose any of the user’s work and that the world ends up in an expected state on reconnection? How do you deal with partial connectivity in a world where more and more people are using laptops tethered to mobile networks? A few existing solutions, like PouchDB and Firebase, can help. Islam shows you how to model updates as streams that can be played forward or backward and the techniques Superhuman uses to ensure that offline code always knows “which changes haven’t been applied yet” and what the previous state of the world on the server was.

Photo of Islam Sharabash

Islam Sharabash

Superhuman

Islam Sharabash is a founding engineer at Superhuman, where he is working on making the fastest email experience in the world. Previously, he was an engineer at Remind, DataHero, and Facebook. Islam studied at the University of Illinois Urbana-Champaign. When he is not architecting for developer happiness and productivity, he can be found on Twitter as @ibashes.