This was truly a team effort- a lot of people worked on these projects to get them going, and it’s a really valuable contribution to the community. A lot of people want better performance for their framework of choice but can’t get buy-in for time and resources to devote to this kind of endeavor. The ability to start with a baseline of high performance and good lighthouse scores is incredibly valuable, allowing developers to enjoy both the productivity and ergonomics of exciting frameworks, without sacrificing speed and user experience.
Here are some of the highlights!
Addy created a site to explore some of the templates that they built out with the different PWA solutions, as a successor to the very popular TodoMVC, called HN PWA. You can explore all of the demos and the GitHub repo here. He then went through some major company implementations of each of the frameworks rebuilt as PWAs. Throughout a lot of the case studies that Addy features, the heavy-hitters in building for better web experiences lied in
requestIdleCallback(), and HTTP2 Server Push. There were many mentions the PRPL pattern, in essence prioritizing what you’re going to use first, by Pushing critical resources for the initial URL route, Rendering the initial route, Pre-caching remaining routes, and Lazy-loading and create remaining routes on demand. A lot of the performance wins were framed within the ability to be interactive on mobile within 5 seconds and trying to lower the overhead of the framework itself so that you had more time in that 5 seconds for your own application code.
React announced that Create React App will now be a PWA by default! This is a big win here. They now employ service workers with an offline-first caching strategy, code-splitting with dynamic import(), helpful overlays for errors, and it gives you 1.5s of headroom for your application code. More information on the release here.
Now has a CLI! Announced at the event, this is a pretty amazing development worth playing around with. You can find the project here. Among other really nice features you can read through in the readme, it has a 100/100 Lighthouse score out of the box, as well as a whopping 3s of headroom to work on your own application code.
If you’re not familiar with Preact, it’s an extremely fast 3kb React alternative with the same API, including the use of components & virtual DOM. It’s similar to React, but the small filesize is central to the software design. The only caveat mentioned is that due to its emphasis on slim builds, there may be offerings in the React ecosystem that still need work for seamless integration. That said, Preact was the clear winner in performance here, so I wouldn’t be surprised to see the community rally around this solution.
Vue announced a PWA template, offered directly from Vue-cli, which you can access easily with
vue init pwa.
Among a lot of great offerings, it gives you two 2s of headroom for application code on mobile, code-splitting with dynamic import(), service worker for offline caching, and JS chunks are preloaded or prefetched.
If you’re not familiar with Vue, I’ve written up a guide here. I think Vue is an amazing piece of software, and the ability to strike all of the lighthouse credentials out of the gate is pretty incredible. This workflow makes it so easy to create beautiful and complex apps.
There are many more details that I didn’t get to in this post, and Addy is a great speaker. He even created a video game for his talk. It’s a worthwhile watch the whole way through, you can view it here:
Just curious.. why didn’t he talk about Angular also?
I believe polymer is basically obsolete when they get this supported at 100%.
Is that why Google built the new youtube interface in Polymer?
Polymer hasn’t been left out.
The hnpwa site has polymer in the list.
React (and similar libraries) isn’t a framework either, it’s basically a library that makes you build components easily and render them using a virtual DOM.
If anything, Polymer is the real deal that could make React obsolete, as it’s based on native APIs.
The Ionic Framework is also PWA-friendly. Stock Ionic applications have both a basic manifest.json file generated, as well as including sw-toolbox.js for service worker functions. You just need to uncomment the service worker code in the index.html to transform your Ionic app into a PWA. The Ionic team is actively working on improving PWA support as well.
hnpwa.com project give me a feeling with csszengarden.com
Those are some pretty weak Interactive times. Lighthouse is shooting too low. They need to raise the bar to 1s or less over 2G.