00:00 So we've got full page refreshes, and that's not super terrible. Everything is working just fine, but there are some things that we can do with client-side JavaScript that we can't do without preventing these full page refreshes and doing client-side routing. So we gotta add JavaScript to the page. Now, we're responsible for everything that appears

00:18 between the open HTML and the closing HTML tag. So that is to say everything on the page is our responsibility, which is really nice because it means that we can conditionally decide whether we want to include JavaScript on the page or not. And there are use cases for that. Most of the time though, we're gonna want it because we can make the experience way better with client-side JavaScript.

00:37 So let's add in our root TSX where we have our HTML elements here. Let's add scripts. This is gonna come from remix-run-react. So we're gonna import that. And with that now, once we refresh, we should be able to navigate between these. And you'll notice the favicon is no longer refreshing,

00:56 that's because we're no longer doing full page refreshes and we can easily navigate between all of these pages. So that's cool that we added that, but we actually also made the experience a little bit worse. Actually, first, let me say we did make the experience better. You'll notice now we're just loading in the data right here. This is just JSON.

01:16 And what this means is, whereas before it had to refresh the page, that means it's downloading and processing the CSS and the JavaScript every time. Now we do have a cache, and so the JavaScript and CSS should be cached, but the browser does have to reevaluate it every single time we go to every page.

01:34 That is not optimal. So instead, we can just keep everything on the page and just load the new pieces that are necessary. So if I go here to Cody's Notes and I refresh, we have all of the JavaScript that's on the page necessary for here. I clear this out and I go over to Notes. Now we're gonna get some more JavaScript

01:53 that's specific to these pages. So we've got the JavaScript for the Notes route, and then the JavaScript for the Notes index route. That's what those two JavaScript files are for. And then also the data for this, the data for the Notes route to have our list of notes. So this is cool.

02:11 We're able to just load the pieces of our application that are necessary for the routes that we're on. That's all code split happening automatically for us by Remix. But the one thing that is maybe not better than full page refreshes is the pending UI. It's not great at all. And we'll get into this in a future step here,

02:30 but I just wanna demonstrate. If I go to a slow 3G network and then I click on this, we're not getting any UI feedback. The favicon isn't spinning. We're not really, there's nothing in the UI showing that, hey, we're loading. We care about you. We see you, right?

02:48 So we could do a better job of that. Like when we delete, there's nothing. And so the user's like, well, let me just delete, delete, delete, delete. They keep on clicking delete and it's go over and over again because it's taking forever and we're not getting any feedback. That's not a great user experience. And then finally, when we give them a chance to finish that request,

03:08 yes, it does indeed finish. So that is something that we would definitely want to improve. So I should say that bringing JavaScript in does make some things better. Like we don't have to reprocess the JavaScript or the HTML or CSS every single time, but it also makes other things worse if you don't think about those particular cases

03:28 like slow networks. Now, I know that not everybody's using 3G anymore. In fact, very few people are using 3G these days, but lots of people, pretty much everybody, has poor connectivity sometimes. And so you want to think about those use cases and those users. And there are plenty of people

03:47 who do run on older networks as well. So that's getting JavaScript on the page, but let's also talk about some of these development utilities. So the KCD shop component, this is an unfortunate leak of the abstraction of the workshop app. So you will never actually do this in a real app,

04:06 but that's gonna be there to keep our iframe in sync with the URL and everything as part of the KCD workshop app. So you won't ever actually use that in a real app, but you'll see it in this app. And so that's why I wanted to show you that piece here. And then the live reload is for hot module replacement.

04:25 If you're familiar with that, it just allows us to hot swap different modules as you're making changes to those things. So you don't have to lose all of the state, even though we're not doing necessarily a full page refresh, we're also not eliminating all of the state. This also applies to when you change a loader or an action.

04:44 That will get hot swapped for us as well. So live reload is quite nice for that. And with that now, we have a slow 3G network that is giving us a experience that could definitely be better, and we're going to improve that soon. So that is getting JavaScript on the page.

05:03 Really, it's a long video, long explanation, but really the solution is very simple, just to add scripts to the page. And now all of the code split bundles and everything will be loaded on demand. And the loaders will be loaded as fetch requests rather than full page refreshes as you're navigating around.

05:22 And also form submissions will also prevent defaults, prevent full page refresh. And so you'll get a much nicer user experience in doing that. So there you go, scripts on the page. We like JavaScript.