Current section: Scripting 7 exercises

JavaScript in Remix: From Optional to Essential


00:00 You know what's interesting is because Remix implements everything through a progressive enhancement means, that means that we actually don't need JavaScript on the page. And so Kelly, the coworker, actually removed all JavaScript from our page. So just took all the scripts and said, nope, we don't need them.

00:17 So if I refresh the page, we can see we have our document request. We can see our fonts, CSS file, and our Tailwind CSS file, then the font files that the browser is going to use, and then our favicon. And that's it. I can hard refresh. Yep, same business. We don't actually need any JavaScript for what we're doing right here.

00:35 So if I go to Cody's notes, that works. I can navigate between these notes. Yeah, all that totally works. I can delete a note. Yep, that also works. I can edit a note and make a change and submit. That also works. Everything that we have done so far works completely fine without JavaScript on the page.

00:53 So why do we have it? We have it for a very good reason. And we're going to be leveraging JavaScript in the client in this exercise. But because we weren't using any of those things, by adding JavaScript to the client, we actually made things worse.

01:10 And to show off a little bit of that, I'm going to set this to throttle to a slow 3G connection. And so now when I click on this other note, we're going to notice we get this spinner right here. That's better than what we had before.

01:26 Because before, with the scripts, you wouldn't actually see that. As you're going through the exercise, I want you to test things out and see that behavior. Because it's really actually a very bad behavior to just add JavaScript and then not handle those pending states. So it's actually better to not have JavaScript at this point.

01:45 But there are definitely some things that are really great about having JavaScript. So your job is to add JavaScript back. And then we're going to enhance things better after that in the next steps. So just get the JavaScript back on the page.

01:59 We have a couple of dev time utilities that you're also going to be using that include some JavaScript. But once you're done, you shouldn't see the favicon spinning anymore. And you should be able to throttle the network again and see that we aren't showing any pending states. And so we actually make it worse by adding JavaScript.

02:18 But we'll make that better. Just you see. But yeah, just get some JavaScript on the page and then we'll see you when you're done.