• Jeroen Savat

  • Frontend Software Engineer

As all die-hard front-end developers may already know, the yearly "Fronteers Conference" in Amsterdam (the Netherlands) is the place-to-be for all things front-end. This year's speakers focused on accessibility, responsive CSS, performance and Progressive Web Applications (PWAs). For those of you who have yet to be introduced to a "PWA", it’s basically the latest buzzword for how we should build web apps in the near future. One of the talks on PWAs was given by Nolan Lawson, web developer for Microsoft and open-source JavaScript contributor. Let’s take a look at what he says makes a PWA awesome.

Offline accessibility

First off, PWAs allow for “offline accessibility”. Though that’s perhaps a bit of an unfortunate term, because it’s not really about offline, is it? It’s about speed. While memory is superfast, disk is a bit slower, and network even slower. The reason you're doing offline-first is that it forces you to think about the user experience on slower networks. Because those users, too, are going to need their data (and they need it rather sooner than later).

The question is: How? Well, one important feature of PWAs is that they store data, both dynamic as well as static, client-side. For static data storage, developers can use Cache API and Service Workers. For dynamic data storage, they use Indexed DB. In short, we cache more of our application client-side, instead of server-side.

Progressive

“Progressive enhancement”. A term that comes up a lot, but its meaning is all too often rather dubious. So what does it mean? Basically, it means that we as developers should have our applications upgrade per capabilities and then progressively start adding features. We have to make sure there’s always a baseline and then enhance the user experience on different browsers as much as possible. For example, though it’s of course not very nice to have animations and certain interface components which no longer work, we should still be able to read a page when JavaScript is not enabled.

Now, there are two ways to implement progressive enhancement:

  1. Weak interpretation: It refers to web apps which progressively become apps (i.e. these apps start out as a website, but then slowly turn into an app).
  2. Strong interpretation: It refers to the fact that a website should be able to function without JS.

Since the web isn’t uniform, it’s perfectly okay to build a website in 2016 that doesn’t function without JS, according to Lawson (an argument that sparked quite the controversy online). Even Facebook doesn’t function without JavaScript. So if even Facebook cannot do it without JS, it is okay to be dependent on JS. Basically, Lawson prefers the weak interpretation of progressive enhancement. He states it’s not the users’ JavaScript that isn’t reliable, but rather their Internet connections. As developers we need to make sure the user can still go online, even on terrible Internet connections. Lawson obviously prefers the weak interpretation of progressive enhancement in saying that it’s not only about offline accessibility. It’s also about better performance on reliable Internet connections.

Multithreaded

Ultimately, the browser is single-threaded (since both JavaScript and the DOM are). This means it can only process one instruction at a time, so JavaScript starts competing with the DOM on one single thread. This is why creating heavy JavaScript apps can make things “janky” and slow. However, we can avoid this by looking at the hardware. Take Android mobiles, for example. Even low-range Android phones have at least 4 cores. Yes, they are rather slow, but still, they can do 4 things all at once, just very slowly. So, in a way, it’s still multithreaded, and we need to harness this power.

This is where Web Workers come in. Web Workers are a way to explicitly take a bit of JavaScript and run it in a separate thread. Lawson suggests we use one thread for Web Workers (heavy application logic) and another for user interface (handlers, interactivity, UI effects ...). Thus bringing multithreading to the Web.

Conclusion

Currently, native apps tackle the “offline-first”-issue, as well as the multithreaded issue. These are two things web apps can’t generally handle. Web apps are, however, “progressively enhanced”, unlike native apps. But with Progressive Web Apps we can develop apps that combine these three features all at once: offline accessibility, multithreading and progressive enhancement. In short, PWAs could combine the best of both worlds.

Image: Paul Verbeek

Verwante Artikels