Creating a Virtualization Pool

[00:00:00]
>> Evgenii Ray: Okay, so we completed the part 3, so now we have our start and end pointer and we also rendered the data, but the next part will be slightly more complex. So now we're going to initialize the pool of elements in the memory that we will maintain. So once we render item 1, 2, 3, and 4, we'll place them in the virtual memory array that we maintain.

[00:00:26]
And when the user scrolls the viewport, when we scrolled down and triggered the bottom of the observer again, what we're gonna do first, we're going to slice array in half and swap the places. So, the item one and item 2 will become the last elements, while item 3 and 4 will become the first 1.

[00:00:49]
Visually, there will be no changes yet because we don't utilize any, we don't move any elements yet. But as the first step, we need to update the how elements are stored in the memory. So we also update the start and end pointer, because now the start will start will start from the page two and the end will finish on the page three.

[00:01:12]
So let's now let's jump to the next section of the code, okay, so we're back to the bottom observer. And as we mentioned before, now we can't just render elements as we scroll down, so we need to have some kind of a limit. And we can define this limit as a double of the page size, so we can create a new variable called this limit.

[00:01:42]
>> Evgenii Ray: And it will be equal to the double of the page size, so we always maintain two pages in memory. And we also need to create a virtual memory array where we store our HTML elements that are created, because we need to have some reference to them. So if we scroll down now to the bottom observer, so here we can create more elements if the limit is reached.

[00:02:13]
So what we need to do we need to check if this pool length is less than the limit that we set.
>> Evgenii Ray: So we need to move this code under this condition and now we only append elements if the limit is reached and also we need to populate our pool with a new card element.

[00:02:41]
>> Evgenii Ray: So now when the limit is reached we will not render any more elements and we can verify that by running the index.html again, so let's see if it works. So now we should render at max 20 elements, so there will be no new events page, so we reached the limit.

[00:03:01]
So the next part would be to exchange the data and swap the halves. How we do that is let's create a new function that will be responsible for that and let's call it, so it'll be called this update element.
>> Evgenii Ray: So actually.
>> Evgenii Ray: So we can do it right here, so if the limit is not reached, so we need to now cut our pool into the two halves and basically swap the places of these two halves.

[00:03:49]
So let's cut our array using the slice function, so the first part of our array will be called recycle, because when used to recycle elements from the top, which is exactly the first half of the array. And then the next one will be called unchanged because we we're not playing to recycle them.

[00:04:11]
Okay, so now I'm going to slice the pool into two halves, so I'm going to use the slice function and the first half and from its from zero to the page size and the last half starts from-
>> Evgenii Ray: The props page size, so if you don't provide a second argument, then we just slice from the page size and to the end.

[00:04:49]
Okay, now we have our two parts, let's reinitialize the pool and swap the places like we saw on the slides. So we create, we update our pool and we do unchanged and then we concatenate the tree cycle array. So now in memory we actually switch the places, but it will not reflect on the UI, because right now it's just a memory operation.

[00:05:22]
So now we need to update the data, so because we fetched some data here, so we can actually update the data of the elements. So the elements will not be moved yet, but we can still update the text content of these elements. So what we're gonna do is we're gonna call the update data that accepts the elements that we want to recycle and it also accepts the data that we just fetched.

[00:05:52]
And let's implement this one, so we need to loop for the data that we receive.
>> Evgenii Ray: And actually let's use the index cycle instead.
>> Evgenii Ray: So we're gonna loop through the data
>> Evgenii Ray: And now we are going to use our function that we provided, the update element, the update template.

[00:06:33]
So the update template function accepts the new piece of data that we just fetched, and we can access it by using index. And then we need to provide an element that we want to update and we know this element because we're providing the elements array that we want to recycle.

[00:06:52]
And we pass the element. Using the index, okay, now we are updating the data of our elements. And if we go back now to.
>> Evgenii Ray: To the bottom observer, if we scroll down, so we reach the bottom, but then when you click the bottom observer again, you see we just updated the data of our cards.

[00:07:25]
And we can just continue this process and the data will be updated, but nothing is moved yet because we haven't applied any transformation. So we basically did exactly the separation, so we swapped the places with the array and also updated the day of these items. The next part will be to recalculate the real position of the elements and how we are going to do that.