Handle Top Virtualization

[00:00:00]
>> Evgenii: Okay, let's continue our virtualization journey. So we basically built the following thing we rendered the. So we implemented the bottom virtualization now elements getting recycled from top. But the next step is to implement the top fertilization and in our case now the item 5 and 6 should go on top before the item 3 and 4.

[00:00:27]
So what do we need to do here? So, we are basically going the backward direction now we need to exchange our arrays, the to house of the array, the item 5 and item 6 will go on top, while the item 3 and 4 will go on the bottom.

[00:00:47]
So it's basically the reverse of what we did for the bottom virtualization.
>> Evgenii: And let's finish this part and then we'll continue to change in the position. Let's go back to the code now. So we are back to the code and let's handle the top observer position now.

[00:01:16]
>> Evgenii: So when we handle the top observer. We again needs to fetch the data
>> Evgenii: But instead of using the nth pointer, we now need to use the start pointer. And when we fetch in the backward direction this means that we need to reduce the point value of the start.

[00:01:44]
Since we're now rendering the start minus one page, and we also need to reduce the end pointer, so we're fetching our data now. We don't need to replicate this part, but we are going to slice our array again into the two halves. So we're going to copy over this code and now we exchange two halves, but the true recycle part will become unchanged because the first half on the array should be unchanged.

[00:02:20]
And the second part of the array should be marked as a to recycle. Then we are going to reinitialize our pool.
>> Evgenii: And now the data that is unchanged, goes on top, while the data that needs to be recycled goes on to the bottom. Okay, now the pool is re-initialized.

[00:02:48]
We need to call the same method we've already implemented, which is the update data. And we pass our toRecycle array and the data that we want to. Well, I want to update. Wait a second. Yeah, maybe I made a mistake one second. So we need to actually do the toRecycle concut, and change, right?

[00:03:11]
Thanks a lot. Good eye. Okay, so we're calling the update data function to again, update the data, the text data that we are receiving. And now we need to handle the case where we move elements from top, so we provide the top case. And here let's implement this branch now.

[00:03:41]
So, as we discussed in the slides, we need to now look backwards. So, we're going to loop starting from the page size, because we need to loop from the end of the page size. So, we're gonna use props.page size, -1. Then because we are loop looping backwards, we need to make sure that we are looping until we reach the zero index.

[00:04:15]
And then we do i++.
>> Evgenii: So let's now understand how this will work. We'll see now that we're creating a new pointers. So the current pointer will start at the item 6 which will be the end of the first half of the data. So we are looping from the half of the array, but in the backwards direction while the next pointer will point us to the next rendered element.

[00:04:56]
So if we check the item 6, so we should render this right before the item 3. So it means the item 3 is the next rendered elements. That's why we're accessing it for the next property and how do we determine the position of the item 6? So we're going to use the y position of item 3, then we need to subtract the margin, and we also need to subtract the height of the item 6, and then we'll get the final y position that we're setting.

[00:05:37]
And then since we're looping backwards, the current pointer will become item 5, and we're doing the same thing for item 6. We're accessing the y position of item 6, then subtracting the item 5 height minus the margin, and we have the generic formula here. And once the element moved, we basically do the same thing.

[00:06:06]
The observer code will be the same, we just move the observer now to the top. So this part will not be changed. So let's get back to the code and update that. So we are five lines away.
>> Evgenii: So now we need to access the current element and the next one.

[00:06:33]
>> Evgenii: So for the current is just this pool and we're gonna use the index to access that. For the next one, we're gonna use this pool, i + 1.
>> Evgenii: Okay, and now we need to calculate the new y position for that. So the new y will be equal to the next.

[00:07:01]
So we need to access the next wide position- the MARGIN x 2- the current height.
>> Evgenii: Okay, so now we have the new y and we're basically using the same code now. We are setting the current element to new y, and we use the current style transform to set the current y position.

[00:07:41]
So the chord doesn't really differ from the from previous part, okay. Now the last thing that we need to handle is our top intersection observer should not be triggered when the page is zero, because if the page is zero, then nothing to be virtualized from to the to the top.

[00:08:01]
So, we need to introduce the condition here that validates that this start is more than zero. So, we don't trigger our observer. Okay, now we can run the code. So, let's get back to index.html and let's render the items. If we go now to the top, we should be able to see that elements will be moving to the top.

[00:08:36]
>> Evgenii: Nope [LAUGH] this didn't work out, let's see.
>> Speaker 1: I think in the loop, since we are moving backwards through the list, let's see. Line two of seven, do you need to decrement i instead of.
>> Evgenii: That's true, good eye, [LAUGH]
>> Evgenii: That's what I did one more time.

[00:09:07]
>> Evgenii: And it still doesn't work, maybe we need to refresh the page, but let's see the container state. Okay, I feel like the top observer actually works, but it works in a slightly different way. Let's go to debugger point one more time
>> Evgenii: Okay, and let's render things.

[00:09:40]
>> Evgenii: Okay, now we're going to the loop to see if the target ID is right.
>> Evgenii: The target is top observer, so we go inside.
>> Evgenii: I see, okay.
>> Evgenii: The start pointer is zero, so we are not updating the start pointer.
>> Evgenii: Okay, so first let's update the loop that cycle to validate that entry.target.id = bottom.observer.

[00:10:16]
To make sure that we don't fire the callback when the id is top observer. Now we need to validate that the start position is updating. Basically, when we do the bottom observer, we need to make sure that we update the start position here. So here, we need to increase the start by one.

[00:10:35]
And if we go back now, probably this should work.
>> Evgenii: Okay.
>> Evgenii: And let's go back to the top. Yay, it works. Okay, now we implemented the bottom virtualization, but there is one less thing. So when we scroll down, you see that our scroll bar is increasing, but when we scroll to the top, it's actually decreasing.

[00:11:10]
So we need to handle the last case where we keep our scroll bar somehow. And it's just one line code change. When we do the bottom observer, let's access the container,
>> Evgenii: getContainer and when we scroll down, let's set the style, the height of the container for the CSS to be equal to a scroll height.

[00:11:44]
So we use the scroll height property that will give us the size of the scroll bar and we're gonna use pixels, that's it. So now every time we scroll down we should see that our container now has the height set. So when we scroll to the top we'll maintain our score bar.

[00:12:11]
We implemented the virtualization from scratch.
>> Evgenii: And this is me not,
>> Speaker 1: [LAUGH]
>> Evgenii: [LAUGHl ] trying not to make a mistake in a coat [LAUGH].