Virtualization Pool Q&A

[00:00:00]
>> Speaker 1: Could you just show the y function again?
>> Erik: Yep, so the y function accepts the element and the value. If the value is provided, then it tries to set this value as attribute. If is not provided, then we just get the attribute. And if the attribute exists, then we return the number.

[00:00:22]
Here we do the cast because attribute is a string value. So we need to make sure that the y is the number. And then if it's not provided, then we return nope.
>> Speaker 2: Do you have a general rule of thumb when to reach for virtualization?
>> Erik: Yeah, I think the good rule of thumb is, when you work with the mobile apps where you need to make sure that you don't overuse the memory and you're expected to load many things, then the virtualization is a good way to go.

[00:00:53]
For instance, mobile app of the social network, or when you're rendering the table with thousands of elements, then where it's the best place to invoke that. But for desktop apps, I think we need to adjust the limit of the elements because desktops have a good memory amount. And instead of rendering only 10 elements and then do the virtualization, we can actually allow having 200 elements before we recycle.

[00:01:23]
Or we can even disable the virtualization because for desktops, virtualization is not that relevant because now the desktop have a very good performance and CPU. So we don't really need to overcomplicate the design of our app. But for the mobile devices, that's the best way to go.
>> Speaker 2: Someone said, most likely if you need to fetch the data in chunks.

[00:01:52]
>> Erik: So even if you need to fetch the data in chunks, you still can implement the lazy loading where you just update existing DOM tree without recycling the elements. Right now, the difference with virtualization, we always maintain a constant number of nodes. So we say limit is 20, so we can't exceed this amount.

[00:02:10]
But when you do the lazy list, when you load the data in chunks, then you can just append new elements on the screen without thinking about how do I need to recycle the previous rendered elements.
>> Speaker 2: Yeah, it's generally, I've only seen it really affect desktop if there's thousands of elements or more, because it did work on a backlog management utility app, I think it was like five years ago or something like.

[00:02:40]
I can't remember exactly how long ago it was, but I ran into performance issues with 1,000 elements, and it just was scrolling the list. Once it starts to feel sticky, that's a point you should consider-
>> Erik: Yeah.
>> Speaker 2: A tool like this, if it's just not scrolling, it's smooth.

[00:02:59]
>> Erik: I also agree. I think the virtualization is used in some places where they actually don't need it. If you have 95% of your clients on desktop, why would you overcomplicate the design of your app? You can just render things in a DOM tree, yeah.
>> Speaker 3: So when we set the position to absolute, and then we adjust the positioning, does that trigger a reflow?

[00:03:30]
>> Erik: So when we set the position to absolute and we adjust the position, we trigger the reflow, but remember the pipeline. So there is a optimized pipeline where we trigger just the painting. Whether you move elements around, we say transform, you don't trigger the full pipeline, you just trigger the GPU pipeline, and it doesn't impact the rendering thread.

[00:03:50]
That's why it's fast.
>> Speaker 3: Okay, [INAUDIBLE] That's the beta, essentially, [INAUDIBLE]
>> Erik: Yeah.
>> Speaker 2: How did position absolute solve the problem here?
>> Erik: So if you don't remove the elements from the normal flow, then they will take the position where they should be rendered. So you would need to adjust that.

[00:04:17]
But when we set it to absolute, then all the elements position are reset to top left most quarter. So we can adjust that position using the transformation. And we provided the relative container, which is the virtual list container as a reference point. So now all the elements use this container to calculate its position.

[00:04:41]
So if using the normal flow, you would need to account the normal flow positioning that would overcomplicate the calculations.