I Tried New Livewire Blaze for Blade Components (1.5x Faster?)

Hello guys, in this video I will demonstrate to you the new Blaze by Caleb Porzio. Finally released after he teased it and demonstrated it last summer at Laracon US. Now it is out and we can use it. In short, it's a different way of compiling Blade in Laravel and Livewire projects to make it much faster if you have a lot of blade components on the same page. Here's my demo. So imagine there's some kind of dashboard with a lot of things that are repeating with blade components. So each block here card is repeating. So icons are repeating some tags and icons here and there. And every task is a row which is a blade component. And imagine you have 200 tasks in this case with repeating components. And the code looks something like this. So task dashboard blade. So there's task stat card repeating blade component then task button task icon and then there's for each or fors of tasks and each task is task row which is a blade component. Then inside of each of those rows we have task icon, task badge and task avatar. So a lot of repeating blade components which take some time to render and load. So what Caleb is suggesting is different and optimized version of blade. So first let me demonstrate to you the numbers before and after. So this is the page loaded without blaze with typical blade. And if I refresh it at the end at the very bottom I have a component of render time. Let me zoom that very much in. Render time is 78 milliseconds for all those components. It is not exactly for blade but it's calculated at the very end in the livewire component here task dashboard. This is a computed property calculated the micro time difference between now and Laravel start and then at the very bottom it is rendered here. So it's rendered at basically almost very end. So it's not the most precise management and I will show you more precise by blaze in a minute. But let's just imagine the difference. Render time as I showed was 78 milliseconds. If we enable blaze which I already installed and enabled and I will show you the code in a minute. And then we have environment variable env blaze enabled true. For that to take effect we need to clear the view. So clear the cache to run view clear. And let's refresh the page. We refresh the page and of course it is cached and then we launch it again. And then it's down to 57 58 59 milliseconds. If we disable blade and again recompile the first time it is run it will be much slower 122 milliseconds and then after caching it is roughly 80 milliseconds. So from 80 to like 5760 milliseconds and also there's official blaze debugger which you can enable in app service provider. Again, first I will demonstrate you the difference and then we'll dive into the code how Blaze actually works. But if we refresh that now, this is at the bottom right. That's why I had to move my face in the video to the left side. This is 52 milliseconds with Blaze. And if I refresh that again and again, it's 5257, but that is with blaze disabled. This is compilation of blade without optimization. Now let's reenable that again and run view clear again. And now we refresh and we will see the difference as measured by blaze itself. This is 31 33 36 37 something like that. I'm not sure if we can zoom that in enough. So it's 1.5 times faster. And you can also open the profiler which will show you everything in detail. which component, how much it took and all that is debugable and you can analyze yourself. So these are the numbers for 1,000 components roughly on the same page. Official numbers by Caleb are even more impressive. So on his own testing with 25,000 components in a loop, as you can see, the reduction is impressive. Over 90% loading time. Not sure how often you have 25K anonymous components, but if you have a page with a lot of Blade components, I think you should consider Blaze. Now, how does it all work? First thing you need to understand is that Blaze is a drop in replacement. So, it's not replacing fully Blade component rendering mechanism, but it enables Blaze whenever you want it to be enabled. So, after installation, you have a few ways to enable it for specific components or folders. So for example, you can add blaze directive on top of individual components which I did here for example in task row blade as you can see on top or you may optimize entire folders if you go to Laravel app service provider you can do something like this which I also already did. You saw that code already in the app service provider and that's basically it. then you may want to enable or disable blaze altogether with this enviable for testing. And also don't forget you need to run view clear every time you run true or false on blaze. That's all you need to know to enable blaze. But it goes actually much deeper into how exactly you want blaze to be enabled. For each component, there are three possible strategies. the default without any more parameters or you may specify memo or fold. So if you don't specify any of those how function compiler works in general is instead of compiling and rendering each blade component like it's done in the default Laravel it compiles to something different to a function. So internally the main point is that it skips the standard rendering pipeline of Laravel for specifically that component where you define the blaze or the activated folder where you enable the blaze. So naturally the more components that you have on the page the faster is the rendering of overall page. And if you get back to those memo and fold types those are even more aggressive changes to blade compiling mechanism. So for example, runtime memoization to enable that you just provide memo true to some components. For example, Caleb is saying that it's for frequently appearing and repeating components like icons for example. So for example, here in the task row I have X task icon and on top we have blaze with memo true for that. So then that memo mechanism wraps that in a cache check and renders it the first time it's used with those props. So basically it's kind of like cache internal cache for blade components. And then there's compile time folding is the most aggressive optimization. To be honest I didn't fully understand when it needs to be used but the main thing is just component ceases to exist at runtime. It's just the HTML and you can read more about that in the docs. And the docs are actually very deep and you should read that in full because there are a lot of warnings and caution blocks. In addition to that, there are limitations. I will not go too deep into them. But for example, class-based components are not supported and a few more things that you need to be aware of before using Blaze to avoid any bugs or issues. Also, for example, memoization only works on components without slots. Then again the same caution with careful consideration to avoid bugs for most aggressive optimization. Also components that use global state should not be fault true and so on. Again you should read all the docs but generally for some use cases if you have a lot of blade components blaze is genuinely really impressive. Some people even say that blaze should be enabled by default in Laravel blade or even instead of Laravel blade. I would not be hurrying with that because again there are a lot of warnings and caution marks here in the docs but we'll see what the community will say at least Taylor himself endorsed it as absolutely unreal so we'll see what happens in the space so yeah that's Blaze in action do you have any projects where you will actually use it if you do let me know the use cases and if you try it out what's the before and after in your case let's discuss all of that in the comments below that's it for this time and see you Guys, in other videos,