Progressive Web Fundamentals

Progressive Web App technologies let you delight your users with the best modern browsers have to offer, without sacrificing compatibility for legacy environments.

Progressive Web Fundamentals

Architecture and System Design

It's time to put everything we've reviewed so far into practice, as we study two important PWA architectural patterns. First, we'll employ the "app shell" pattern, whereby the frame or "shell" of the app is cached locally (and loads instantly). Secondly, we'll employ the PRPL pattern (Push, Render, Pre-Cache, Lazy-Load) to ensure that even after a minimal portion of our app loads initially, the rest of the app begin to prepare itself for instant availability in the background.

  • Architecture and System DesignApp Shell

    The "App Shell" architecture pattern involves having some portion of our application available on the device, ready to boot almost instantly on return visits. Dynamic content is fetched from an API as usual, and rendered inside this "shell". We'll look at this pattern in detail, and explore how we might employ it in our app.

  • Architecture and System DesignEXERCISE: App Shell

    Apply the "App Shell" pattern to our app, allowing the frame to load instantly for return visits.

  • Architecture and System DesignPRPL

    The "Push, Render, Pre-Cache, Lazy-Load" pattern works nicely with code splitting. The minimum amount of code possible is loaded for the initial render of the app, and then other resources are downloaded in the background, so they're instantly available on the device (and parsed into JavaScript lazily) when needed.

  • Architecture and System DesignEXERCISE: PRPL

    Apply the PRPL pattern to our example app.

  • Architecture and System DesignWrap Up

    We'll wrap up, and recap everything we've covered today.

Profoundly Practical

We have an unapologetic bias for the pragmatic and will make sure you leave with skills you can actually use. We've carefully crafted examples that reflect real world problems developers encounter daily.

Challenging by Choice

Toy problems are fun, but we want to make sure you leave with skills and not just another pointless tutorial app. Prepare to tackle some serious snags, in a non-trivial context!

Approachable and Advanced

We pride ourselves in making web technology as approachable as possible. By the end of this training, you'll be the one explaining these topics to your peers!