Single Page Application Patterns

[00:00:00]
>> Maximiliano Firtman: Let's get into patterns that are actually focused on web apps, and we're going to start with the ones that are focused on single page applications. And also in this category, we have a lot, a lot of patterns, and I've been dealing with this pattern for a while, before talking about single page applications, I remember books.

[00:00:24]
Also one of the books that I author in 2006, that we were talking about Ajax design patterns, or Rich Internet Application design patterns, RIA, not sure if you remember that term. Now we are talking about a single page application, but it's always the same thing. So not all the patterns are the same over the years, because of course, browsers are changing, techniques are changing.

[00:00:50]
But, just in case, let's define a Single Page Application or SPA, it's a web application that interacts with the user by dynamically rewriting the current web app. Or the current web page, with new data from the web server, instead of loading entire new pages, okay, so that's a single page application.

[00:01:11]
So for example, I will show you some patterns here and then we will implement some of them in real pressure. Lazy load, one of the biggest problem of web apps, is loading too many JavaScript files. Or even, if you're using Angular react maybe, only one file, but really big like, those apps or web apps with 10 megabytes of JavaScript, a bundle.js, that is actually really huge.

[00:01:39]
Well, that's a performance problem, and also memory usage. So now over time there were a lot of solutions available, but today we can use dynamic imports from ECMAScript, to load modules when needed, right? And we will do, one example of that in a second. Use Cases, for example for loading web components, only when you need them.

[00:02:04]
Think about this, you're creating a web app, that has a registration form and a login form, how many users are actually using the registration form? Only new users, and typically once, so maybe, I don't know, 10% of your visits are using the registration form. So why do you need to load all the logic of the JavaScript logic, even that can include the HTML, the CSS and everything, always?

[00:02:31]
Well, maybe you can load the registration form logic only when the user goes to the registration section, of course, you don't wanna use this pattern for everything, okay? Just for the parts of your web app that makes sense in terms of the size, and in terms of the probability of getting there.

[00:02:53]
Loading routes in single page application when you access them, so lazy loading the routes. The route means the destination page, you load the web component related to that page when the user goes to that page. Another one, that I think is pretty cool, we will see that in action, it's called view transitions, it's a mix between a design pattern and also a new API.

[00:03:21]
But actually, before the API has landed in browsers, we have the design pattern, but we were implemented with a different way, using CSS transitions, but now we will use the API. The problem is that, when changing between routes, there are no transitions. So I mean, if you're in a mobile app, the slide transition, you go back, you see the back transition.

[00:03:45]
Sometimes you see, the sliding the new window, the new page appear from the bottom. But by defaulting JavaScript, when you change the route, it just boom, the new content appear boom, the new content appear. We don't have any transition that's marking that the new page is coming, or things like that.

[00:04:03]
So for that, we are going to use a new API available today, at the time of shooting this video. It's available in Chromium-based browsers only, but it's available in Safari technology preview, in the beta version. So maybe when you're watching this video, online it's already available in Safari as well.

[00:04:23]
Also we are going to use another design pattern, that maybe for estimate enhancement. That means that, if the API is not there, it doesn't matter, the whole thing will work, yeah without the finance animation, but it will work anyway. So Use Cases, to animate the page change is typically the most common but it's not the only one.

[00:04:44]
Actually you can do a lot of animations when you have a carousel, of images and the user is dragging images. Well, the carousel movement, you can do that using this API instead of using a JavaScript-based animation, or CSS-based animation. To morph elements between pages, I think this is the best way to understand how good the API is, and you will have to wait a couple of minutes to, see that in action.

[00:05:14]
HTML templates with interpolation, so when you're doing single page applications, typically, there are many ways to implement page content change. So let's say, you are in a in a website with a master detail website, master of detail mean, you have a list you click and you go through details.

[00:05:36]
So how to render the details, there are many ways, but what we don't have is, if you're using web components for example and the template HTML tag. I'm not sure how many of you are comfortable with that, you can express in the HTML the bindings. As with Angular templates or JSX in react, where you, I mean, you put a div, and within the div, you say here it goes the name.

[00:06:05]
Then you put the paragraph, here you put the description, so that's it the semantics, cannot be expressed in Vanilla JavaScript, so those template ideas are from libraries. So we will use a trick, it's kind of a hacky trick, that let us interpolate with dynamic data from the HTML.

[00:06:26]
We will see this in action, but the idea is that, in the HTML, we can define the data that we want to bind.
>> Maximiliano Firtman: Routing metadata, so, in a single page application, when work with a single page application. Web page metadata such as the title, SEO metadata, and other information stays static, not matter the current URL.

[00:06:53]
This is even more important when you're doing progressive web apps, so web apps that users can install, and then they work standalone. When they are standalone, they have their own title, their own window title bar, and the text that appears in the title bar stays the same, no matter where you are.

[00:07:12]
So there is a solution is to update the metadata dynamically used when the route changes, we will do that, as well. It's simple, it's a design pattern, it's something that you need to think when you're doing single page applications. So for example we can adapt the theme color, if you don't know what that is, you will see it in a second.

[00:07:32]
You can change the title and other metadata as well, for example, updating the file icon, based on where you are, it's something interesting.