This is the full livestream of the conference, and includes the keynote, all 9 talks, all 3 live Q&A sessions, and the full Future of Web Apps panel. It also includes four talks from our organizing companies.
Highlights to me are:
Make your PWAs look and launch beautifully – Önder Ceylan(2:28:30)
Building beautiful-looking icons and splash screen images for your PWA is an important aspect of the launch experience for your users. Discover the current, and upcoming, web standards to make for beautiful launch experiences, how to make them great on different platforms, and automation approaches to help you on your way toward creating stunning launch experiences for your PWAs. (slides, writeup)
Creating delightful user experiences with PWAs – Callie Riggins(3:06:55)
Progressive Web Apps open up the ability to create moments of delight for our users that we otherwise couldn’t do with regular websites. Learn how Airbnb’s done just that to provide a high quality installation experience, seamless transitions, and an offline arrival guide across a multi-year, distributed effort.
App stores are an important distribution channel for Progressive Web Apps; they provide exposure alongside the other apps users are searching for, and have built-in ways to manage purchases and subscriptions. In this talk, BeFunky will share their experience launching their PWA into the Play store, from bundling it for release to integrating with Play payments with the Digital Goods and Payment Request APIs, all while sharing what they’ve learned and what getting into an app store has done for their product. (slides)
Talk by Rich Harris, as presented at the most recent JamstackConf:
Transitional apps samples elements from both traditional and modern architecture. The term is borrowed from interior design’s framing of “transitional design.” Transitional apps are, like multi-page apps, server-side rendered for fast initial loads, resilient since they work without JS by default, and provide a consistent experience with accessibility features built in. But like a single-page application, they also have a single codebase, fast navigation, persistent elements, and client-side state management.
If you’ve ever had a discussion or thought about MPA vs SPA, then be sure to give this video a watch.
Interesting to see Chris Coyier and Stephen Shaw lift the hood of CodePen, detailing how they use Cloudflare Workers and Cloudflare’s KV Storage.
Cloudflare workers are like serverless functions that always run at the edge, making them incredibly fast. Not only that, but the tooling around them is really nice. They can run at particular routes on your own website, removing any awkward CORS troubles, and helping you craft clean APIs. But they also have special superpowers, like access to KV storage (also at the edge), image manipulation and optimization, and HTML rewriting.
💡 If you’re already familiar with the two concepts (and know how to link them together), feel free to fast forward to the 15-minute mark.
Christian Schaefer created a DevTools Extension for both Chromium and Firefox that visualizes the children of a DOM Node. The bigger the box, the more children that child node has.
After a Google Lighthouse audit complaining an excessive DOM size, have you ever wondered in which corner of your document most DOM nodes are buried? Neither Lighthouse nor the Devtools themselves help finding those areas.
That’s what DOM Treemap is for. It extends your Devtools Elements tab with an additional pane which visualizes the distribution of node descendants of the currently inspected DOM element. This makes it easy for you drill down your DOM and to locate all those hidden the node heavy parts.
Introduced are three new features:
WebGL Overlay View lets you add custom 2D and 3D graphics and animated content to your maps.
Tilt and heading can now be adjusted programmatically, and by using mouse and keyboard gestures.
map.moveCamera() lets you simultaneously change multiple camera properties.
To give you an idea of what you can do with this, the WebGL-powered Maps demo website has some nice examples, such as an airplane taking off, a car following directions on a map, a building being highlighted, etc.
There’s also a codelab you can follow to learn the details.
Aaron will walk you, step-by-step, through the process of turning a website into a PWA. Following along, you’ll author Web App Manifests and Service Workers and gain exposure to some next-gen APIs that tie them more deeply into the underlying operating system. By the end of the workshop, you’ll walk away with a functional PWA you can use right away.