Dynamic Routing

[00:00:00]
>> So far we have then a basic router working, so I can go here and there. We still miss one part, because, if you remember, we will have three possible routes, the other one, it's details. But for details we will have a URLs that will look like this, like details and the ID of the product.

[00:00:21]
And yeah, case doesn't look like a good idea here. And I know what you're thinking, or some of you are thinking, we can use regular expressions, we can. But I wanna start with something simpler, much simpler than that. Because I'm not sure if all of you are within regular expressions.

[00:00:39]
So maybe we can start with just a default here. And check with very basic JavaScript if the route starts with. And we can say, I think i will use product, not details, but anyway, it will work, product- something. And in this case, we are going to create another page element that will be just details.

[00:01:08]
But we can't try this yet because we don't have a link to product- something, unless we actually go to the URL and try it manually. But anyway, I mentioned that there is an ID there as well, so I should get that ID. By the way, it can also be forward slash, doesn't need to be dash, it's up to you, it can be forward slash as well.

[00:01:34]
So you pick the URL pattern you want, and we need to get the ID. So how can I get that parameter? It's an ID, a param ID, how can we get it? Well, string manipulation. Again, without regular expressions. So I can take a substring, And I will start from the last index of a forward slash, or a hyphen, whatever you use as a separator.

[00:02:07]
+1, because we don't wanna take that character. And then we need to pass that ID somewhere somehow to the page element. We are not doing this part yet, we will in a couple of minutes, but this is a product ID. So I mean, you might be thinking, well, why don't you change the ID of the element?

[00:02:35]
I could, but it's kind of weird that on HTML you will have an ID. That is the ID of the database, of the data source. So instead of doing this, we should understand that DOM elements, they have a collection, an object, that we can set both from HTML and JavaScript, for custom properties and custom data.

[00:03:01]
I'm not sure if you have ever used that before on HTML. We are talking about the data attributes, in JavaScript known as dataset. Basically every element has a dataset option, and we can set the ID. This is not going to be parsed by the browser, it's just for custom libraries.

[00:03:28]
From an HTML point of view, it's like setting here a data-id, that's the idea. And if you're coming from some libraries, probably you are used to that. Because it's being used on some libraries for setting up formatting and other stuff, for templating, okay, for templates. So something like that.

[00:03:52]
But okay, it works, I mean, I can jump between my two pages. But what happens if I try the Back button? If I try the Back button, the URL changes, but not the contents, why is that? And I can go forward, backward, forward, and you can see, yeah, the URL changes based on my history, but not the content.

[00:04:18]
That's because we are not listening for the popstate event yet, makes sense? So we are changing, we are pushing new elements, but we're not listening for the URL. To do that, we will stay in Router.js, but within init, we're going to add an event handler for URL changes.

[00:04:41]
And that's window.addEventListener for popstate. This is going to be fired every time the URL is changing based on a user interaction with the history. And in this case, I can go to a URL. The problem is, where is the route? Some of you may think, well, look at the host that we have, at the localhost.

[00:05:19]
Let's do that again. Let's look at the history path name, that's one option. But I'm not sure if you remember that when we were pushing a new state, we had this object with a route, remember this object? We can read that object here, that's a place. The event that we received here has the state object that we pushed earlier with all the properties, make sense?

[00:05:49]
So I can read that route object as well. And this is important, remember that we set up the second argument with true as default? If the user is going back, I don't want to add another history entry, it doesn't make any sense. So that's why we are going to use that false value for that particular argument.

[00:06:12]
This is the place where we use it. We just wanna go back, we don't wanna add more entries in history. So with this in place, Now I can go forward and going backward, and then, let me refresh. And you can see that it's also changing the content. Yeah, I know the content is still not what we want.

[00:06:43]
But hey, we have a router system working with vanilla JS. I think that from all the fears that we get from developers on vanilla JS, routing is one of the biggest fears. But actually it's not a big deal to implement your own router, it's really not complicated. It's not one of the most complicated things of vanilla JS.

[00:07:07]
It was eight years ago, ten years ago, because that API was not available, or it was available only on some browsers. And there were some hacks that you had to do with the hash and blah, blah, blah. Well, that's not the case anymore. This is actually working on Firefox, Safari, Chrome in the past 10-15 versions, so it's actually safe to use.

[00:07:32]
It's not gonna work on Internet Explorer 9, no, but yeah, typically no web app will work, even YouTube is not working there. Just, this is completely off topic, but BlackBerry sent me a couple of tablets like 10 years ago, 12 years ago. And I have like five of those tablets, they have BlackBerry 10 as the OS.

[00:07:59]
They have a browser, it's a WebKit browser, HTML5 powered. But you can't even use YouTube these days, so it's completely useless. So anyway, so we don't care about that BlackBerry tablet, for web apps, at least. Maybe if it's Wikipedia, text-based, it's fine, but yeah, we don't have users on those devices anymore.

[00:08:21]
And even if you have a React app, unless you're adding a lot of polyfills and other libraries, it's not compatible with IE anymore as well. Okay, so with that, I think that we have the router ready. As ideas for adding more abstractions, maybe we can make a router reusable by receiving a collection of routes.

[00:08:48]
We can use regular expressions, but it's not complicated, that's just programming, okay? It's not really about the DOM API.