(upbeat music) Okay, it's time to install Blaze in own application and watch it work, it's magic. It's pretty impressive if I do say so myself. So I conjured up this fake page. There's 250 users on it. They each have a card and they each have a modal with some form stuff inside of it. And I made two of them and I made them exactly the same except one is blade components.

And I made two of them and I made them exactly the same except one is blade components. So custom blade components in your app. These are like x-heading, x-text. And the other one, if we load this one, this is all with flux components. So it looks exactly the same except it has its source code is all flux components. Flux heading, flux text, flux separator, that kind of thing. Okay, and you're gonna see why in a second

Flux heading, flux text, flux separator, that kind of thing. Okay, and you're gonna see why in a second that Blaze does a little more heavy lifting by default for flux components. You have to do a little bit more work if you wanna optimize your own blade components and I wanna show you both of those stories. Okay, now let's look at the time that this page took to load, 723 milliseconds. That's incredibly slow.

that this page took to load, 723 milliseconds. That's incredibly slow. That's, there's a thousand milliseconds in a second, okay? Picture your app loading in a full second. That's unacceptable. You want your app locally to run in a hundred milliseconds, 150, 200 tops. And this is locally, no actual network on an M4 MacBook Pro. This is as fast as it's gonna get.

on an M4 MacBook Pro. This is as fast as it's gonna get. This is an unacceptable amount of time to load a page. And this is just the blade rendering time. It's not even the entire Laravel life cycle. It's just the blade time. Not your database, stuff like that. Okay, so clearly what I'm trying to tell you is the page is super slow, right? Unacceptable.

the page is super slow, right? Unacceptable. I do have to admit two things though, before we move on. This page would be kind of slow in general 'cause there's 250 iterations in this loop. Each one has a bunch of blade components, but I did two things to absolutely sabotage the performance. That I think these are two things that are fairly common that I end up doing in my own applications accidentally

That I think these are two things that are fairly common that I end up doing in my own applications accidentally all the time. The first one is I put a country select, okay? So this has 190 or something countries. So there's a 198 iteration loop or something like that. So here it is right here. I have all of these options in the select. They're all blade components themselves. So now I have something like 200 blade components

They're all blade components themselves. So now I have something like 200 blade components times 250. So these big loops inside of other big loops, this is a super, super common culprit for blade performance, slowness, because you just end up massively bloating the amount of blade components on a page because you have a few selects that each have a loop and blah, blah, blah, okay?

because you have a few selects that each have a loop and blah, blah, blah, okay? So that's the first way that I sabotage this page. The second one is I put this users online now blade component that makes a small database query to a log table to look at the last login of a user or something like that. And this represents, you know, you might go, that's kind of unrealistic. I would catch that in debug bar or something.

you might go, that's kind of unrealistic. I would catch that in debug bar or something. And you probably would. But I find that pretty often I have a blade component that does too much. Like maybe it's looking in the session. Maybe it's doing some rag ex thing, like who knows? There's always like, there's always a few blade components in my application that I don't realize, but I accidentally did something

there's always a few blade components in my application that I don't realize, but I accidentally did something expensive and then they end up in a loop. And again, they cause big slowness, okay? So those are the two ways that I sabotaged this. So now that we got all that stuff over with, let's look at the magic of blaze, okay? We're gonna start by looking at the flux page, okay? So let's do that. If I do composer require, you have to spell it right.

So let's do that. If I do composer require, you have to spell it right. That's really important. Live wire blaze, okay? This is it. You just composer require it. Now you have blaze. You have one more step though. You have to run PHP, Artisan View Clear. And this is gonna clear blades view cache. Anytime you mess with blade,

And this is gonna clear blades view cache. Anytime you mess with blade, like you change the way that it renders something, you need to clear the view cache so that it knows to recash at all. This command, you've probably seen it before. It's part of your deploy script. I'm almost positive, okay? So now that we've done that, this is the page that took 700-something milliseconds

So now that we've done that, this is the page that took 700-something milliseconds to render with pure flux. Let's refresh it. And whoa, 35 milliseconds, 41, 30, incredible. It went from 700-something milliseconds down to 300 milliseconds. That's, I don't even know what that is off the top of my head. 25 times speed improvement.

off the top of my head. 25 times speed improvement. It's absolutely massive. So this is that. If you're using flux that stopped right here, listen, if you're using flux in your application, install Blaze as a drop-in installation, do nothing else, and your apps will be faster, okay? Now let's look at the other page, this normal blade component page.

Now let's look at the other page, this normal blade component page. Okay, that took a long time because blade had to do its first render 'cause we cleared the compiled cache. We do it again, and now we're back to the 700-something milliseconds that it took to load before. Blaze doesn't do anything to your blade components. It doesn't touch them.

Blaze doesn't do anything to your blade components. It doesn't touch them. It only optimizes what you tell it to. So let's get into that in the next episode. Let's look at how we can tell it to optimize our own custom blade components. I'll see you there.