SPA Routing

[00:00:00]
>> Maximiliano Firtman: Right now, we are hard coding the page. So it's a home page or it's a detail, we are hard coding the idea of the movie. Something's wrong there, okay? So this is not what we are expecting. We are expecting to have a home page by default. And if I click in one element, so if I go back now to my home page and they don't render movie details page, I have my home page.

[00:00:25]
And if I click on Guardians of the Galaxy, I wanna see Guardians of the Galaxy, okay? And, yeah, with JavaScript, we could do that now. So we can listen for the click, and then we can remove from the DOM, the homepage and then inject the other one. We have the web components, we can actually do that, okay, and it will work.

[00:00:48]
But there is a much better way. And the better way, because this is a single page application. The better way is to work with URLs, as we are used to in the web, as this is just a normal website. So for example, if the user is here, we want the homepage.

[00:01:10]
If the user is looking at one particular movie with an ID, we go to the Details. If the user is in, I don't know, account/login, we went to the login page, okay? If the user is searching and you know the deal, okay? But server side, we are just serving files in the real file system.

[00:01:33]
So if you remember, we are serving the public folder. And of course, the public folder has only one HTML. So what we are going to do now is to work with URLs client side, at least initially. That is, we will create URLs client side, even if they don't exist on the server, okay?

[00:01:57]
They're going to fake the URL, and we can do that on single page application. So to do that, we are going to create a router. It's actually a design pattern. We don't have anything, we don't have any API in the browser or in JavaScript with the name router, okay?

[00:02:13]
So it's just a design pattern that actually is available on most libraries as well. You have Angular router. For React, you typically use an external library known as React router. So, every library typically has a solution with the name router, so we will try to use the same thing to implement the same idea, okay?

[00:02:32]
So, within services then, we are going to create two files. We can use capital letters from Notice App to you actually, like Routes.js, where we're going to set our routes, and then the actual router. So it will be the the object or the code that we're responsible for making that work, okay?

[00:02:56]
Routes will be just the list of routes. So typically, it's a constant that we are exporting.
>> Maximiliano Firtman: Okay, and when we do something like this, so we can specify, okay, for that task, I'm going to render that component. And here, I will use my component. Does it make sense?

[00:03:19]
So path components, path components. By the way, I have a typo here. This is not an object. This should be an array, a collection. So I'm going to change,
>> Maximiliano Firtman: Curly braces with brackets, okay, with square brackets. So we have a HomePage, and now we know that we have a details, okay, so we have a Details page that for now we will say movies.

[00:03:54]
We say movie details page. And if you look at this array, we have an advantage. This array will import all the pages. So, at least the web components that are going to be used as pages, they're gonna be imported here. So, then I don't need to remember to import them, okay?

[00:04:13]
So every page will automatically be imported here. So,
>> Maximiliano Firtman: Actually, to get the details of a movie, maybe we don't want this URL. We want the URL such as this. We want a number. We want the ID. But of course, I'm not going to create one entry in this array for every movie, doesn't make any sense.

[00:04:44]
So something that we can think about beforehand, because something that we need to code later, is that the path can be a string or it can be a regular expression. I'm not sure how comfortable are you with regular expressions. At least AI models are pretty good with that.

[00:05:04]
So if you want the one really use cases for AI, like ChatGPT, or Copilot, or Gemini, or whatever, it's to help you with regular expressions. But anyway, regular expression in JavaScript, instead of using quotes, they're using actually forward slash. The problem with this is that now we have forward slash and forward slash inside, which is a problem because it's the open and the closing tag.

[00:05:36]
No quotes, okay, like that. So we have a problem here. So the second one is not taking it, so I need to actually escape this one, okay, and we escape it with backslash. I need to add backlash here and here, okay? Does it make sense? And now, the 14 number, I want it to be a variable, okay?

[00:06:02]
In regular expressions in JavaScript, we do that in parentheses, and within parentheses, I specify, for example, that I want several numeric digits, okay, to actually create a variable. And to do that again, I'm going to say this, the plus in the regular expressions pattern system, means a digit and plus is 1 or more, so one or more digits.

[00:06:30]
One or more digits will go to a variable that then we see how to read the value, okay, that variable, but that's how it works, okay? Does it make sense? So then we can create in our router systems paths that are based on regular expression. To be honest, most of the regular expressions will look like this.

[00:06:49]
Typically, it's an ID that you pass, but it can be other variables as well. You can have more than one variable, okay? So that's movie details. And movies, we can use these maybe for the search results later. Okay, so we can create a movie page that we don't have yet, okay?

[00:07:07]
And actually, we will need to add a lot of sections. So far, at least we can have at least the search results, and later, we will add more. And if you are following along with readme of this workshop, this course, it's e1 so you have all the routes there, but at least I will create empty MoviePage.

[00:07:31]
And the problem is that MoviePage for search results does not exist right now, so I also need to create it, okay? So I need to create that, and I will use that one probably, as I said, anplaceholder for the rest as well. Does it make sense? So for example, this is the MoviePage.js and we know the deal.

[00:07:52]
We create an export class MoviePage extending from HTMLElement, and at least we need to then register it. Actually, do we need to register pages if you're only going to use them from the router? Not really, but anyway, we can do that, okay, just in case. Does it make sense?

[00:08:16]
Because they're going to be used by JavaScript, but it's a it's a good practice to register them anyway. So that's my MoviePage, okay? Does that make sense? And now, I think the only part that I'm missing is that I need to import that MoviePage that I have just created.

[00:08:38]
So now, I have three routes, okay? This is just a custom schema, so I'm just creating this from a scratch, so it's not something standard. It looks similar to other frameworks, okay? Not a big deal, it's just a path and something to do with that path. Typically, that's how that works.