Lazy Loading Demonstrations

[00:00:00]
>> Steve Kinney: So we're gonna take a react out and we're gonna implement code splitting and lazy loading together as a group, as a team. And we'll kinda see this in action, because it is one of those things. I'm kinda fascinated with it, because I think it seems hard on the tin, so everybody avoids it.

[00:00:17]
We couldn't do that in our app and the kind of point that I wanna like hit on like there are parts of this that you can do like tomorrow. In your application that will have like dramatic impact on the load time of your application. So there is a repository linked in the gist called noted and we'll take it for a spin.

[00:00:50]
>> Steve Kinney: Everyone has their default app. It's like a like joke that every framework has a to-do list. My thing is I make mark down editors repeatedly. Cool, so here we have an application. You've got some notes over on the side with my excellent design skills. You can compliment me on those later.

[00:01:10]
We can click through like you can see hey, here's the note in rendered mark down. We can go ahead and we can edit it, and we get this nifty code editor like where I can change some stuff.
>> Steve Kinney: I change this in the mark down preview and in the sidebar.

[00:01:26]
Very cool, I can close the given note and go back to this initial page. That's the entire application. One thing we can take a look at, let's do a performance audit here and I'll go ahead. I'll do the start profiling and reload the page, which will just get you that initial start time all the way through.

[00:01:52]
>> Steve Kinney: And it automatically sounds when it thinks it is done. So we send this large named.somegarbage.bundle.js, you can see that we spend a decent amount of time parsing it more than anything else. But like using the example from sendgrid earlier, I don't even know if they're going to use the editor.

[00:02:16]
This application there's not a lot to do, but like this is like a microcosm version of a larger application. We don't know what the user is going to do, so it'd be great like if I only send them that like code editor that was over on the side there if they need it.

[00:02:31]
To get them that initial page, to get them interactive, they're not looking at a note yet. I'm not doing any markdown over here yet. This is just like the raw string of text like I can get them to the point where they're interacting with the page before, they don't need that thing yet.

[00:02:45]
Like when they need the mark down component, we'll send it to them. When they need the editor, we'll send it to them. But why make them pay that cost upfront? Like in a larger application, they might never need it. They might go to some other part of the application.