Building PWAs with Web Components

PWA, Web Components

Web Components, Web Components, Web Components. Web Components have been around for a while and have just started to catch steam over the past year. With that energy has come a new crop of Web Components libraries such as Stencil, Polymer 3.0 and SkateJS which make it easier than ever before to use Web Components. Traditionally the prime use case for Web Components has been creating re-usable components that can be used with any framework (and this is an awesome use case), but today I would like to talk about another compelling use case, creating entire PWAs with Web Components!

Before we dive in I would like to say that the purpose of this post is not to say that you should never use a framework or talk down on your framework of choice etc. Instead, the purpose of this post is to broaden the discussion around creating entire apps with Web Components, talk about the motivations for buiding apps with Web Components and to simply make you think about your current tech stack choices.

Also, I talk alot about Stencil and the Ionic PWA Toolkit in this post. Because of this I feel its necessary to say that I worked directly on these projects over the past two years while I worked at Ionic. Also, I do not work for Ionic anymore as I recently got hired at Microsoft.

First of all, what are Web Components?

You may be familiar with components from frameworks such as Angular and React. Web Components are very similar, but the key difference is that they are a made up of browser standard APIs (specifically Custom Elements and Shadow Dom). This means that web components can be run in the browser without the need for a framework or library of any kind as the components are natively understood by the browser. For more info on Web Components check out these handy docs.

What do I mean when I say “creating entire PWAs with Web Components”?

At this point you may hear that statement and think I mean that you should try to build your app completely out of vanilla web components, but that is not what I mean at all. When I say that you can build an entire PWA with Web Components I mean using tools such as Stencil that provide crucial things that apps need such as templating, state management and routing but compile down to Web Components with minimal to no overhead. Obviously creating a PWA with just plain web components would not be a very good experience, but with the little bit of “sugar” that tools like Stencil provide Web Components fast become a legit way to build complete PWAs.

Fast by default

Awesome PWAs can be built with frameworks like React, as the Twitter PWA shows, so why would we want to look at Web Components as a solution to build a PWA?

The first thing that needs to be evalutated is the overall size of our framework. This has been talked about many times in the past and is not going to be the focus of this post, but I urge you to read this article which does a deep dive on this subject. The most important thing that relates to this post is the fact that libraries built on top of web components, like Stencil, tend to be much much smaller than more traditional frameworks like React and Angular:

  • Angular 2: 111kb gzip + min
  • React 16.2.0 + React DOM: 31.8kb gzip + min
  • Stencil: 8.1kb gzip + min

Why do they tend to be so much smaller? By relying on browser standards like Web Components and ES modules to do the heavy lifting web components libraries can ship much less JavaScript to the browser and still accomplish the same functionality as a more traditional framework!

The second, and more important thing in my opinion, is how easy a framework makes crucial performance practices such as code splitting and lazy loading of bundles AKA “Is this framework fast by default?”. These techniques are possible in most modern frameworks (React, Vue and Angular) and many people use them, but the default setup for these frameworks is the opposite of best pracitces like code splitting and lazy loading. For experienced teams, like the team behind the Twitter PWA, setting up things like code splitting and lazy loading with the React Router is probably pretty easy but for the average person / team who may not have deep knowledge of things like code splitting, they are most likely not going to be set up. Because of this, the team is left with slow defaults. On the other hand, Web Components libraries like Stencil offer code splitting and lazy loading by default with 0 config needed. Because of this you start out fast by default which makes it much easier to stay fast as your PWA is built.

I could talk about this all day, but I think Alex Russel sums it up best here.

So what do I recommend to use to build great PWAs?

There are a few projects out there that enable you to build awesome PWAs with web components and ensure that “Fast by Default” developer experience. My two favorites are the Ionic PWA Toolkit and the Polymer PWA Starter Kit. Both of these projects offer a fast by default experience but today we will focus on the Ionic PWA Toolkit as that is the project I have the most experince with.

The Ionic PWA Toolkit allows you to build complete PWAs using Ionic 4 and Stencil. It includes true zero config lazy loading and code splitting by component, taking it a step further than the code splitting by route that is normally implemented. Also, by using Ionic 4, you get a set of 90 something awesome pre-built, pre-designed, automatically lazy loaded and code split web components to build your app with.

Using the Ionic PWA Toolkit you can build production ready PWAs that load insanely fast, look good and provide a great experience for the end user. And when I say load insanely fast, I mean it.

If you want to try a PWA built with the Ionic PWA Toolkit for yourself, try my Ionic PWA Demo that I built with the Ionic PWA Toolkit. You can also see the code for this PWA here.

TLDR

Using Web Components to build cross framework components is an awesome use case but web components can also be used to build entire PWAs! Libraries such as Stencil provide crucial things needed to build PWAs such as templating (JSX), state management (redux / context) and routing but with minimal overhead making it possible to build great PWAs completely with Web Components. Projects like the Ionic PWA Toolkit and the Polymer PWA Starter Kit that use Web Components libraries like Stencil and Polymer 3 provide a “Fast by Default” experience by providing zero config / low config code splitting and lazy loading out of the box. Also, because these tools are built completely with Web Components, they are able to provide the same functionality as traditional frameworks but at a much smaller size.