Adding a Router

[00:00:00]
>> Maximiliano Flirtman: The weird part, or the most complicated part, we need to create the actual router, okay? So we need to create a router that can be a class, because it's a singleton. I don't wanna have more than one router, so I need only one. I'm not creating a class and then an instance of the class.

[00:00:18]
I'm just creating an option. In JavaScript, that's a pretty good pattern, okay? So it's a singleton, there is no other instance of that router. And the router will have an init for initial things that we will do, okay? So let's say like that, init. Like that, it will have go.

[00:00:43]
So go will receive a route. And if we want to add that route to history, you will understand why I'm using this later. But for now, let's say that sometimes you wanna go to another route, but you don't wanna create a new entry in the history.
>> Maximiliano Flirtman: There are some reasons for that.

[00:01:02]
I mean, that means that if you don't add an entry in the history, you cannot go back to the previous one. For example, login forms. You have a login form and then when you log in successfully, you go to another page like my account. What happens if you press the Back button?

[00:01:18]
You wanna go to the login screen again? Because you're logged in, being logged in is a state not the page. So going back to the login in your screen, that make so much sense. So then you can just go to My Account, the private page, but without all need to a history, okay?

[00:01:39]
That makes sense? Okay, so here we will have all the all the details, okay? To make that work, but let's do this. I'm not sure if you have play with the History API in your past. This is actually a standard API for the web. By the way, every time we are loading this, we have a couple of errors that are coming from our providers.

[00:02:07]
Also, there are some errors from the YouTube embed sometimes, so it's not our code. The YouTube players sometimes have errors, I don't know why. But when you have the history API, it will let us, for example, push and state. PushState receives some data. In case, if you wanna send data, we can say, no, I don't wanna pass data.

[00:02:28]
We have an unused argument that's actually pretty weird. It's called unused, so it has history reasons. Someone thought that they were to use the second argument, but now they're not using it. So it's just there. And finally the URL. I can say fake URL. If I do this, what happens is that now I can see that URL in the URL bar, okay?

[00:02:57]
As simple as this, any URL with folders, whatever. Anything you put here, it goes to the URL. Of course, if I refresh, it's 404, right? Because when you refresh, it goes to the server. And the server that URL does not exist. And we will see how to deal with that later, okay?

[00:03:20]
But we are faking the URL is a completely fake URL client side, okay? Makes sense? And there is an event that we can bind to, to actually listen for changes in that URL. So then every time you are changing the URL, you can render the right page, and also something that happens every time you push a state is that you can go back using the back button or in the mobile phone, the gesture, the back gesture.

[00:03:52]
So now if I hit the back button, it goes to the previous one and then to the preview and then it can go forward. So, those fake URLs are adding entries to the history. Okay, do you have any question on that part, no? Okay, so let's implement that.

[00:04:13]
So, if we are adding to the history, the current route, what I want is to actually talk to history, pushState, the same I did before. No data is going to be passed the unused argument. It's a string, so I will pass an empty string. I'm sorry about that.

[00:04:32]
This is how it is. It's a very old API, and by the way, there is a new API available, a modern API that is more complex, it's better but it's not yet 100% compatible with all the browsers. So that's why we are still using this one that is from the 90s.

[00:04:49]
Actually not for 90s from mid 2000s Twilight. It's not from the 90s, is from mid 2000. And then the URL, and the URL is actually the route that we are receiving as an argument, okay? So that's the idea. And in init, we need to do the reverse operation.

[00:05:09]
So I will listen for pop state over the window. So let's analyze this for a second. PushState will push something into a history and popState is an event that will be fired when you're something is going like back in history, okay? With changing the state. So if you're changing the state, then I can just talk to the router and say, hey, we need to go again to this new URL.

[00:05:41]
Location path name will give you the current URL but just a path. Maybe we don't need to add to the history. So if the user is going back to a previous page, I don't wanna add another history entry for it because it's just going back. Does it make sense?

[00:06:00]
You add entries in history when you're going forward to new pages. So if you're going back, if not, you go back and you're adding a new entry, it doesn't make any sense.
>> Speaker 2: Is there a reason you wouldn't use window? Got location here instead of just location.
>> Maximiliano Flirtman: So the question is, why I'm not using location and not window not location, okay?

[00:06:22]
So the answer is that it's exactly the same thing. Window is a global scope in browser JavaScript. So everything that you have on window is actually a global variable or a global option. In fact, I don't need to add window [INAUDIBLE]. It's just words without it, but at that point, I don't think you understand what's going on.

[00:06:47]
So if you see a not even listener there, you don't understand if it's a router even listener. So it's not, it's a window, but it's like, I think that I need the window to see exactly what's going on. For location, I don't think it's needed, but actually, when you are creating a global variable here, actually that variable is sitting on window.

[00:07:13]
>> Maximiliano Flirtman: So every global variable becomes an object of the global context that in the browser is window. In Node.js, it's a different object. In a service worker or a web worker, it's a different option. okay? So, I don't have any special reason of why I'm not using window location.

[00:07:34]
The thing is that I don't think it's needed there. I don't think that I need to add that context, but you can add it and it's just the same. Okay, make sense? Okay, so that will then go and go back. When we are initializing the router, by the way, we are not calling that yet, so we need to call that.

[00:07:54]
Also we need to initialize, or, let's say, go to the initial route. So when you start the page, I need to go to the first or the current URL. I will say Router.go to the current pathname and location.search as well. You will see why we need this. Search is actually question mark on what goes after the question mark there.

[00:08:24]
So it's just the pathname and the location.