Lazy Loading components with React-Loadable

[00:00:00]
>> Steve Kinney: So let's see if we can get rid of it. One of my favorite libraries is called React Loadable.
>> Steve Kinney: And what React Loadable does is it kind of takes advantage of two things. Webpack out of the box supports this new es6 syntax, which allows you to have an import that returns a promise.

[00:00:22]
What happens is, you say import and it will go ahead and fetch the thing, and then the promise will resolve when we have the access we're looking for. So you'll be like, go get this later and do the code once you have it, right? Which is like, one key piece of this.

[00:00:37]
React Loadable just gives us a really quick abstraction over this. Which is you can take a component that you know has some pretty big dependencies. And you can say like, hey, go ahead when we use this component, go and load, like ask for that extra chunk of code.

[00:00:54]
In the meantime, show this loading component. That could be a spinner. A lot of times you'll see the pattern of, especially you'll see it in Facebook. If you open Facebook up before it's loaded your timeline, you see empty ones, like that's kind of skeleton model. You can show the user something that indicates you're getting the rest.

[00:01:12]
And put it in place then. The nice part is, if you fetched it once, it will never do this again. You will always just have the components, so this will be the first time they ask for it. So, I'm gonna do two things here. I'm gonna go ahead and create like a small little loader component, which really good.

[00:01:28]
It's gonna be like intentionally sample like, there's should be better than mine. Does anyone wanna me tweak with CSS, cuz I'm very bad at it. We'll make a new component, and we'll call it loading.
>> Steve Kinney: And in a real application, you might have multiple loaders. You might have a generic one for things that are generic, if it's an entire page that you're loading.

[00:01:50]
But you might have like, for a given smaller piece, like one that's more appropriate. Ours is not gonna be that sophisticated. We'll just simply import, react from react. And we'll just make like the world's simplest loading component.
>> Steve Kinney: It'll be a paragraph, and it will say loading.
>> Steve Kinney: Again, like yours arguably should be more sophisticated, but that is not the high value of this piece.

[00:02:31]
All right, neat. Now, lets take something that has taken us some time. I think like code mirror. We’re not anti code mirror, we are just like, not now, I am trying to load a web page code mirror, please. You are large and you’re taking up a lot of parsing time.

[00:02:46]
I don’t need you. So lets go ahead. The way my application is structured, I have the redux container pattern. So if you look at the editor, it grabs a bunch of stuff from my store and then passes it to the editor, right? I would love to pass it to a loadable version of the editor like, here, pass this data to a component.

[00:03:06]
I'm gonna go fetch that stuff in a little bit. So what I'm gonna do, I'm gonna make one more component here. And I'm gonna call it, Loadable Editor and this is gonna be my fork in the road. If you have the editor component loaded already, use it. If you don't, go get it and show my loading component in the mean time.

[00:03:28]
And once you have it, switch me over to the editor component. Does that make sense? Cool, so let's go ahead and code this one up real quick. So we'll say, import React from 'react';. Import Loadable from 'react-loadable'. And we'll say,
>> Steve Kinney: LoadableEditor and then we take the loadable method that takes an object.

[00:04:06]
That takes the component that you want to load and then what to show in the meantime. So we'll say, loader,
>> Steve Kinney: And we'll just import the one that we need.
>> Steve Kinney: And this is for dealing with reaction components. If you use that import statement, it's gonna return a promise and fetch it then.

[00:04:33]
You can use it for any kind of code, it doesn't matter if it's a reaction component. You can use it for anything that might have a lot of dependencies. When you'll be like, go get this thing, and then we'll come forward. So we'll import the editor. And we'll say that the loading component is,

[00:05:05]
>> Steve Kinney: I will export the loadable editor. So now, we have this new component. It has the smarts to get what it needs. Show the loading in the meantime. We just need to use it. So what we'll go ahead and do is we'll go into this editor container, and we're just gonna swap it out.

[00:05:22]
We'll say,
>> Steve Kinney: And this actually doesn't work, but I'm gonna change the name just to make a point.
>> Steve Kinney: And we'll use the LoadableEditor instead in our React or Redux container. All right, so we did it. Let's,
>> Steve Kinney: Go ahead and I have to change one setting. I purposely left this out, so you can watch me do it.

[00:05:55]
And you can see right now the app is crashing. It's like, I don't understand what this import syntax is. So, new features in JavaScript, go through a phase in the group TC39, Technical Committee 39. You might ask where are 1 through 38. I have no idea. And what do they do?

[00:06:12]
I don't know. This is all part of what was formally called the European Computer Manufacturers Association. Now just called its why the real name of JavaScript is. So the loading, this import syntax, is what we call stage three. Stage three means not totally ratified in the language, but like pretty much a strong candidate for the next version of the language.

[00:06:35]
You will see things like, Webpack and babble support features that are almost done early, and this is part of like the extensible web manifesto. Of like, let's get these things into developers hands early before we put them in the language. Cuz if we made mistakes or didn't think about it'd be cool to get that feedback before they are ratified in language, and every browser has to follow all the spec for them.

[00:06:56]
So import, you do need a babel plugin for this. If we look in the package JSON, we can see that I've got this syntax-dynamic-import, which is what we want. So go ahead and we'll add that to our babel-rc, as well.
>> Steve Kinney: And I'm gonna kill that previous server.

[00:07:20]
It said compiled it successfully, but I don't believe it. It probably did, but,
>> Steve Kinney: Then we'll refresh the page,
>> Steve Kinney: And things will break.
>> Steve Kinney: Transform is autofunction.
>> Steve Kinney: Let's go ahead and get rid of that custom loadash code from before.
>> Steve Kinney: Yeah, I still had loadash/transform. It's like, one or the other, I do like regular loadash here, and the plug in will work.

[00:08:01]
But I was looking for the transform from there and trying to find its.
>> Steve Kinney: So we've got transform.
>> Steve Kinney: And you see my app is here. All right, so the app functionally behaves the way it did before. If you watch for it, you can see that tiny little loading there.

[00:08:26]
I'll replay it for you. Nope, that's not gonna work. Replay it from here. Things to do, watch closely. I'm gonna hit the Edit button, you ready? You saw a load for a second there. It didn't have that code originally, and it went and got it, right. If I had it slightly nicer, I could show something that almost looked like the editor.

[00:08:44]
I could do a whole bunch of trickery there, to make the user feel like it's a little snappier. And it wasn't in the initial bundle, we went and got it. Let's do one other thing. We'll start over again.
>> Steve Kinney: I'm going to go to the network.
>> Steve Kinney: I'll hit edit, and you can see that, when we hit the editor, we got two more entries, two small entries in the network tab, right.

[00:09:17]
Cuz that's when I went and got that editor. Now, what I want to show you is, what this looks like with the bundle analyzer.
>> Steve Kinney: Well C is like a large difference in the way that our, we had one bundle, we cut down low dash by 10%. That was good, right?

[00:09:41]
We're feeling pretty good about that. I think it will really interesting when we see the next piece of code. Run acts of visualization, which is you can see that we're now producing two bundles, actually three. Which is our main, which is our initial application, is now down to 272, right.

[00:10:01]
From 450. So now we're under that 300 threshold. Right, cuz we have code mirror and everything you need. Can you go over there? We'll get you later. So we get that initial render time, those critical assets, so the user sees our page. Remember all those statistics that we talked about in the beginning?

[00:10:17]
If the page takes more than whatever to load, and load includes parsing, as we discussed. It takes all this time to do it, then they leave. We've said, hey, let's get you the initial page that you stay, and we'll get you the rest later. So our bundle is now down to 272.

[00:10:33]
A whole 182, cuz there was some components and other stuff in there that's going along as well. We'll go there, in that bundle. Also we'll have this other tiny one, which has got not much in it. We can see it's too small. We can see that we have already split out the biggest problem in there.

[00:10:56]
But there's more that we can do. I don't know which character entity is this. But I do know what this remark parse is, it's the mark down component, right? And again, when they first see that initial landing page, we're not using that. We're not using that until they actually go to view a note.

[00:11:15]
So why are we shipping it now? Why are we paying the cost of shoving it through the tube of cats? Why are we parsing it right now, when we can do it later and not do it now? So, let's look at what I did with the editor. I made a loading component, which is reusable because it's silly.

[00:11:32]
I made, I used react loadable to make a component that's basically a fork in the road. Go get it, if you don't have it. Show this loading one in the meantime. The important thing to note is that it will only fetch that once. If I watch other notes, it already has the editor.

[00:11:45]
It's not gonna go get it again, which is super cool. And then in my editor here, I just swapped out the editor here, for the loadable editor.