Offline, progressive, and multithreaded: webapps of the future

Offline, progressive, and multithreaded

A peek at webapps of the future

@nolanlawson – speaker notes are in the console

@nolanlawson

Progressive web apps!

Bruce Lawson on PWAs

Source: https://www.youtube.com/watch?v=YxQUxCsNomM

HTML [is] in direct competition with other technologies intended for applications deployed over the web, in particular Flash and Silverlight.

– Ian Hickson, 2009 (via Bruce Lawson)

[The web] won on desktop, just in time for mobile to eat the world.

– Alex Russell, 2016

HTML5 was a response to Flash

PWAs are a response to native mobile apps

	Native apps	Web apps	PWAs
📶 Offline	✔	❌	✔
📈 Progressive	❌	✔	✔
🐙 Multithreaded	✔	❌	✔

Seen in this light, the high-level concepts – the philosophies – behind PWAs start to make more sense. When I read the literature on PWAs, I feel there are three high-level features associated with them, each of which draws a comparison or a contrast with native apps. First off, they are offline – they work well without an internet connection or with a poor one, they are progressive – they progressively reveal bits of functionality the more you use the application, and they're multithreaded – they take advantage of the device capabilities to run tasks in parallel. Each of these we can compare to native apps. Offline? native apps do this fairly well. They don't always do it right, but for the most part, native developers are at least aware of offline states, and tend to show a spinner or cached content instead of just an error page. Progressive? Interestingly, this is one case where native apps are actually terrible. It takes so long to download an app from the store! This is actually something that the web is already designed to handle very well; it's in the web's DNA! And it's a feature of the web that we don't want to lose, as we make it more app-y. The third is multithreaded, and here I would argue that native apps are *very* good at this; I used to do Android development, and I worked alongside iOS developers as well, and this is just something we do by default – we avoid over-using the UI thread, we use background threads in order to keep the UI smooth. Web developers, I'd argue, are only dimly aware of this, and an understanding of the inherent limitations of mobile hardware hasn't really filtered through yet. But what I'd like to argue in this talk is that a well-designed PWA can win on all three of these fronts. So I'll go through each of the three points one at a time. Think of it as three 10-minute lightning talks (since I've got 30 minutes left!).

📶 Offline

"Offline-first"

Offline-first is about speed ⚡

latency numbers all programmers should know

Source: https://gist.github.com/hellerbarde/2843375

Memory

Disk

Network

How do we offline?

The web platform has always had two solutions to every problem: the deprecated one you shouldn't use and the one that's not yet ready.

– Sylvain Galineau

	Ye olde way	The hot 🔥 new way
Static data	AppCache	Cache API (Service Worker)
Dynamic/query data	LocalStorage, WebSQL	IndexedDB

📈 Progressive

"Progressive enhancement"

Weak version: upgrade per capabilities, progressively add features
Strong version: your site should work without JavaScript

In 2016, it's okay to build a website that doesn't work without JavaScript.

Smartphones are becoming more pervasise than connectivity. When you have a supercomputer in your pocket, but intermittent connectivity, the ability to work offline is the key to ubiquity.

– Tom Dale

Progressive rendering

This is slow 🐌

<html>
  <script src="gigantic-app.js"></script>
</html>

JS frameworks embracing progressive rendering

FastBoot (Ember)
Server-side React
Angular 2 isolated renderer
etc.

🐙 Multithreaded

Why multithread? Because jank.

Source: T-Mobile

Source: Rick Byers

Web workers

// index.js

var worker = new Worker('worker.js');
worker.postMessage('ping');
worker.onmessage = function (e) {
  console.log(e.data); // 'pong'
};

// worker.js

self.onmessage = function (e) {
  console.log(e.data); // 'ping'
  self.postMessage('pong');
};

Source: Evan You: Demystifying Frontend Framework Performance

The gain is pretty marginal... and it just adds a lot of development complexity. This is probably the reason we haven't seen web worker-based rendering architecture widely used in real apps.

– Evan You