 Welcome to this Supercharged TLDW. I'm Paul, and last week, Sirma and I built a router. Let me show you what we built. So you'll have recognized this kind of thing from progressive web apps or in just any web app, really, where you've got a page and you can click on a nav and it dynamically switches the section. It updates the route in the address bar and you can click back and forth and so on as you go. Well, let's take a look at the code, but no wait. Before we do that, we need to have ourselves a chat over in Theory Corner. Oh, welcome to Theory Corner, Theory in a Corner, one of my favorite places to have theory. We have our router here. And the router actually has to have two modes. And a lot of people, when they make their first router, they don't realize that you need both modes. You have an active mode where you tell the router, actively, I want to go to this URL, but also you need a passive mode. When the URL changes, the router needs to be notified. So this is its kind of passive mode where it's listening for the pop state event. And in both cases, we're going to handle what happens with the view. So the router kind of has to be the middle of your world. Well, of course, when you push actively, you also need to push state as well and change the URL yourself. Okay, so we've got all that set up on this side. As I say, what we do is we look at, say, the path name of the location and then we decide, well, which view needs to come in, which view needs to go out. If it's the same view, then we need to just update. And we decide all that in here in the router. Welcome back to reality. I love it over here. It's great. There's code in reality. Super, let's actually have a look at some code. First of all, let's have a look in the HTML. Now, the first thing to notice is that we have a couple of custom elements. Now, you don't have to use custom elements. We just took the opportunity to give it a try. We've got SC view here, which represents a view that we want to move between. The thing to notice here is there is a root attribute. The root attribute we're gonna use to decide which view should be shown or hidden or whatever. Further down, we also have this SCRouter and then you'll see that there's JavaScript to control both. Let's have a look in the SCRouter then itself. It itself extends the HTML element because it's gonna be a custom element and you can see at the bottom we call register element down here and we tell it what we want. Well, that's fine. That means that we get created callbacks, attached callbacks, detached callbacks, all those kind of things, really, really useful because it allows us to have a life cycle. The main thing to notice is in the attached callback here, we call the add event listener on pop state and we say that we've got this onChanged function and you will discover that this onChanged function is where all the really interesting stuff happens. Same with the detached callback, we just remove it. When you create it, we actually set up that onChanged callback and we actually match a bunch of routes where we create a map for them. So what happens here is in the add routes, you see we ask for all the views, the SC views and we step through each one and we add a route for it which involves creating a regular expression from the views route and assigning it to the view so that later on we can say which route do we have? Ah, that's the view that we need to either bring in or take out. So that's actually all the setup work. What we need to do is we need to have a look quickly at the go function which I mentioned over there in theory corner. This is the active one. We've got window.history.pushState so we're gonna push the new URL and again we call this onChanged. Well I think we're ready to actually have a look at the onChanged, so let's head over there. So the onChanged itself, the first thing we do is we ask for the current path name and then we step through all the routes that we have and we try and find a match. If we don't find one, well we just leave, not to worry. If we do find one, that's when things get a little bit interesting because there's three things that could happen. We either need to just bring it in if there's no existing view. If there is an existing view, we need to decide whether we're just updating a view or whether we're telling one to transition out so that we can bring our new one in. So let's deal with those one at a time. Let's actually deal with a state where you've actually got a current view. So there's something up on screen and it's either a match for the current view, the new one and if it is, we can just update it with any new information that we might have from the URL. If not, it's basically a replacement for the current view. So we have to tell that one to go out, the current one to go out and we wait on a promise here and I'll talk about that more in a moment. Whenever the current view has left and that might happen immediately if there isn't one, we can update our reference to the current view and we can tell the new view to animate in. Now you might have noticed that these in, out and update functions there. Oh, there we go. I can double-click on it if I try out enough. In, out and update and you might be thinking, well, where do those get set? Well, remember back here, we actually had SC View element and we have an SC View class very similar to the SC Router one. It stands for supercharged. Capow branding. All right, so we've got SC Router and SC View. In the SC View, here's the in, the out and the update. The main thing about the in and the out particularly is what they do is they just simply add a class to the view and that view is gonna then animate in. It's gonna do a scale and an opacity change to kind of fade in or out depending on whether it's coming in or going. When that animation is finished, we fire a transition end and that means we can resolve the promise. This is an easy way for us to chain up these animations so that the in can definitely follow the out animation but you could overlap them. You just decide when you want to resolve the promise and that will cause the animation to trigger. So there you go. That's all that's involved in making a router. It involves making a passive and an active and it also involves chaining up a few promises. Of course, you can make a much more advanced router by allowing people to load in content lazily. And if you want us to make that one in the next live stream, just pop a comment in below. We're watching those, we're gonna respond to them and we really appreciate your feedback. So don't forget to subscribe to the channel and Sir and I will be back in a few weeks with another live stream and I'll catch you right there. There is the live stream. You should watch that if you've got a spare hour. Brilliant. Ow, there's also the subscribe or down there. Either one will work, they're both good. Click one of them though. Good idea.