Virtualization Technique

[00:00:00]
>> Evgenii Ray: So let's move on to virtualization. So, the virtualization is UI optimization technique that involves maintaining the data in virtual memory while rendering only a limited subset of the data. And the purpose of this pattern is to minimize the number of elements in the DOM, and reduce the number of mutations, and reduce the CPU and the memory usage in general.

[00:00:27]
Because the larger the DOM tree we have on the page, the harder it is to maintain it for the browser and the more resources we utilize. So let's overview the concept first on the high-level. So when we set up the virtualization, usually it's organized in a way that you have the top observer and a bottom observer.

[00:00:50]
So the top observer responsible for handling the case when you scroll up and the bottom observer when you scroll down, and also you have a viewport. When the viewport touches the bottom observer, then we trigger the callback that loads the next page of the data. So once the first page of the data is rendered, so this is item 1 and item 2, and as you can guess, the page size that we use here is 2.

[00:01:21]
Then we need to scroll down the viewport again to trigger it one more time, and then we render the item 3 and item 4. But the main difference with a lazy scrolling is because now when we touch the bottom observer again, we can't create more elements anymore. So this means that somehow we need to reuse already existing elements in the DOM to render the new content.

[00:01:56]
So what do we do? We select items that we want to recycle. And this is the item 1 and item 2. And as you can see, our viewport in the area where we don't see the item 1 and item 2, so for the user, recycling these elements is not visible.

[00:02:15]
So we need to pick the new space where we are going to move our elements, this will be right after the item 4 and item 3. And then we recycling element one by one. And once elements are moved to the desired location, now you can see that the top observers kind of see on the top, so we need to move this to make it before the item 3, while the bottom observer should be right after the item 2.

[00:02:44]
So once the recycle finished, we update the data, so now instead of showing item 1 and item 2, we show item 5 and item 6. And as a next step, we move our observers on the screen. This is the high-level overview. But to better understand the concept, let's actually code this.

[00:03:09]
So make sure you check out the following branch, the virtualization-skeleton-start, and open the file name virtual-list. So, for most of the time, we're gonna use just this file. And let's overview the first two exercises that we are going to complete. So the first one we set up the skeleton.

[00:03:32]
This means that we are going to render the basic template of our virtual list. That will be the top observer container, virtual list container, and the bottom observer. As a next step, we're going to set up the intersection observer to track the top observer element and the bottom observer element.

[00:03:50]
And we'll provide an empty callback that we're going to implement in the next sections. So let's get back to the code now. And here, if you want to follow along later, there are instructions here that you can use to implement it on your own, as well as the goal of the task.

[00:04:13]
But meanwhile, we'll transition to the virtual-list.js file. So let's overview the basic structure. We already have some methods predefined. The first one is the margin that we're gonna use to space the cards. And also, we have some function that queries the top-observer and the bottom-observer element. And then we have the function that queries the virtual list container, and the main container that contains all our containers.

[00:04:47]
Then we have the y function that we're gonna utilize later. So what this function does, it takes the HTML element, and if we provide it any value, it just sets the attribute data-y to the element. And I'll explain why we need this in the next sections. And if we don't provide the value, it just tries to get this attribute from the element.

[00:05:11]
And if the value is provided, it returns the number. And if it's not, then we just return null. Next utility function is the translateY, which just returns the CSS transformation to move elements around. So this is just a handy function to return the CSS styling. Then we have the skeleton class for a virtual list.

[00:05:37]
So, the constructor of VirtualList takes the root as a first parameter, which is the element where we want to render our virtual list. And then we have some set of properties that we are going to look at the next section. So then we have the toHTML file, which basically represents the kind of the render function, if we are speaking in React world.

[00:06:03]
So it returns the HTML template as a string that we're planning to use for our app. And there is also effect function that allows us to register any synchronous callbacks, for instance, intersection observer or something else. And the render function is very simple, it takes the root of the element and uses innerHTML and just renders the HTML that we provided as a string.

[00:06:32]
And then we register any asynchronous effects using this function. So you can ignore the rest for now.