[00:00:00]

>> Evgenii Ray: So let's move on to virtualization. So, the virtualization is UI

[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.