Dynamic Router & Links

[00:00:00]
>> Maximiliano Firtman: Okay, so I have the same issue, I think, with all my pages. So all my pages in routes are missing the.js that was because I didn't add it on the first one. So then you need to go add all of them. Okay, so now we are back and I can try to go to someplace and see now if I doing something someplace, and the first thing you see is that it's going to someplace.

[00:00:35]
So something is there, okay? We are still missing some parts, so actually what happened? Actually, it went in here, and actually, page limit was null. It should try to go through all the routers. And actually, I guess page limit should be null, I guess. Yeah, I'm missing one part.

[00:01:05]
Yeah, I'm missing one part actually because I wasn't watching. What's the problem that I have right now? I'm only injecting the current page or the page element, if I do have a page. If it's 404, I'm sending the page element, but actually I should also add that into the DOM.

[00:01:29]
Does it make sense? So if I don't have a page, I will create one. I need to check that one anyway. So I will append the page element even into 404 because I have just created a page element for that particular situation. So now, first, if I refresh I have a problem, that 404 is from the server.

[00:01:51]
Okay, be careful with that. So I need to go to the route and then try to execute this again and now I'm seeing Page not found. Okay, so now from the router,
>> Maximiliano Firtman: Also, I'm getting an error there, but I can go to some place. I can go to the route.

[00:02:16]
If I go to the route, it's actually working. Can you see that? So if I'm going to the route, it's actually working. What if I go to one particular movie, will it work? I don't know. Well, it worked and I use the same id but what if I change the id?

[00:02:42]
It's always Men in Black 3, why is that? Do you remember why?
>> Maximiliano Firtman: Our MovieDetailsPage has that 14 hard coded, where should I get the id from?
>> Speaker 2: Params.
>> Maximiliano Firtman: Params, that's the property that I injected. So I should have a params and it's an array, actually, so it should get it from there.

[00:03:16]
Let's see if that works, so I need to refresh. On the home, this is going to be a problem that we will solve. So I'm in the home and now, if I'm going to movie 24 it's Jurassic World. Let's put this to the side like that. So if I'm going to 240, it's an address.

[00:03:43]
These errors are coming from YouTube. Base.js is the YouTube embed, so forget about them. And if I'm going to the home, it's going to the home. And if I'm going to any other place is giving a Page not found. So we are closer than before. And by the way, what happens if I use the back button?

[00:04:13]
So if I go back from Page not found, okay, it goes back to the home. Let's go back here. It's changing the URL, but it's not updating the UI, why? I'm missing just one one piece. That piece is that my router has an init function that no one is executing.

[00:04:37]
So I need to execute this init, where? For example, when the page loads, that's a good place, DomContentLoaded. So I can just say app.Router.init, so we initialize this. And also I don't need to inject the homepage or the movie details anymore. The router will do that, the router will check the current URL and will render the initial page.

[00:05:05]
Okay, does it make sense? So now, if I'm going to the home again, refresh, I'm seeing the home page. So that works, if I'm going to 404, it works. If I'm going to one particular movie, it also works. And now if I go back,
>> Maximiliano Firtman: It's working. So it's going through the URLs and updating the UI.

[00:05:34]
So that's voila, we have a router that is accepting different routes dynamically, that's the clients are routing. Not really complicated, just sending data, receiving data. There is one more thing to solve, links, because right now I want to click here and I want to go, okay to the details.

[00:05:58]
That's not working right now, we can solve it, and also links here at the top, okay? Even if we don't have all the options yet, I want to click Movies and I want to go to the home, for example. Right now it's working, but what's happening is that, I mean, if you look at what happened in here, it's flashing.

[00:06:15]
That means that it's refreshing the page. So right now, these links are refreshing the page, okay, why? Well, if you look at our index html, they are just links. So they're just refreshing the page. But something that I can do and that's a missing step, mostly if you are pasting the router from the documentation.

[00:06:41]
In the router I need, I also have other part that will enhance current links in the document. So this is the deal, I'm going to get from the document. Let's use querySelectorAll, I will take all the links with a.navlink class, all of them, and for each of those links, I'm going to execute something.

[00:07:12]
I'm going to add a.EventListener for the click event, so when you click on those links, I want to do something
>> Maximiliano Firtman: First, I want to preventDefault. So if I do that, I'm going through all the links, at least all the links with that class. In case I have other links that are going to external sources, and I'm preventing defaults.

[00:07:36]
So which means, if I click here, nothing happens. So now it's not refreshing the page because I'm preventing the default action for links that is going to the URL. Because I'm preventing it, I'm going to replace that with getting the href of the current link with getAttribute.
>> Maximiliano Firtman: By the way, there are two ways to get the href, a.href, a is actually the current link that I'm looping and get article.

[00:08:09]
Does anyone know the difference?
>> Speaker 2: If it doesn't exist, it doesn't return anything, or becomes nil.
>> Maximiliano Firtman: In this case, both will give me the same value get attribute is actually getting the attribute that is in the HTML. And this one will get the current value in JavaScript, and you say, but isn't just the same?

[00:08:30]
Well, in JavaScript, you may change the property and not change the HTML. So at this point this is kind of the initial attribute in case someone is changing that with JavaScript. So this is the property with society previews. It's something that you wanna get deeper when you embody that JavaScript and when I have the href, I wanna go there.

[00:08:54]
And we have a router for that, right? Actually, we are the router. So we are going to go to that link. So I'm replacing those links and saying, hey, browser, I will take care of those links. Don't go, I will do that. So that means that now, for example, for now go into a movie and I click here.

[00:09:18]
It goes to the home without refreshing the page. So it enhances this. If I'm going to Favorites, it's Page not found because I don't have it yet. The same on Watchlist and My Account. So these links are actually working now, okay? The only one that is not working is clicking here, but that's something that I need to change manually.

[00:09:39]
It's not really a big deal. Do you remember where this HTML is actually currently located?
>> Speaker 2: It's a movie item element.
>> Maximiliano Firtman: It's a movie item element that is actually this part, is this link. So in this case, there are many ways to solve the problem. I can use onclick or href, it's up to you.

[00:10:06]
So if I use onclick, I can say here, for example, that they wanna go to app.Router.go. And I wanna go to one url that I can set here. Let's say url, like that. So I can create the url variable, and I wanna go to "/movies/" and the id, this.movie.id.

[00:10:35]
The id of the current movie, okay? I think it's okay, I guess. So let's see, I'm going to Guardians of the Galaxy and nothing happens. So something is wrong, and by the way, what's happening? It seems like there is an error in JavaScript that probably is gonna be difficult to see, I guess.

[00:10:57]
Let's see, if I go to Console. If I click here, it's actually, it's actually going to the home, so I think that the router is working. So this code is working and the url, let's see, we can actually inspect this. And we can actually see, no, it's still the old one.

[00:11:21]
So let me refresh.
>> Maximiliano Firtman: Now, I'm seeing the right one. So it's up router.go and be careful with quotes. So I'm using double quotes on the outside and single quotes on the inside. Okay, you have to deal with this every time you are mixing JavaScript and HTML. So, if I now go there actually working.

[00:11:48]
Yeah, I didn't refresh, I think that was a problem. So I can go to the home and I can click on any movie and just go in there.
>> Maximiliano Firtman: So it's working, right? I can go to a home and get here and if I'm going to a page that is not ready, I'm getting a 404.

[00:12:10]
>> Speaker 2: I can see why frameworks exist.
>> Maximiliano Firtman: Yeah, I mean, writing it from scratch. It takes some time. The good part is that when you have it, you already have a micro library for a router. So now you can use that router. There are more things you can improve and you can use that router on every new Vanilla project.

[00:12:28]
And that's your micro library specifically for routing. And by the way, when you're doing Vanilla JavaScript, it's okay to use micro libraries. So libraries are specifically for one particular purpose, because you don't wanna reinvent the wheel. And it's fine, it's perfectly fine to use that particular, it's helping your issue.

[00:12:47]
You try to find one that is small, that it's not forcing you to use any specific pattern in the rest of your app. Set for that, and stuff works, and that's all, okay?
>> Speaker 3: Very rewarding feeling diving into the basics like this.
>> Maximiliano Firtman: Cool, yeah, actually a lot of people at the beginning, when they started learning things like that, you say, come on, I don't wanna do this.

[00:13:14]
I mean, it's better to use React or start this with Angular. And I could argue also that probably the first 20% of the time at the beginning, you feel like I don't wanna do that. But at some point, I think that you get that feeling that, now I understand, okay, what's going on with something?

[00:13:35]
Now you decide next time if you want to use a library for that or not. If you feel, yeah, a library will be good enough or maybe this is good enough. It's just another tool for your toolbox, okay? And then on every case, if you don't know the tool, you will never use it.

[00:13:53]
It's kind of a kind of a monster, okay? That you don't know what that is. And I know that a lot of new generations of web developers, they think that this is what we're doing here. Sounds like assembler, okay? Writing, talking to the DOM. I think that sounds like something really, really low level.

[00:14:12]
I mean, it's a lower level library but it's not really so low level, okay? One more rewarding thing is that when we click here, okay, it works but maybe we can make a transition between the pages, okay? And it sounds scary, okay? I need to fade in, how do you do that?