Multi-Page Application Patterns

[00:00:00]
>> Maximiliano Firtman: So here, you sometimes you think, but if it's a multi-page application, do we need vanilla JavaScript or do we need JavaScript at all? Well, we are going to see less available design patterns, but there are still some things that we can do. So let's cover some of them, but first let's define multi-page application.

[00:00:21]
This is just a traditional web application architecture where you have each page of the application is a different HTML document that you serve from the server. Server side, it can be, you can have a framework server side that is creating those pages, or it can be server side generated.

[00:00:40]
So it can be a static website, or they can be just plain HTML files, okay? It doesn't matter, but from a client point of view, you have different HTMLs, and you link those HTMLs. So for example, remember View Transitions from five minutes ago? Well, do you know that we can do the same for multi page applications?

[00:01:02]
I think this is one of the biggest reasons a lot of people are deciding single-page applications. Because if you need to click on a link and then you need to load the whole page, the user will see a white page until the next page is loaded. Well, now, we can use View Transition for multi-page applications to avoid seeing the white flash.

[00:01:29]
So we are going to use the View Transition API for cross-documents that's brand new, and it's available in Chrome since Chrome 126. Use cases, well make multi-page applications feel like single page applications. Like it's everything is there, okay? For example, you can also use this to morph one element from page A from one HTML, into another element of the next page, which is kind of cool.

[00:02:05]
Another design pattern, prefetch. So I think that one was in my 2006 book on Ajax patterns. So the difference is the implementation. Prefetch, the idea is that when we have a multi-page application, we have this problem of performance. When the user is navigating the app, it needs to wait.

[00:02:28]
When you click something, it needs to wait for the next page to appear. Well, you can prefetch or pre-render that, typically we use prefetch as an umbrella term. But then we have a specific ways to do that. It can be prefetch, it can be pre-render, pre-connect. And the idea is that we can try to guess, we can estimate what is the most probable next page for that user, and ask the browser to prefetch it.

[00:02:58]
That's kind of the idea. There are different techniques to do that today, including using the Cache Storage with Service Workers. So if you know about service workers, you can actually prefetch some assets including HTML, the next page. So when the user clicks on the next page, it's already there.

[00:03:17]
It's already client-side, so it will be fast enough. But we will use in our project a new one, Speculation Rules API. Not sure if you have even heard about it. So use case is to prefetch or pre-render the most probable next page on every HTML. What's the difference between prefetch and pre-render?