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.