Okay, I may be most excited for this episode over any other episode because you are going to understand code folding by the end of it. It's a pretty simple concept, but it wasn't obvious to me when I started building Blaze. When I came across it, hands down the biggest Eureka moment of this whole journey for me. And so much so that I doubled down on it. I trashed every other form of optimization. It was like, Blaze will be a code folding

I trashed every other form of optimization. It was like, Blaze will be a code folding tool because the technique is that powerful. Okay, so let me show you what I'm talking about. So far we have memoization, which is like caching. So you only pay the cost of the first component. So this is 12 milliseconds. But then all the subsequent ones, they're free. It's still 12 milliseconds, even though one component takes 10 or 12 milliseconds to render, right? And this is great, but it's only

component takes 10 or 12 milliseconds to render, right? And this is great, but it's only great for repeated components. If you think about it, if you have 10 different icons, none of those can be memoized. Let's say they're all expensive, you don't get that benefit. Memoization is good for repeated components, an icon that you're using all over the place, an avatar that you're using all over the place, something like that. That's where memoization

an avatar that you're using all over the place, something like that. That's where memoization really shines. Code folding takes it a step further. So check this out. If we have, you know, six of these or five of these, whatever, it's still only 12 milliseconds. But again, we're paying that upfront cost. Let's go into our button. And instead of memo, we're going to say fold. Okay. So we haven't done anything with that yet. The performance goes back down

to say fold. Okay. So we haven't done anything with that yet. The performance goes back down to 60 milliseconds, because we haven't implemented fold at all. As you can see, we're just going back to plane, requiring those files down here. Okay. Now let's implement code folding, and you'll just kind of see it unravel. Okay. So I already added a method called shouldfold. And let's go up here. And just a refresher on this is our whole compiler, by the way,

And let's go up here. And just a refresher on this is our whole compiler, by the way, we're just sitting in the in the blade compiler. And we're saying, Hey, should we optimize this thing? Does it have blaze? Great. Well, then let's compile it to our own little thing. Use require Oh, should we memoize? Sure. Let's wrap it in some memoization. I extracted this into a method called memoize, we memoize it, we return the output. Okay. Well, we want

into a method called memoize, we memoize it, we return the output. Okay. Well, we want a new thing in here, we want to say, so we get up to compiled, but before we just say that the output is to require, let's check if we should fold it. So we're going to say, if this should fold, and what do we pass fold? Just the path, yep, just like everything else. Okay, if this should fold. Now, what are we going to return here? This, I think,

else. Okay, if this should fold. Now, what are we going to return here? This, I think, is pretty cool. I'm just going to show it to you and see if you can see it, OB start, we're going to, you know, start the output buffer, return OB get clean. Okay. And again, if we like echo out, hey, right here, okay, and I hit save, look at it, just echo, hey, for every one of these, right? Because that's how output buffers work. We could have just,

for every one of these, right? Because that's how output buffers work. We could have just, you know, return, hey, there, right, let's see, could have returned that, that would be fine. Let's leave this open so that you can see the compiled output as we go . Okay, I know there's a lot going on in the page. Sorry about that. So if we should fold return, hey, there, but let's go back to the output buffer version. The reason I want to stay

hey, there, but let's go back to the output buffer version. The reason I want to stay in the output buffer is what if during compile time, we actually required that component, like we actually rendered it right in place at compile time. Now watch this, now this isn't going to work. I need to make it like this. Okay. If I hit save, what do you think is going to happen? What's going to happen? When it compiles, what's going to get written

is going to happen? What's going to happen? When it compiles, what's going to get written to the compiled file? We're literally requiring the component. So if I hit save , take a look at that. Look at that. Our button component right here with the use sleep of 10 milliseconds gets rendered and put into the compiled template. Now look at the render time 0 .46 milliseconds. It's not like it's this is it boggles my mind because it's a technique. It's prerendering

It's not like it's this is it boggles my mind because it's a technique. It's prerendering your prerendering component. This component took 10 milliseconds to render, but we somehow entered a world where it takes like zero milliseconds to render. Look at all those components I have on the page. If you look at the compiled output, you don't see any blade at all. There's no blade anything. And this was the big moment for me where I was like, wait a second. I

no blade anything. And this was the big moment for me where I was like, wait a second. I could prerender anything that is static. If you think about it, like if you have a variable like foo or something, you can't and you're passing it in, you know, you can't prerender that you don't know what foo is like if it's auth user or something like that, like auth user, I don't know, email, like you don't know that at compile time. It's different for

user, I don't know, email, like you don't know that at compile time. It's different for every user. You can't fold something like that. But something that is static, I just started looking around all of my templates in my apps and going, so much of this is static. So many times I just have a button where I say save. Why am I paying any dynamic cost for that at runtime? If it's a button called save, if it's an icon called trash , if it's

for that at runtime? If it's a button called save, if it's an icon called trash , if it's a dropdown with menu items with wire click with all these things, none of that is dynamic. It's all static. I should be able to code fold it, cold code, fold it so that it literally disappears. You fold away all of that complexity. The term actually comes from, let me see if I remember, it's like early compilers, like early, you know, like C plus plus C, things

if I remember, it's like early compilers, like early, you know, like C plus plus C, things like that, they would take expressions like this. So let's say, you know, you had like foo equals one plus two, and the compiler would go, oh, there's so it was actually called constant folding. It's like, hey, there are two constants and an operation. When we compile this program, let's do the operation at compile time. So the actual compiled program just

this program, let's do the operation at compile time. So the actual compiled program just has a new constant, because these things are never going to change at runtime. So at compile time, we can, we can pay that cost once and never have to pay it again. We paid it upfront, and now the user doesn't even hit it once. So they, you know, hard code constants, we're doing the same thing. We're going, all of this stuff is constant. None of it is dynamic.

doing the same thing. We're going, all of this stuff is constant. None of it is dynamic. We can literally pay that cost upfront at compile time. And now everything is free. That is how flux gets those huge performance gains, especially for simple static components, like buttons and icons. And you'd be surprised how much you can code fold and how many cool tricks we employ to allow us to code fold, even when there are dynamic situations like

tricks we employ to allow us to code fold, even when there are dynamic situations like slots and dynamic props, we can get into that. I feel like now you have everything you need to understand blaze, you've seen how to build your own toy version of blaze. So I think we can kind of cool it right now and go back to practical blaze and how we can implement, you know, memoization and folding in your application to squeeze tons of performance

you know, memoization and folding in your application to squeeze tons of performance out of it. But maybe at the end, we'll see if it's relevant. I could go back in and we could start adding more features to our toy component. And you can see the really, that's the beautiful part of blaze. The really beautiful part of the implementation is all the clever ways that we still code fold. But I always want to say cold fold. We still fold . But we

ways that we still code fold. But I always want to say cold fold. We still fold . But we allow you to pass dynamic things in. And that's the really cool stuff. So let's , let's stop it with our toy. I think we did a pretty good job here. Let's let's just watch it a little bit just for fun. Okay. So this is with code folding, which is awesome. I'll open this. Do this be button here. So fold true, folds it. I say memo true. It's going to memoize

Do this be button here. So fold true, folds it. I say memo true. It's going to memoize it 12 milliseconds. If I don't do any of that, if I have three of these, let's say, I don't do any of that. It's just raw require statements. So we go from 37 milliseconds to 12 milliseconds to zero milliseconds. How cool is that? That is really the blaze story. So let 's, let's in the next video before we close this part of the book, we will compare actual blaze

in the next video before we close this part of the book, we will compare actual blaze compilation to our own toy blaze compilation. So you can actually draw the parallels. So because your brain is in this, you understand what you're seeing. I want to draw lines to what is actually in blaze so that you can understand blaze by leveraging the knowledge you already have. So I'll see you there.

you already have. So I'll see you there.