 Hello and welcome to this supercharged TLDW, the sort of beard-free version. I don't know what happened to the hair, it just, it abandoned me like the stuff up there. Well, last time, Soma and I took the router that we made two sessions ago and turned it into a more advanced router. Let me show you what we did. So you can see on screen it's not vastly different from last time except that now we've got this spinner and then the content fades in. And actually, under the hood, a bunch of things have changed. Let's talk about that over there in Theory Corner. Oh, hello! Welcome to Theory Corner. Good of you to join me. That's probably because I asked you to. Don't worry about that. Anyway, the router is pretty much the same as last time, except last time we had one index page which had all the content in. And no matter which URL you went to, we served you the same index. No more. What we've done is we've broken each of these out into their own individual pages. That means when we deep link, we're just going to show those individual pages. But we can enhance with the JavaScript. So what happens if you go to the About page is that we leave placeholder sections, if you like, for Contact, Misk, and Home. And then when you choose one of those, we XHR or Fetch, it's your choice. I chose XHR for reasons that will become clear. We XHR or Fetch them in and we populate them dynamically. And while we're waiting, we show a spinner. All make sense? Good. Let's go and look at some code. Welcome back to the Kodi bit. I love code. Who doesn't? Yes, now the code. Well, in fact, as I said over in Theory Corner, not a lot actually changed inside the router. In fact, most of our changes have happened in the HTML and in the View. So let's have a look at the HTML. So this is what it looks like in the main index. You can see we've still got our SC View, which is the custom element for the View. But we have now added a visible class for each individual area that's visible. In this case, the visible area is Home. And we have these placeholders, like we talked about in Theory Corner, for the other Views. But you'll see they've got this additional attribute of Remote on them, which we're going to pick up in the JavaScript. While we're also here, it's worth noticing that if we notice that the View is Remote, we have a Before and an After. The Before is a solid color block, which its color is inherited from the parent. And the After is this spinographic that you saw right at the start. Well, how does it all come together? Well, for that we need to look at the View. So our View is pretty much the same as it was. And you'll remember from last time we have something that returns a new promise and we just add the visible class and we could fade it in, which was fine because all the content lived inside one page. But now we're going to load it in remotely. So what we do is we say, if this is Remote, which looks for that attribute, the Remote attribute on the View, and we've not loaded it in before, load it in. So that then says, well, what does the load in code look like? Great. Glad you asked. Ke-pow. The code looks like this. We have, in our case, an XHR. Now, why not use fetch? That would be a fairly obvious thing to do. The reason is you can't fetch in a document. You can XHR in and say the response type is document. For fetch, the best you can do is get text and then pass it to a DOM parser. So new DOM parser. Parser is text, I think it is, and you tell it it's HTML. Not quite as convenient in my view. There's nothing wrong with an XHR, so let's do that. And so what we do is we create our XHR. We set the response type to document. And then what we do is we look at the URL that we were trying to get to and we basically XHR that in. Whatever we get back from the server side is what we're going to work with. So you'll notice inside there we query out the visible view. So for example, if we've requested the about page, then the visible view will be the about content. Then what we can do is you can see we've got this dot underscore view. And you might be wondering, what's that? I'll just look a little bit further up. You'll see it's a document fragment. So it's a bit of detached DOM that we can work with. So we create one of these detached DOM fragments, basically. And we populate it with whatever we managed to pull out from the view that we loaded in remotely. So we populate all that. And then you can see that we append it to this view. After that, there's just a bit of bookkeeping. You remember I mentioned there's the before and the after with the spinner on? Well, what we do is we start as soon as we call into the load view. We basically say set a timeout for half a second. If we get to half a second, we're going to show that spinner. If we don't get to half a second, no big deal. We'll just show the content. But if we do, you'll see here we've got the show spinner, which turns on the opacity. And then when the content is actually loaded, we can clear that timeout. And we can also hide the spinner, which will cause it to fade out. And that will reveal the content behind. So there you go. It doesn't look like a massive amount of difference for the user, but it's a huge difference for us. And it's actually a very positive difference because it's allowed us to have progressive enhancement. We can now get to those URLs without any JavaScript switched on. And we can progressively enhance into a more advanced router from there. So there you go. Brilliant stuff. Don't forget to check out the live stream if you've not had chance. It's about an hour long. In fact, I think it was slightly shorter this time. Time saving for the win. Cool. Don't forget to subscribe and let us know what you think in the comments below. Thank you so much for watching and I'll catch you next time. Click, click, click, click. I've subscribed. Winning!