Cooking Masters Project Tour

[00:00:00]
>> Maximiliano Firtman: The last lab that I have for you today is Cooking Masters. Cooking Masters is a multi-page application for a recipe website, okay? And we were going to implement new patterns. We are going to do two, the ones that we can do in short time. View Transitions for For multi page applications and pre fetch.

[00:00:23]
So let's apply both, Okay? So for that, let's go back to our BS code,
>> Maximiliano Firtman: And I'm going to open
>> Maximiliano Firtman: Cooking Master's Initial. Remember, you also have a final version for everything here. And now I'm going to open a browser. By the way, there is no JavaScript here.

[00:00:55]
No JS file. Just HTML, css. No JavaScript, okay. So when I can use this other MPX, herb or this other browser, this is how it looks like, okay, Cooking Master's. So I have recipes, Fish Tacos, Vegetarian, of course, we have some Argentinian Asado, that's like a barbecue that we have in Argentina.

[00:01:20]
Also do select the brownies is also an Argentinian recipe. But it's a Calamari, you get it. It's another HTML. Calamari HTML, we have the recipe, that's all. So pretty simple. But yeah, every time I'm getting into this, you can feel, even if it's local, it's really fast, but you can feel we are kind of changing the page.

[00:01:41]
Okay, so, it doesn't look like an app. It look like a, it looks like a website from the 90s, where you click on a link and it goes somewhere else, okay? So, yeah, it doesn't look so nice. So we are going to start enabling page view transitions for cross documents.

[00:02:00]
That's the name of the API for this. It works on Chrome 126, if you wanna see the version of your Chrome or by the way, if you have also edge, you can also use about here I think it works on Chrome and Edge. At, at, at the time of shooting this video, the stable version 125 so it's not going to work here.

[00:02:24]
So I'm going to open Chrome Canary. If you have the bettee version, it should work as well. So canary is 127 in my case, so it will work here, okay. But probably when you're watching this video, it works on your Chrome, directly in your stable Chrome. So from here, then, I'm going to open Cooking Master's.

[00:02:46]
Okay, so I'm going to use this browser, just to see this in action. How to enable page view transitions for cross documents. So there is a big difference with the previous version. We don't need to use JavaScript. Right? Because, It makes sense because when you click on a link and you're getting out, you are not trapping that with transcript because while on before unload, on unload, the lifecycle of the page that is getting out of the navigation, it's not good enough for you to start working with, anyway, there are new events that you can find if you want to customize the animation.

[00:03:28]
It's about CSS, at least the basic part. So if you open right now, all the HTMLs are pointing to the same css, so that's good. Then they're all pointing to the same css, styles.css. So, if you open styles.css, we are going to start adding a new css property.

[00:03:49]
It's add-view-transition and here we can say navigation-auto.
>> Maximiliano Firtman: We are enabling with this. View page transitions between navigations. In this case, both the initial page and the destination page, they both have to have navigation enabled. So they both need that css, both pages. Okay? Make sense? And by the way, this, what you're going to see here works only on pages on the same origin, so there should be two HTML documents from the same origin.

[00:04:37]
Do you all know what an origin is? Protocol plus host plus port, so typically the domain. So I cannot do a view transition from my website to google.com, it's not gonna work. Even if google.com is also adding that css, it's not gonna work, okay? It's only for different HTML patients from the same domain.

[00:05:00]
So if I try now, if I click, I'm not sure if you see the difference. But now, I mean it's difficult to feel the difference, but now there is a transition.
>> Maximiliano Firtman: Again, it's not simple to see that, but there is a transition now, a transition that then you can customize with the same properties that we saw for single patients.

[00:05:29]
So now it doesn't feel like, by the way, the first time you get in there. I think it's going recognizing it pretty good. So. So it's a cross phase by default, the same as before. But can we use the same technique to take this image, for example, and morph this image into this other image?

[00:05:54]
I think that will be really cool. Does it make sense? So yeah, we can do that, even if they are part of completely separate documents. The only thing is that they have to have the same build transition name. So for example, let's go to Fish Tacos HTML. Fish Tacos HTML.

[00:06:19]
Again, this has no JavaScript HTML. And I will take just one part, here I have the image. I can take the image or I can take the whole div, it's up to me, but let's take the image. And I will set, I will use, let's open the index as well.

[00:06:38]
Index styles, but of course I can use an external style as well. I can say the view transition name to be Fish Tacos. So what's the point with that? This is the target page. If the origin page has one element and only one element, if you have two, it's not gonna work.

[00:07:00]
You need one, one and only one. If you have one with the same view transition name, it should make it morph even if we are talking about completely different patients. Because remember, the browser is taking a snapshot before and after loading the content. So, I'm going to copy this style to the index HTML, and I'm going to find here, here I have the image, okay?

[00:07:28]
I can apply it to the image, but remember, I don't need to apply it to the image. I can just apply it, I have a div here, looks like this, and apply it to the div, or the image, up to you. So if I save this now, let's go back here, let's refresh, if I click on Fish Tacos, so now I think that that's pretty cool, because now it doesn't feel like you are loading different HTMLs.

[00:08:00]
And maybe you're thinking why do I want to do a multi page application? Okay, that's a different story. Okay, probably not for this workshop to get into details, but there are a lot of situations where making a client side application is adding more problems than solutions. And I mean, think about the newspaper, website, but you can still Get an app-like experience with a blog, if you have a blog, if it's an e-book, something like that where it's not really an app there is some content there with a lot of HTMLs, Wikipedia.

[00:08:35]
Do you want Wikipedia to be an app? Like a client-side app. Maybe, maybe not. If it's just HTML documents, you can upgrade the experience and convert that in something that looks like this. Of course, it doesn't work with the other ones because I need to go and change one by one, but I think that you got the idea of how this work.

[00:08:59]
Okay, so you just need to define the same ID for each image. So you go and set vegetarian pole as the beauty transition name on that image and also on the other one and so on. So you can still get boot transitions, but for multi page application, which I think is pretty cool.