will-change Exercise

[00:00:00]
>> Steve Kinney: There is, we're going to take a look real quick. I'll switch off this slide. We'll look at the "Paint Storming" example. We'll take a first look and we'll see right now it causes a paint storm. What we want to do is we want to refractor it, so that when the mouse enters it moves up to it's own layer.

[00:00:17]
And then when it ends, we put it back down or when the mouse leaves. So let's take a look at the code and then I'll give you some time to play around with this. So let's actually look at it in the browser first. I don't need the special, super special mode anymore.

[00:00:37]
We're going to paint storming, I've got this red box, click on it, look at that little green array paint follow it, let's refresh this, it's fun to watch. We're going to paint, and it's like a little paint storm, it's just repainting every pixel. All right, what is this?

[00:00:57]
So if we look at the code and we look under moving boxes, thought that was the other one, paint storming. Cool. We look under paint storming. Ignore that there is a solutions directory, it is not important. Pay no attention to the solutions directory. We are going to use jQuery for animation because 10 years ago, and that's what we're doing right now.

[00:01:20]
And you can see that that's using JavaScript to adjust the marginLeft, all right? And it's not surprising that that changes the inline style, which triggers a repaint, in this case, right? And we're doing it on every frame, and let's actually measure it for a second. Let's see what's going on here.

[00:01:40]
We'll refresh. I'm going to turn off the paint flashing when you also try to collect the performance metrics. Otherwise, things will be horrifyingly bad because the browser is also trying to paint all those green squares and you'll get noise. So you turn off the paint flashing. Click it.

[00:01:59]
>> Steve Kinney: And this is the process of getting that box 500 pixels over, right? And we can zoom in, we can see that there's some JavaScript, there is a recalculated style, there's a layout, there's an update layer tray. Composite some layers, and we're doing this repeatedly. So it would be great to not do this, cuz this is work.

[00:02:22]
Not doing work is faster than doing work. So we look at the code.
>> Steve Kinney: There is this move class, which seems to know how to get it all the way over, and there does seem to be a transition. So if we apply that move class instead of doing it as a jQuery, we could just use CSS transitions, right?

[00:02:43]
Seems like maybe on click what we want to say is add that move class and it should move. But then we're still making it's own layer and moving at the same time so we're probably going to need to write some extra JavaScript to be able to move it.

[00:02:57]
So this is your turn to give it a shot, then we'll do it together. So I'm gonna put this slide up for a second, but then I'm gonna go back to that other code that we saw earlier, and that'll be where I freeze it for a little bit.

[00:03:06]
But your job is to get rid of that jQuery animation, use the CSS transition, but when the mouse enters, when we wanna add will-change, when they click, we want to add this class. And then when the mouse leaves, where the transition ends, that will be when we put it back on its own layer because we are good citizens in the browser community.