Blazor Community Standup: Blazor virtualization gets flexible
dotnet
0:00 Heat.
0:01 Heat.
0:21 Heat.
0:22 Heat.
0:23 N.
0:31 Heat.
0:32 Heat.
0:33 N.
0:42 Heat.
0:43 Heat.
0:44 N.
1:18 Heat up here.
1:44 Heat.
1:45 Heat.
1:46 N.
1:54 Heat.
1:55 Heat.
1:56 N.
2:32 All right.
2:33 Hello everyone and welcome to another Blazer community standup where
2:38 we talk about the latest updates in .NET web development.
2:41 I'm Daniel Roth.
2:42 I'm the principal product manager for ASP.NET Core and Blazer on the .NET team.
2:48 And today we have a very special guest.
2:50 We have Alona here from the Blazer engineering
2:52 team to talk to us all about virtualization.
2:56 Hello Alona.
2:58 Hello Dan.
2:59 I'm glad to talk to you today.
3:01 It's great to have you back.
3:02 We're excited to talk to you.
3:04 Sounds like you've been working on some some pretty
3:06 interesting and exciting stuff uh in the the Blazer framework.
3:10 This is all work for .NET 11.
3:12 Is that right?
3:13 Yes, exactly.
3:14 In .NET 11, we decided to focus more on virtualization component.
3:21 Uh where virtualization component in Blazer is
3:25 used for lazy loading items for big lists.
3:30 If you don't feel like keeping your whole list in the memory,
3:35 you can decide to load just chunks of it into your application.
3:43 And uh how does it work is basically
3:45 that you're loading what the user sees right now
3:49 in the in the very moment plus additional items at the top
3:54 and the bottom of this uh window that user sees.
3:57 And this window that user sees we will be calling it viewport.
4:01 And those items that are above and below
4:05 uh we will be calling it over scan items.
4:08 These additional items and um how many of these overcan
4:13 items uh you're loading as a developer is your choice.
4:17 By default in net 10 we used to uh
4:21 load three of them uh three upper and three lower.
4:25 So in total six uh in net 11 we decided to increase that number to 15.
4:31 Uh we will be talking tiny bit about uh that later.
4:36 You will understand the decision probably then.
4:39 Uh so uh yeah so to sum so virtualization is that problem where
4:46 you have a long list of items like like
4:48 it could be tens of thousands of rows right
4:50 like hundreds of thousands of rows that you're trying to
4:52 whatever you keep in your database
4:54 to allow the user to to to have a viewport
4:57 over that data data set without having to load all
5:01 of that data into memory without having to render all
5:03 the rows for that uh data at the same time.
5:05 So you sort of have a virtualized view over that that data set.
5:11 And we've had this support for a while, right?
5:12 Right.
5:12 That virtualization is not new.
5:14 We've had a virtualized component is not new.
5:17 Uh we used to have support for fixed item sizes.
5:21 Uh so before if you wanted to load something
5:25 like I don't know chat messages or uh feed,
5:29 you had to unify all your items to the same size.
5:34 uh probably it was uh problematic for some users
5:39 that had to fix this size regardless of the content.
5:44 So this was limited virtualization support in Blazer.
5:47 It was you you you could you could virtualize anything you wanted
5:51 as long as everything was the same height like that kind of makes sense
5:54 because that um I assume with virtualization you have this viewport right
5:58 and you're trying to based on the scroll
5:59 position you're trying to calculate like
6:01 which which items should I be showing at any given point in time
6:05 that calculation is reasonably straightforward if you
6:08 have a bunch of items that are
6:09 all the same height um but it sounds like intent 11 we've been
6:14 working on being able to have items of variable height inside the list.
6:19 That's true.
6:21 That sounds difficult to do.
6:25 It is more difficult.
6:26 That's true.
6:27 Uh I wanted also to add one additional information to that.
6:30 Uh because I mentioned that we have viewport
6:33 uh we have overcan items and that's not all.
6:36 We also have spacers and these spacers are very
6:40 crucial for virtualization because they let us display the scroll
6:47 in a proper way because you can imagine that okay
6:50 loading chunk of items into memory is not such a problem.
6:55 The problem is to estimate how the scroll
6:58 should look like so that you're scrolling
7:01 to new items that were not loaded before you send a request to the database.
7:09 Okay, makes sense.
7:11 Scroll that doesn't jump.
7:12 It's going smoothly down or smoothly up.
7:15 So you have your viewport with the items you're currently seeing.
7:17 You have the overscan items which are like a few a few before,
7:22 a few after of items that you've also rendered so that it's when
7:25 you start scrolling it kind of can smoothly transition into those set of items.
7:30 And then you have spacers which are just like placeholders to make
7:34 sure that the scroll bar looks like it's the right height, right?
7:36 Like if you have like 10,000 items, that scroll bar should be pretty small.
7:39 It shouldn't look like just the items on the screen plus the the overscan items.
7:43 So that kind of simulates the the fact that simulates having all
7:47 the items loaded even though you really haven't loaded them for efficiency sake.
7:51 This is all this is all fundamentally just a performance improvement, right?
7:54 You're trying to avoid um costly rendering,
7:56 costly loading of of of the of the data.
8:00 Yes, exactly.
8:01 Thank you for helping me explain that.
8:06 And
8:06 I'm just making sure I understand Aluna.
8:09 It's a pretty tricky space this this virtualization stuff.
8:12 Okay.
8:12 So, um, so then what are we what's what's what's what's new in DOT 11?
8:17 Like what are the things that we're trying to address with this?
8:19 This is functionality that we've had.
8:20 Well, what are we um improving?
8:26 Uh, so in net 11 we uh first of all started with variable hate items.
8:35 Um you as a developer you are setting item size in uh in a fixed hat.
8:43 Uh we were using this item size without any adjustments.
8:50 And right now in net 11 for all
8:54 the virtualization components without uh you needing to do anything.
9:01 We will use this value for item size that you're setting
9:06 as a initial estimate for the placeholders for the first render.
9:12 Uh because after the first render we would be already able
9:19 to measure what's the distance between the upper spacer and lower spacer.
9:26 We also have the information how many
9:28 items got loaded into the viewport plus overcan.
9:33 So we can assess what is the average
9:37 item size for the future renders of placeholder placeholders.
9:43 Uh how does it matter?
9:44 It matters because um thanks to the more accurate placeholder,
9:50 when the item really loads into the viewport,
9:56 the scroll on the side doesn't jump
10:01 and you have like smooth scrolling up and down.
10:06 Uh we are using for that running average.
10:09 So uh we are accumulating uh this hat uh in one variable uh
10:14 in the other variable we are accumulating
10:17 the number of items loaded in the memory.
10:21 Uh and uh this is uh the reason why
10:25 we decided to increase overcan count because for few
10:31 first renders especially when you have smaller viewport bigger
10:36 items this item number is maybe not that big.
10:40 Uh calculating average is harder when you just use overcan of three.
10:48 Uh we increased it to 50%.
10:51 Yeah, a few more samples than just three to get a good out.
10:54 Exactly.
10:54 Just to have more samples at the beginning otherwise
10:57 your your performance of virtualization component would improve over the uh
11:03 usage which is still true if uh the sizes
11:07 of items oscillate uh more or less around the calculated average.
11:14 If they are not let's say at the very beginning of the list
11:17 very very small in the end very very big because then you
11:22 understand that the average the running average cannot be correct all the time
11:27 that there will have to be some time for it to adjust.
11:32 Uh yeah so uh this helps us to be more accurate.
11:37 uh if you don't like it,
11:39 if this is uh any breaking change because you care very
11:43 much about the performance and you cannot afford loading more items,
11:48 uh feel free to overwrite it.
11:50 Check out uh how it works uh with your with your component.
11:55 So before we had the item size property where you
11:58 could explicitly specify what you expected the height of each item.
12:01 Now we still have it.
12:02 Yeah.
12:02 And it's still there.
12:03 And we use that kind of as like the initial estimate.
12:06 Yeah.
12:06 For the first render,
12:07 we will calculate then a a running average of the height
12:10 of the items as we as we render them.
12:12 And we render a bit more than we used to.
12:14 Like we used to only do three over scan before above and below.
12:17 Now we'll do was is it 10?
12:19 So it's 30 in total.
12:21 30 in total items.
12:22 So we get a pretty decent idea of the average height.
12:24 And then that average height you said was used for is
12:27 that used to then figure out how big to make the spacers.
12:30 Yes, exactly.
12:31 Okay.
12:31 So that you then have an appropriate uh scroll position, right?
12:35 Okay.
12:35 That that that makes sense.
12:37 Um do you want to show some show some code?
12:39 Show some examples.
12:41 Yeah, I think it's it's time for sharing the screen.
12:45 We will share your screen.
12:46 There we go.
12:47 Uh right now I'm just displaying the uh old uh fixed head list.
12:52 Um as you see it was working very nice for fixed ones.
12:59 But let us see how it works now with variable items.
13:06 Oh, we have Yeah.
13:11 Um,
13:12 this is kind of like a a Twitter like feed of social posts.
13:17 Yes.
13:18 Uh, these posts will be increasing in numbers.
13:21 Now we have 13 of them.
13:23 They will be uh coming.
13:25 You could probably zoom out a little bit.
13:27 I know we I got you to zoom in.
13:28 Yeah.
13:29 Yeah.
13:29 Give a little bit more.
13:30 Yeah, that's fine.
13:31 There we go.
13:32 Okay.
13:32 I was afraid that it might become not visible.
13:35 Yeah, I think it looks all right.
13:38 Okay, I will also make it not move for some time
13:43 so that it's easier for us to observe how the scroll behaves.
13:47 And now I was scrolling.
13:48 I'm looking for something that will be uh expanding.
13:52 But as you can see, some items are smaller, some items are bigger,
13:58 and only the items that are currently
14:00 visible are being are being actually rendered.
14:03 Plus the the overscan counts above or below.
14:07 Yeah, makes sense.
14:08 Yes.
14:08 And new items are arriving at the top.
14:11 Uh we can see that the scroll is then jumping moving tiny bit.
14:18 Oh, interesting.
14:18 Okay.
14:19 So because this is like as a new post comes in that post
14:22 is being append uh prepended on on in this list in this case.
14:26 Exactly.
14:27 It looks like any popular social feed uh designs that we support right now.
14:34 Um and I'm trying to figure out uh ah we could uh
14:41 show let's say how um these variable hat items can change size.
14:48 So let's try to expand this item as as you
14:52 could see nothing moved like this Sarah's post state where it
14:56 used to be now when we are collapsing still everything is
15:02 in its place we didn't get travel sickness from reading it
15:08 not only can you have variable height items you can have items that sort
15:11 of dynamically change their size as as the uh the the the items are rendered.
15:16 Is that is that right?
15:17 Uh yes, exactly.
15:19 Go ahead.
15:20 We could have like um I I don't have it done deterministically anyway,
15:25 but we could have a button that is loading an image uh that is
15:28 huge and then we it would be same as if we expanded this show more.
15:34 Now we we haven't shown actually the code
15:35 for like what using the virtualized component looks like,
15:37 but um I'm kind of curious does this does this need to do you need
15:40 to change anything in your code in order to get this this kind of behavior?
15:44 Oh no, no, you don't need to change anything.
15:46 Um, of course, beyond maybe over sky count that we already mentioned, uh,
15:52 if you will have any performance uh,
15:55 concerns about that, but everything else is working um, out of the box.
16:03 Yeah.
16:03 Can you can you show the virtualized component just really quick like
16:05 what the code looks like for people who haven't seen that before?
16:08 So there it is like that virtualized tag.
16:10 So you're just wrapping
16:12 you're basically you provided a list of items and then the content
16:16 of the virtualiz tag is what's going to be rendered for each item.
16:21 Yes, exactly.
16:22 So uh here we can pass either items in memory.
16:24 These are items from memory uh or item provider that is
16:28 loading items uh from let's say database asynchronously from your list.
16:35 Makes sense.
16:36 Um, and if you had so if you had tried
16:38 to do this like a variable height rendering with virtualize
16:42 inn net like net 10 like before we had variable
16:44 height support like what what what happens like what does it
16:47 what does it do like if you have items that are
16:49 not all the same height does the scroll bar just
16:53 like look like is it is it inaccurate is that basically
16:56 what happens like the uh the spacer calculations get off
16:59 yes exactly uh so the scroll jumps whenever spacer uh is
17:05 miscalculated It can even get into oscillations in some uh specific conditions
17:11 when we um are at the very edge of seeing the spacer
17:15 and then the measurement come and then the spacer is hidden.
17:19 Um yeah.
17:22 So cool.
17:23 Okay.
17:23 And so you don't need to do the the variable height
17:25 stuff just lights up um with the same code as before.
17:29 The item size just becomes an initial estimate as opposed to a a fixed size.
17:34 And this shipped with preview 3, right?
17:36 Like this is already publicly available.
17:38 The the Yes, this is publicly available.
17:40 It's in preview 3.
17:42 You can check it out.
17:43 And we would be very grateful for uh feedback
17:46 and for information uh how it works with your very use cases
17:52 and I know back here is a major concern like as we like are
17:55 evolving the virtualiz implementation and fiddling with things
17:58 to try and enable these other scenarios.
18:00 We're trying very hard to make sure that your existing scenarios don't break.
18:03 Like you shouldn't you shouldn't have to change
18:05 your existing code for whatever behavior you had previously.
18:08 Um so even if you're not expecting to use variable height items in your UI,
18:12 we would still love for you to try out a 11 build preview 3 or later uh to just
18:17 let us know like does does what you had
18:19 before still work because that's the that's the intent.
18:21 If it if it breaks in any weird ways,
18:23 that's a that's a bug and uh we'd want to know about that.
18:26 So all you virtualized users out there,
18:28 even if you don't care about variable height,
18:30 please try a 111 build so we can make sure we're in we're in good shape.
18:37 Uh okay.
18:39 And what else I wanted to show here in social feed?
18:42 Uh I um I noticed that uh some customers were uh very
18:49 curious if jumping will work with uh virt with variable head virtualization.
18:57 Uh and we made sure that yes it does.
19:01 What's the problem with jumping in general is that uh
19:05 when you get to the edge of the list
19:10 from some other location and uh you have slower
19:16 connection because with fast connection it doesn't show that much.
19:20 Uh then you might have the placeholders rendered first
19:26 so that um your scroll gets to the bottom
19:32 for the very short time and when the items get
19:35 loaded for real it bounces back let's say to that location.
19:40 So your jump to the end was not really effective.
19:45 you would have to jump again and sometimes
19:48 in net 10 actually I had to jump several times.
19:53 Uh
19:54 right now right now it's moveless like you see and home I
20:01 can do it as many times as I want and it works.
20:03 So you're doing jumps using the keyboard there, right?
20:05 Like like Yeah.
20:06 Yeah.
20:06 This is and home key, you know, on my keyboard.
20:09 So in in is that um is that a difference in behavior just
20:14 when you're using variable heights or was this problematic even in 10 when
20:18 you had fixed heights like if you tried to do home and end
20:21 on a virtualized list in 10 with fixed heights did that used to work
20:25 height it would work it would work because uh we knew up front what's
20:31 the size of the item so there was no surprise of placeholder versus real render.
20:39 third item.
20:41 So, so it's just there was a complexity that gets
20:44 added when you try to do jump to beginning,
20:45 jump to end when you don't know what the heights of all
20:47 the items are and then there's a additional set of work to do there.
20:52 Okay, cool.
20:53 So, jump to beginning, jump to end, that works.
20:54 That looks great.
20:59 Uh, I know you showed expansion of individual
21:00 items that we can handle the uh correctly
21:03 behavior of um expanding an item in place
21:06 and that uh that's that's totally fine.
21:08 that will not like cause weird jumping
21:10 or fluttering in the uh the scroll bar position.
21:13 Um yeah, should we what want talk about should we talk about anchor modes?
21:18 Is that
21:18 I think that we could go to anchor modes, right?
21:21 Talk about anchor modes.
21:22 What are anchor modes, Alena?
21:26 Uh so we are now working on a problem that some users had.
21:32 Uh there are different expectations for virtualization.
21:38 Some people would like to keep their uh scroll
21:43 at the very very top like social feed and have
21:49 their users always see the newest updates when they arrive
21:53 when new items are prepended to the top of the list.
21:58 Some users would prefer totally opposite uh that they say let's say
22:05 they have u chat or they they have log viewer and they would
22:12 like their users to stick to the end of the list and whenever
22:16 the update comes they want the scroll to autof follow to the edge
22:24 so that they don't have to manually scroll.
22:28 And um to support this uh need uh
22:32 we decided to introduce a new feature anchor mode.
22:37 This mode will have free free values that you can set.
22:44 The default one is beginning mostly because in net
22:49 10 that's exactly the behavior that you're experiencing.
22:53 So when you're at the beginning of the list,
22:56 your top scroll uh your scroll top is zero.
22:59 New items will arrive to the top and the browser
23:03 does everything to stick to this scroll top zero.
23:08 Uh we didn't break that.
23:10 It's uh working the same way by default without you changing anything innet.
23:20 But we added first of all some fixes to this beginning mode when you are when
23:27 your viewport is tiny bit lower which means
23:31 that the viewport doesn't change maybe I will first
23:36 show you how net 10 if I find the application with net 10 I think this is
23:41 10 yeah uh how net 10 um behaved
23:46 these are fixed items when we are prepending something.
23:50 So let's say we are at the okay this is
23:55 a middle this is middle we are in the middle
23:57 and we prepend 10 uh pay attention we have 42
24:01 at the top now we have 32 now we have 22 12
24:08 two so we're going up and up and up which is
24:12 not the best user experience if you scroll to the top
24:15 like you I'm guessing we see like negative numbers now
24:17 in the in the list is that does that or
24:20 we would see if I implemented it properly.
24:22 But yes, but the reason so the reason
24:26 why it's jumping up is because the I assume
24:28 that's because we're basically keeping the viewport sort
24:31 of at the same height in the virtualized uh list.
24:35 Yeah.
24:36 And so we are trying very much to stick to the same position of the scroll.
24:41 Yeah.
24:41 Yeah.
24:42 Not paying attention to what's going on with the viewport at the at the time.
24:47 Gotcha.
24:48 Okay.
24:48 that make that kind of makes sense why why that happened that way.
24:50 But I can also understand why in some cases that would be undesirable
24:54 like as you as you're inserting or modifying the overall list and the user's
24:58 looking at something um you they might not be happy if you're like
25:02 jumping them around when they're trying
25:04 to read a particular Twitter post or whatever.
25:06 This behavior is very much welcome when we are at the very
25:10 top of the list like this is awesome that I prepend uh actually.
25:18 Yeah, I prepend and I see new items all the time.
25:22 Yeah, makes sense.
25:23 But as soon as I scroll away, we wouldn't like to see it.
25:26 That's what we wanted to fix and we had it fixed.
25:31 Uh so I don't remember how much I I already told you about the new feature.
25:39 I told you about beginning being the default.
25:42 Aha.
25:43 I wanted to say that right now in beginning
25:45 mode when you are in the middle of the list.
25:49 Uh these jumps don't happen.
25:52 So we change to beginning which is the default.
26:00 We have 113 post 114.
26:03 Awesome.
26:04 It loaded.
26:06 Let's go tiny bit to the middle.
26:09 So I'm like reading something mid mid midstream.
26:12 And if we get another post that comes in 16 perfect where it is.
26:19 Okay.
26:20 So beginning will stay at the beginning if you're at the beginning.
26:22 But if you're in mid if you're like reading
26:24 something further down the list and something gets prepended,
26:27 the beginning anchor mode will not jump.
26:30 You'll you'll you your your viewport would be preserved.
26:33 Whereas was it none none will just like leave the viewport wherever it's at.
26:37 Is that is that the old behavior?
26:39 Uh yes, that's the old behavior,
26:42 but not fully because uh when you go now with none
26:45 mode to the very very top and wait for another post.
26:49 We have 120 right now.
26:53 Yeah.
26:53 And you see we didn't get scrolled to the new post.
26:57 We have 121, but we still got stuck to Jake Morrison post.
27:03 Okay.
27:04 Okay.
27:05 Um so the which one which one represents
27:07 the net 10 behavior that would be the um
27:11 tiny bit non-tiny bit beginning depending where you are
27:14 with the scroll if you are at the very top
27:18 beginning is net 10 behavior if you are
27:22 at the middle of the list none is net 10 behavior
27:25 I see but we think do we is that is so
27:28 it's in some sense is a breaking chain like if someone
27:31 not really because I don't believe that users that were
27:35 in the middle of the list expected their content to move on.
27:40 There you go.
27:40 Okay.
27:41 Okay.
27:41 Yeah.
27:41 So that's important.
27:42 So we think that the behavior we had on attend was somewhat undesirable.
27:45 So we've actually that was a bug in my understanding.
27:47 So if you disagree anyone who's like no no I want that behavior.
27:52 Tell us now in the preview.
27:54 Currently we think we're not gonna we'll have aspects
27:56 of it in beginning anchor mode and non- anchor mode
27:59 but not uh we won't actually have a fully
28:01 back compat option that does exactly what net 10 is.
28:04 Okay, that's interesting.
28:06 Cool.
28:07 All right.
28:07 And then end is presumably just the opposite of beginning,
28:09 right where I want to kind of pin to the end of the list.
28:12 Um, we can go to chat and end mode is on here.
28:18 And as you can see, we're having new messages coming.
28:24 And our scroll is autofollowing to the end.
28:29 I can also post something.
28:31 And it also autof followed as soon as I go up.
28:35 Uh where is the counter here?
28:37 16 messages.
28:38 Let's wait for more.
28:42 17 scroll jump tiny bit, but we're still reading the same content.
28:46 Your scroll position.
28:47 I some some of the AI agents that I interoperate with I wish had this behavior.
28:52 I feel like sometimes when I'm like scrolling up
28:54 and I'm in the middle of an AI gen that it will like jump me back
28:57 to the the bottom again when I'm trying to read something.
28:59 So I I like that this uh when
29:01 the user has has decided they want to read something
29:03 mid mid view that it uh and something new
29:07 comes in that it doesn't disrupt their their their stream.
29:10 Let's hope it will help them.
29:12 Yeah.
29:14 So those are anchor modes.
29:15 So those those are basically features that um
29:19 are for managing the scrolling behavior when the list
29:23 that you're virtualizing that you're that you're rendering
29:26 um gets modified when things get get inserted.
29:29 Yes, this was for append or prepend action.
29:33 uh and I would like to talk tiny bit more about the details so
29:37 that users are aware what it's connected
29:41 with because it's tiny bit different than
29:44 our uh variable hat uh they have to take some action even though uh
29:52 beginning mode is uh the default one and it shouldn't break anything there are
29:57 some corner cases so how does it work in general that we are able
30:02 to stick to the same viewport that was there before prepend or append is
30:09 that um JavaScript is continuously saving a snapshot
30:17 of which item is at the very
30:20 top of the viewport uh and where where it sits in the DOM tree.
30:28 Uh and when its are added to DOM, the DOM shifts.
30:38 JavaScript is able to go through these items and find these items new position.
30:47 Then it calculates the div between all
30:50 the new one and auto scrolls before we render.
30:55 So that you you don't see this flash.
30:57 But with the the one that was at the top previously is is that like the No, no.
31:02 It it calculates where first it knows where it is before the next render.
31:11 Mhm.
31:10 Then it calculates how much it would shift if we followed the spacer um growth.
31:21 and we are autocrolling to the original
31:24 position and only then we finish rendering.
31:31 Okay.
31:29 Okay.
31:30 So this is I believe understandable.
31:34 Uh but there is one point here that we know when
31:41 the number of items change because we keep the delta for changes.
31:49 But it's hard for us to define if this change happened uh over
31:53 the viewport below the viewport so that we know if it's prependent or appendent.
31:59 Um for that we are keeping the last item at the top
32:07 of the list and we are trying to com again
32:13 you said the last item at the top of the list.
32:15 So, does that mean no um last rendered item at the top of the list?
32:21 Thank you.
32:23 Okay.
32:23 The last rendered item at the top.
32:25 Maybe you could rephrase it like the the latest
32:28 the latest item at the top of the list.
32:33 The the it's the item that that was at like of the top.
32:35 Does that mean it's basically the item at the top of the current viewport?
32:40 Uh
32:40 or is it is it include the overscale?
32:42 No.
32:42 No.
32:42 of uh the latest item loaded in the in the dome.
32:47 It doesn't not in the viewport like over scanned item.
32:54 Okay.
32:56 Mhm.
32:55 Okay.
32:56 So we know which one is it.
32:58 And then after a prepend we can detect if this item is still the same then
33:07 it means that it was this change of items
33:10 in memory was not the prepend but appendent.
33:15 I I cannot explain it uh again not after the prep.
33:20 I I messed it up.
33:20 Probably took us a while to do these features.
33:22 I I think is what uh what I'm hearing here is that the variable height and
33:26 let's forget what I have said and I will start from the beginning.
33:29 So after after we change the number of uh items and we detect that there
33:34 was some delta of change um of the count of items loaded to memory.
33:42 Uh we are checking if this saved item that was the first changed or not.
33:47 If it changed then it was a prepend.
33:51 If it didn't change, it was an appendent.
33:53 That's our logic.
33:56 Erh.
33:56 What if we cannot u use the comparer effectively because let's say list is
34:05 not uh primitive items or structures but uh
34:11 objects then that's a problem for us.
34:15 So if you could building your virtualization try
34:24 to uh either stick to um to stable references
34:30 to objects or add it comparer because that's a new
34:36 parameter that we are adding to virtualization for you.
34:41 Then all the prepens and all the appends would be detected
34:46 perfectly without overloading this itin comparer
34:52 prepens and appends might be not
34:54 detected properly uh in net 11 if you don't need prepends
35:01 and appends you don't need this additional parameter so when you have
35:07 I see your virtualization list.
35:12 You would uh need to add some I team com compar function
35:25 whatever some equals method that um that you overload on your own.
35:33 You need that specifically if um if you might
35:35 have equality that is not can cannot be detected just
35:38 by reference equality like the uh like maybe you're
35:41 reconstructing the the item somehow in the in the list.
35:46 Yes.
35:46 Then then it's useful if you're not moving the references.
35:51 If you have stable references in your list whenever you
35:54 prepend and append uh then it won't be a problem.
35:58 You you don't need to uh pass this parameter.
36:02 Okay.
36:03 Okay.
36:03 Okay.
36:03 So, let me see if I can summarize.
36:05 So, like we we we need to be able
36:06 to detect if things are being prepended or or appended.
36:10 And we do that by kind of having an a specific
36:12 item that we watch to see like did this thing shift down?
36:15 Uh if it shifted down,
36:16 then we assume it was that stuff was prepended to to the to the list.
36:20 Um and we need some way of being able to tell um
36:25 like how many how many quality how many equality comparisons are we doing?
36:29 Are we just doing an equality comparison to be
36:30 able to detect that that sort of anchoring
36:33 item to detect the prepending and appending or are
36:35 we like scanning the whole list like what what
36:37 No, we're not scanning the whole list.
36:39 We're only uh checking this one like you're asking about performance, right?
36:45 Sorry.
36:45 Say say it again.
36:46 You're asking about performance.
36:47 Uh right.
36:48 So I was asking just how many equal what actually gets compared for equality?
36:52 And I assume it's like you're you're looking
36:53 for that one item that you're kind of only one only one comparison.
36:58 Okay.
36:58 So there's a new new API then that allows
37:00 you if you need to control the that equality check,
37:03 there's an API that allows you to provide an equality compar to be
37:07 able to verify which that the item is actually the the same.
37:12 Okay, that makes that makes sense.
37:13 Okay, good to know.
37:17 Uh now I'm trying to figure out if we have shown everything with the
37:23 I think that's everything on anchor mode.
37:25 I mean did yeah you showed beginning you showed end.
37:28 Um if there are I I couldn't figure out use cases
37:32 where both end and beginning are useful but maybe there are
37:38 at the end you will pin to the end and if you're
37:39 at the top you will pin to the top or if you're in the middle.
37:42 Exactly.
37:42 But it is possible.
37:44 I just I just cannot figure out a good demo where it's it would be useful.
37:49 Is it needed?
37:49 Yeah, that's a good I guess that's a question for folks that are listening.
37:52 If you if you think a both anchor mode
37:55 where it pins the top if you're at the top,
37:58 pins the bottom if you're at the bottom,
37:59 stays in the stays where you're at if you're in the middle would be useful.
38:02 Uh we'd love to hear about your scenarios
38:04 like it's implementing it's not a problem,
38:06 but we're not sure if it's actually useful.
38:08 Um and then do you want to talk about uh maybe hor horizontal scrolling?
38:12 Is that uh yeah that's a good idea right now
38:15 there are a few questions I know we can also
38:17 take a few questions let me let me let me see
38:19 uh whatever you prefer I don't see these questions I
38:21 I will show them to you so first one is
38:24 not specifically related to virtualization but it's kind of adjacent like
38:29 someone was asking about having a data grid component available
38:31 for for blazer and are we going to like have one um
38:35 the answer is actually we do already have a a a data
38:38 grid that's included with the blazer framework we have
38:41 quick grid Um it's a um I mean it's not it
38:44 doesn't have every single bell and whistle like every single feature.
38:47 It's a very functional uh data grid component and and high
38:51 high performance that we've had for quite a while.
38:53 So you can use that one.
38:54 Uh and then there are other data grid components
38:56 that are available from the v various blazer like control
39:00 vendors you know sync fusion teleric and so forth
39:04 they all have um data grid components that are available.
39:07 I think someone mentioned Mudblazer in the chat uh
39:10 ha has one and there there's others as well.
39:12 So there there are various data grids out there
39:14 but we do do include one in the box.
39:16 It's not intended to have every single feature.
39:18 So if you really need like a a very richly functional uh data grid,
39:22 we would point you to one of the uh either community
39:24 based ones or the u uh commercial controller vendor based components.
39:29 I'm sure folks in the chat will have lots
39:30 of opinions about which one of those is best.
39:33 Um, someone else asked about uh working inside
39:39 an autoflow scroll or does virtualize also work
39:42 inside a bootstrap modal with a large table
39:44 where entire modal scrolls like no scroll bar?
39:48 This is going to push my my CS understanding.
39:51 So I'm going to refer this one to you.
39:52 Do you know do they mean if it's large table then it's quick grid
39:56 uh not just virtualization I believe and entire model not scroll
40:02 bar do they mean scrolling that that you're using scroll not
40:09 of the uh container but of the page I guess um but
40:19 does it only work so I guess the in terms of the
40:22 generally You can have virtualization either in a div uh
40:26 in the container or you can use the scroll of the page.
40:29 So these are two modes of virtualization.
40:32 That might be the core of the question but I'm not 100% sure.
40:38 Uh if it is then yes there are two modes.
40:42 Um and and both are supported.
40:48 So we can we can point to the uh the virtualization docs.
40:51 I think I've already included a link to the virtualization
40:53 docs for Blazer in the the URL list.
40:56 So take a look there and uh see if
40:58 that uh that helps with your specific use case.
41:01 But yeah, you should be you can have the scroll
41:02 bar on the container or the scroll bar on the page.
41:04 Both of those cases at least are are handled.
41:07 And uh oh, someone was asking like why why is it called virtualization?
41:14 Um and I because because of the spacers uh I guess I I didn't name it like this.
41:20 Uh but but that's logical to me at least that you think that there are some
41:27 items uh loaded uh you know behind the viewport but they are not there for real.
41:35 Yeah I think it's a virtual list in the sense
41:38 that like I'm looking at I'm not actually looking
41:41 at the full 10,000 rows you know physically I guess I'm
41:46 looking at a virtualization of the 10,000 rows is the idea.
41:49 I don't know.
41:49 That's that's the name that the uh the industry currently uses.
41:52 So that's that's why we we call it that.
41:53 We didn't make it up.
41:54 Like that's that's the standard name for this this kind of functionality.
41:59 All right.
42:00 And then oh just a nice comment from someone said
42:03 this is definitely something I need and we'll be testing very extensively.
42:06 So thank you KRSS6256.
42:09 We appreciate you trying out our preview bets.
42:13 Okay.
42:14 I think Yeah, I think Go.
42:18 Go ahead.
42:18 Let's let's talk about horizontal scrolling now.
42:20 Let me hide it.
42:21 Yes, exactly.
42:22 And uh by horizontal scrolling here, we don't mean horizontal virtualization.
42:27 So, as you can see, items are still in the uh vertical order.
42:32 And this case shows us log viewer.
42:35 uh you might be using it already in u I don't
42:39 know let's say Aspire uh or wherever else like uh you
42:43 probably want this kind of virtualized list also to stick
42:49 to the end uh because it makes sense to see the newest logs.
42:56 Yeah.
42:55 Uh but uh what was the issue?
42:58 This is just a fix for a bug.
43:00 We got a report uh of a bug that one
43:04 user wanted to have the vertical scroll on the page.
43:11 So uh something probably that you call this uh entire model
43:18 scroll I guess uh and the horizontal scroll in the container.
43:26 So as you ah let me grab it.
43:32 There is this popup that I see for sharing.
43:36 Okay.
43:37 Oh, sorry.
43:39 Yeah.
43:39 And now I grabbed it for Yeah, that's funny.
43:42 So, uh, as you can see, you can scroll horizontally as well.
43:48 And the original problem here was that inn net 10 uh when you want something
43:55 like this defined you need to set overflow
44:00 x-axis to auto and overflow yaxis to hidden
44:07 otherwise there are some CSS limitations
44:10 that um allow only this kind of combination
44:14 to let uh us use vertical vertical scroll
44:17 on the page and horizontal on the container.
44:20 Uh and in our virtualization code uh we had some DOM tree walk trying to find
44:29 the nearest ancestor that uh scrolls scrolls
44:34 vertically so that we can start watching it
44:38 for um intersection observer uh callbacks because I
44:43 don't know if we know if we uh
44:45 mentioned this but how new items are loaded is that this spacer that is that are
44:52 at the top and and the bottom uh whenever they are intersecting with the edge
44:58 of the viewport we are getting a call back to uh C# code and then it's uh
45:04 calling uh let's say to database with uh item provider uh to get new items
45:13 and uh because in net 10 we had
45:17 uh some faulty condition for walking this DOM tree.
45:23 We were not getting right inter intersection observer.
45:28 Um we we were setting intersection observer to the wrong route of the dome.
45:34 Uh right now it's fixed.
45:36 It's working properly as you can see.
45:38 Oh, you can even see the expansion and uh collapsion of items here as well.
45:45 I forgot to show you.
45:47 Cool.
45:49 So you have horizontal scrolling now working
45:51 well with the vertical scrolling on the page.
45:54 Uh which maybe is related to what that previous
45:55 person was asking about which is which is great.
45:58 And then also all the like like variable
46:00 height like like uh expanding items within the page.
46:03 So also works and uh yeah just listening to you talk
46:06 about all the uh the events that you have to hook
46:08 in order to make this work properly is just making
46:10 me uh making me glad that you're you're handling this alone.
46:14 That's very complicated stuff.
46:16 I mean, this is the benefit of, right, of having um, you know,
46:18 a component model and having pre-built components so that people
46:21 don't have to go figure out this stuff by themselves.
46:23 They can just use a pre-built framework component that handles
46:26 their virtualization concerns and not have to worry about it.
46:30 Awesome.
46:31 All right, so that looks good.
46:32 Okay, so that's horizontal scrolling now
46:34 working with page based based scrolling.
46:38 Um, let me see if there's there were a couple more questions that popped in.
46:41 Someone was asking about um are there any uh use any Azure SQL use cases?
46:49 Um I don't see how it differs from any other database uh use case.
46:55 I think you spoke to this earlier that you you can have an items the code
46:58 sample we showed earlier had like a fixed
47:00 items collection but there's also an items provider uh
47:04 yes exactly for asyning loading of data
47:06 and that allows you to then like pull data
47:08 from an Azure SQL database or whatever database you want.
47:10 So yeah, this is it's exactly the kind
47:12 of scenarios that virtualization is built for.
47:15 Cool.
47:15 And then someone was also asking that do we have a repeater component in Blazer?
47:20 And the answer is no because u blazer is based on razer
47:25 and razer you just for each like you just at for each and write
47:29 a C# for each loop or or any loop that you want and then
47:33 inside the the code body you just render what whatever content you'd like.
47:37 So a repeater in any any controlful logic
47:40 in Razer is just handled using normal C# codes.
47:42 So you don't typically need that like you do
47:44 in other like example based languages that are more
47:47 sort of inherently declarative in that way um require
47:51 you to have repeaters and things like that or conditionals.
47:53 In Razer it's it's got an imperative model.
47:56 You just write the code that you want in your rendering logic.
48:02 Cool.
48:02 So I think at this point um maybe we talk
48:05 a little about like what's what's next like what's what's still coming?
48:09 So so first of all a lot of the things you're showing
48:10 here have not shipped yet correct like how much is already um available
48:16 in the net 11 preview 3 and how much of of what you just
48:19 showed is uh still coming like are the anchor modes that's not shipped yet?
48:24 Just coming.
48:25 We are trying very hard to ship it in preview four,
48:30 but we'll see if it will be four or five.
48:34 Um, it's not a preview every month.
48:37 So, that gives you kind of a feel like we just shipped preview.
48:39 Yeah, we are shipping very frequently.
48:42 Uh, and the previous uh enhancement that enhancements that we are
48:47 talking about uh are all preview free from what I remember.
48:52 Yes, variable head is preview free.
48:55 Um, and these expansion, collapsion, jumping also should be preview free.
49:02 Okay, so those already got in got in earlier.
49:04 Cool.
49:05 Okay, so look for anchor modes coming soon either preview
49:08 four or preview five in the next month or two.
49:10 Um, we'll be sure to to include that in the the release notes.
49:14 Um, is there anything else like that's in your like
49:17 in your work queue to deliver like beyond
49:20 the things that you've shown or the things that you're
49:21 still working on in the virtualization space for 11
49:25 for sure I will be continuing work.
49:27 It's not finished.
49:28 Uh first of all I'm counting on the community to test
49:32 the existing features and to improve them uh as much as possible.
49:37 Uh we also have some quick grid work uh in the queue.
49:42 Uh we want to make sure that all
49:44 these features will be working with uh quick grid.
49:48 You were mentioning that you would like uh table support.
49:52 Uh, so that's basically what it is.
49:54 So quick under the covers uses the virtualized
49:57 component like it has like QuickRid supports virtualization.
50:01 Um, and it has like an option that says like
50:02 do you want to turn it on or not, right?
50:03 I think it has like a virtualized true false parameter on it.
50:07 Um, and there's some things there that we're working through still
50:09 to make the new virtualization features work well within within Quick Grid.
50:14 Uh, yes, exactly.
50:15 So, Quig grid is kind of a wrapper
50:18 for virtualization if you if you want to virtualize it.
50:22 Uh and uh we would like to leverage this virtualization in as uh in Aspire.
50:30 Uh and Aspire dashboard.
50:33 Yeah, Aspire dashboard.
50:35 Um and uh it's kind of fun that I don't how many people know,
50:39 but the Aspire dashboard was is built using Blazer.
50:43 uh and they use a bunch of blazer components
50:44 as part of that like all the uh trace
50:46 viewing and log viewing and like lots of tables
50:50 in that dashboard showing your uh your resource list.
50:53 Uh those tables do get um in various places they do get virtualized
50:58 and uh actually many of the uh some of some of the features
51:00 at least that we're doing in net 11 were direct asks
51:02 from the Aspire team to help them improve the UX of the the dashboard.
51:06 So we're working pretty closely with them to you know adopt
51:09 the new features make sure that they're working well for for their scenarios.
51:14 Uh and uh I started working on scroll to index
51:19 feature uh which seems very important for the community.
51:23 uh which means that you want to have
51:26 a button that has a callback that redirects the virtualization
51:32 list to a point where specific item of specific
51:37 ID is at the top of the viewport.
51:40 It is tricky because it's easier to to set
51:46 the specific item at the top of the dome.
51:48 But as you already know, the first item in the dome is not the first
51:52 item in the viewport because we have overscan items.
51:56 Uh and uh we will see how it goes.
52:00 I believe that this uh work that we've done
52:02 for Enchor mode uh will help us especially uh the comparer
52:08 that we added to public API uh I believe
52:11 that we'll be leveraging it uh in scroll to index feature.
52:17 Awesome.
52:17 All right.
52:18 Scroll to index and do you think that will land for net 11?
52:21 Is that a net 11 time frame?
52:22 Uh I hope yes.
52:24 Uh I'm planning to do it.
52:27 Cool.
52:27 Um someone had a question here.
52:29 We have some tables with text areas.
52:32 Users can resize the text areas vertically.
52:35 Would this work?
52:36 Okay.
52:37 Or do we need to trigger a rerender after any height changes of items?
52:42 Do they mean do they mean this?
52:47 I think conceptually I think that's the same use case.
52:50 So like like I'm imagining that they have
52:52 a table and there's a text area inside of it.
52:53 It has a little like widget thing that you
52:55 can like drag it down and make it bigger.
52:57 Okay.
52:57 It's about tables, not a list.
52:59 So, uh we don't have it in the demo.
53:01 And uh tables are a part of quick grid future work.
53:05 Uh so I am not 100% sure if should work properly.
53:11 Uh but I I cannot answer in 100% with 100% um certainty yet.
53:21 Certainty.
53:21 Thank you.
53:22 the um in the case of uh tables
53:25 like you're basically virtualizing the row list, right?
53:28 Like and so the the row height could potentially
53:31 change if the user like takes the text area,
53:34 expands it to make it larger than the row height, we get bigger.
53:37 Yeah, exactly.
53:38 I think it's it's the same what I'm doing right now but in quick grid.
53:42 Yeah.
53:43 So, we think that should work.
53:44 There are some issues with getting uh virtualiz and quick grid
53:47 uh u working correctly with all the new features we're adding.
53:49 We're working through those.
53:50 We do expect to have them resolved for .NET 11.
53:53 So, uh, Daniel Huffman 6060, uh, we think the answer is yes,
53:57 but we'd love for you to to try it out and let us know.
54:02 Cool.
54:03 Uh, and then I know we're getting close to time.
54:05 I think there was just a couple of other uh,
54:08 additional Thindle was just pointing out that he he's very aware
54:11 that the Spire dashboard does use Blazer because occasionally you see the uh,
54:14 the Blazer server waiting to reconnect dialogue.
54:17 It is it is Blazer serverbased.
54:18 So it's got the the whole connection model
54:20 when you lose connection to your your running
54:23 app you will you will see direct evidence of uh blazer being in in in play.
54:28 And then someone was asking also about our uh Wom work.
54:32 When do we see core CLR changes improvements coming for for WM
54:36 when we're going to see some some demos for that?
54:38 Um there are uh we we have gotten to the point now where we do have
54:41 some very basic Blazer apps now working
54:43 on the new core CLR based uh WOM runtime.
54:46 Uh it's still pretty early.
54:48 It's not even in a state yet where we're asking people to to try it out.
54:51 The runtime team is very actively working through,
54:53 you know, making sure all the runtime features work,
54:55 all the libraries work correctly, you working through the developer experience.
55:00 So, it's not quite in the state where um it's ready
55:02 to to be previewed for people to be uh actively working with it.
55:06 Uh and in fact, we don't even expect the the we don't expect
55:10 to do the cors swap for the existing mono runtime in net 11.
55:14 This is a work stream we expect to be a you know the next
55:17 release we will we'll finish we'll we'll have something to for you to try
55:21 in net 11 in preview form and then we'll stabilize it and continue
55:24 work on it through net 12 is the their current plan subject to change
55:29 based on you know how good AI models get and so forth in terms
55:32 of helping us accelerate that that development process um but doing an early
55:37 demo of of what the runtime team has that's certainly something that um
55:40 I can imagine doing in one of these standups in the upcoming months just
55:44 beware that it will be early bits like uh you know not not
55:47 something to get really excited about yet in terms of it being something you
55:50 can use just showing that you know
55:52 we're making progress on the the functionality
55:55 right cool I think I think that's it Alona that was awesome thank
56:00 you for all the great work you're doing on on virtualize to make
56:03 virtualize more flexible more more capable uh thank you for uh you know working
56:08 on all the the feedback I know you've spent a lot of time reading
56:11 through the the comments and the scenarios
56:12 that people have on those GitHub issues.
56:14 Um, for folks on the uh that are watching uh today,
56:18 please try out the latest .NET 11 previews uh with your existing
56:22 uh virtualized use cases and try out the new features.
56:24 Let us know if you run into any compatibility issues.
56:26 We really want to make sure we've got those ironed
56:28 out uh and give the new features a shot
56:30 and let us know if there's anything you think
56:32 we could do to to make the behaviors better, like the new anchor mode stuff.
56:35 Look for that coming in the next couple of preview releases.
56:39 And with that, I think I think we're good.
56:42 All right, Alana, thanks again.
56:44 It was a pleasure to show it to you.
56:46 I hope that it will be working good.
56:50 I'm sure I will be.
56:51 It already looks great.
56:52 All right, folks.
56:53 Have a great rest of your week.
56:54 We'll see you next time.
56:56 Bye.
57:29 Hello.
57:32 Hey.
57:33 Hey.
57:35 Heat.
57:36 Heat.
57:37 N.
57:45 Heat.
57:46 Heat.
57:47 N.