(upbeat music) Okie dokie. So we have this 700 something millisecond page loaded right here of custom blade components. Remember the flux page is super fast because Blaze just does that automatically for flux. But we wanna do that same optimization to our own custom blade components, okay? So there's a few ways to do this. The first one and the most straightforward one

So there's a few ways to do this. The first one and the most straightforward one is telling Blaze to optimize a single component, okay? So let's open up that option component. Remember, that's the one that's killing us because we have this giant loop inside of this other giant loop. Let's optimize it with Blaze. So you simply add at Blaze to the top of a component you wanna optimize, clear your view cache. I made this alias AVC, it's PHP artisan view clear, okay?

of a component you wanna optimize, clear your view cache. I made this alias AVC, it's PHP artisan view clear, okay? Now we refresh and it's faster and that's the compiled render. So we'll have to do another one and get it even faster. 389, okay, 389 milliseconds for optimizing a single blade component with Blaze, which is really great, okay? But it's pretty painstaking, like are you gonna go through every single component in your entire application

But it's pretty painstaking, like are you gonna go through every single component in your entire application and add at Blaze? So we made a little bit of an easier way. If you don't wanna do that in your service provider, in your boot method, you can add Blaze optimize in and then you can specify a single path. So here we're saying resources views components, all the blade components in our app, we want Blaze to optimize, okay?

all the blade components in our app, we want Blaze to optimize, okay? So we do that, we run AVC, we refresh, and it's faster and a few more refreshes. And yeah, so we're down to 314 milliseconds without changing anything, without sacrificing any functionality, we've doubled the improvement, or we've, you know, two times the speed of this page just by Blazeifying everything. So you might be wondering, now, wait a minute,

just by Blazeifying everything. So you might be wondering, now, wait a minute, that was 35 milliseconds, that's how far flux got down to. How come when we Blazeified everything, it didn't get that low? And the reason is that Blaze has three levels of performance improvement. So three levels of performance. The first one is our optimized compiler. This is what you get out of the box

The first one is our optimized compiler. This is what you get out of the box when you Blazeify something, okay? I'm inventing this word Blazeify on the fly. When you Blazeify a component, you get the optimized compiler. That gives you about double the performance, okay? It removes most of Blaze overhead. But if you have overhead inside your components, so like I said, that database, query, things like that,

But if you have overhead inside your components, so like I said, that database, query, things like that, Blaze isn't gonna remove that automatically. There's deeper levels of performance gains. There's memoization that you can opt into, and there's code folding that you can opt into. These are sharp knives. You really have to know how to wield them, but if you do, you can get those gains. So let me give you a quick preview.

but if you do, you can get those gains. So let me give you a quick preview. We'll get into the details and intricacies later, but I wanna just show you what happens when we use them. So let's start with this query. So there's zero users online right now, all right? So let's open up that onlinecountblade.php. So this is that blade component with the expensive query right there. We can say, hey, when we Blazeify this,

with the expensive query right there. We can say, hey, when we Blazeify this, we wanna use memoization, which is basically like caching. So that this blade component only ever renders once, and then it gets reused every other time, okay? So memo true, AVC refresh, and take a look at that. Because we removed that query, this page got down to 97 milliseconds. All right, and we're gonna do one more optimization. We'll go back to that option component,

All right, and we're gonna do one more optimization. We'll go back to that option component, and this one, we are going to code fold. You don't even know what code folding means. We will get into it, it's super satisfying. I say code fold true, okay? And then this one, I'm gonna say AVC, okay? And now we're 52, 53 milliseconds, so pretty close. We didn't optimize every single inch of the page, but we did the bulk of the matter,

We didn't optimize every single inch of the page, but we did the bulk of the matter, and so we got it from 750 down to 50 by using the default compiler out of the box, then using memoization and then code folding. Again, we'll get into all this stuff, but I just wanna give you a kind of high-level overview of how Blaze works, which again, you use it with Flux, you use it with Flux, you're good, you don't have to think about it.

you use it with Flux, you're good, you don't have to think about it. We do all this stuff under the hood. You wanna use it in your own components, you get about twice the speed out of your components just by installing it and targeting all your components, and then you use memo and fold to go a little bit deeper. So great, let's do it, let's get into it.