Code Splitting in Vue, React, & Frameworks

[00:00:00]
>> Speaker 1: I remember you said something yesterday about how it's specific based on what library or what framework you're using to, codes blanks gets more complicated with say-
>> Sean Larkin: That's very true, yes.
>> Speaker 1: Are you gonna dive into that all later or [INAUDIBLE].
>> Sean Larkin: I think it's fair for me to show an example of what that means.

[00:00:21]
So yeah some, go ahead.
>> Speaker 1: [INAUDIBLE] more questions.
>> Sean Larkin: Okay, okay, so you're absolutely right. There are some frameworks in some libraries that,
>> Sean Larkin: How do I say this? Disregarded why Pack is an important tool that people use. And therefore, missed the opportunity to make lazy loading a first-class citizen for them.

[00:00:48]
And therefore, it's a painful experience to have a performing application. A great example of that is like Angular? It takes about 14 files to even lazy load something. And they don't even support component by component lazy loading. You have to technically fake a router outlet to even do it.

[00:01:09]
And so it's like, when you don't respect the contextual things like what are people using as a bundler. Or if you don't make code splitting a first class citizen, you make it really hard for your users to be able to create performance web applications, right? But on the other hand, we have projects like, I'll just open an example cuz I think it's super important to showcase.

[00:01:41]
>> Sean Larkin: Let's see.
>> Sean Larkin: Where we have vue.js. Where's that great example that I used to have? Let's look at my 30 card folders. [NOISE]
>> Sean Larkin: Let's see, vue demo I think is fine.
>> Sean Larkin: The most beautiful thing about vue.js, I'll just give a very quick context. So long story short, to you, so vue has a single file component system.

[00:02:16]
I'll even say that they decided to build on Webpack as a platform when they created their features. Single file components are powered by a Webpack loader, its viewloader. And what they give is it allows them write a single, you get to write a single component style. It's scoping data, and it's templating in a single file.

[00:02:37]
The context is really nice. If you wanna use one custom component in another, you have to register it. Now, to do so, you just import it like it's module, right? Because behind the scenes, the loader converts all of this to ESM modules. So, when I say code splitting as a first class citizen.

[00:02:57]
I mean that well, to register that component, you'd import it and then you take that imported reference. And you just bind it here in components, it's just a destructure Syntax. So now that I've set this here, I'm able to actually use this hello world component as seen above in my custom template.

[00:03:16]
Does that make sense so far? And, don't sweat too much about the view syntax. Just think about this is an API for registering components, right? So, when Evan, you created this, he said, well not only can you take a component. If I was to use an interface for this and said, I like using interfaces because now that I do some typing stuff, it makes sense to me.

[00:03:42]
So if I said interface RegisteredComponent, what it means is, it takes a instance of component or like so the component's property here. Takes a component, or it takes a function that returns a promise that resolves a component.
>> Sean Larkin: So what does that mean? So it means that I literally can comment this line, uncomment this line, as long as this is named the same thing.

[00:04:17]
Wow, I just code split this component. With one line change, one line. You just instantly made it possible for this to be loaded asynchronously, and what's the power? Sean, why does that matter? Well so for example, if this state here, so if you wanted to bind state. I don't even want, please don't stress about the syntax itself Let's say some state is false.

[00:04:51]
And v, f is just like, it's very similar to Angular JS directives, right? And it complies down to render functions like reactos. So, if this is false, this component never gets loaded, right? Because what it's equal to is a function that returns the promise. So, when at runtime, this State evaluates to true, lets say some event changes it, vue calls the function.

[00:05:24]
Which then go fetches the bundle that has the component. This is first class code splitting. There is no other framework today that does this. And It's almost ironic that another grassroots organization that serves nothing but its users, like Vue. Has a really great integration with another grassroots open source project that serves nobody but its users like Webpack.

[00:05:54]
So just something to think about when you choose your technologies in the future. Anyways, I'm biased, so I'm biased. But yes, this is first class code splitting, this is what excites me because I see libraries and frameworks from the future building on this. This means that at any time you could swap an app together with static imports.

[00:06:15]
And then go back one line at a time and refactor everything to be high performing. So this is first class code splitting. There are other examples of doing this in other libraries. So if you're React, there's React Loadable. Loadable, it's made by Jamie Builds or James Kyle or Jamie Kyle he goes by now.

[00:06:37]
And essentially what this does is, now it's a little bit more boiler plate. It's not a first class experience, it's very close though. Is that you can take and just import loadable. And then if you had like a loader icon or a spinning icon, it allows you to bind that as well.

[00:06:55]
But you create this component and you can see here a function that returns the dynamic import, right? Of your react component that you wanna lazy load. And then all you have to do is return that in your render function. Does that make sense? To people who know like jxx, they're like, yeah this looks really clear.

[00:07:13]
To me I'm just like, and like okay, [LAUGH] cool. Yeah, so this is probably, this is the only like really convenient way I know how to do it with react. So that's what I mean when say like hopefully that answers the question, I kinda rebuilding dot a little sub box there for a moment.

[00:07:34]
But It's gonna differ for each library.
>> Speaker 1: Pretty concise. So [INAUDIBLE] like in a spectrum of ease vue by far the easiest to [INAUDIBLE] [CROSSTALK].
>> Sean Larkin: By far.
>> Speaker 1: React somewhere in the middle.
>> Sean Larkin: Yeah.
>> Speaker 1: Angular-
>> Sean Larkin: Is incredibly painful for the component level. I would say for routing they have it pretty well.

[00:07:53]
But a lot of the times, you can't just split at the route level. You should be doing all your terminal components. Like what's super cool is in the future. I see us having tools and utilities that see like this is the conditionally loaded component. Behind the scenes, let's just convert this to a dynamic import, right?

[00:08:12]
Hopefully, we see that, but you're right, absolutely, vue by far. And, there are, like I'm trying to work with teams, like PreAct and even Hyper App. If you've ever seen Hyper App it's a tiny, tiny version, smaller than PreAct. But, they have a really cool API so I've been trying to tell them, like hey.

[00:08:32]
Can you make first class code splitting? And I'm trying to work with these newer framework that look like they could take off? Because really, this is like 11 lines of code in your own internal library to handle, right? All you have to say, is this, is type of this a function?

[00:08:48]
Or is it a component instance? If it's a type of function, result of promise, right?