Virtualization Support

[joshblack]

About

This discussion is intended to provide an overview of virtualization and how Primer anticipates components working alongside common virtualization libraries in React. If you're looking for discussions specific to a component, look at the case studies below:

• TreeView

Background

Certain Primer components may be used in products that leverage a technique known as virtualization when working with large data sets. Virtualization is roughly defined as:

The idea of rendering only visible rows of content in a dynamic list instead of the entire list. The rows rendered are only a small subset of the full list with what is visible (the window) moving as the user scrolls. This can improve rendering performance.
Reference

Another term for virtualization is windowing.

Requirements

Generally, virtualization libraries require a combination of 3 things for a list of items:

• A count of the total number of items
• An estimate of each individual item size
• A reference to the parent element acting as the scroll container

When working with multi-dimensional data, generally virtualization libraries require this information across the rows and columns of the data set.

When working with content that may have a dynamic size, it's important that a component provides access to a ref for the virtualization library to access the rendered size of the item.

Challenges

Here are some of the initial challenges or questions that may come up when working with virtualization alongside components in Primer:

• What's the best way for a user to search through the data set since the default ctrl, or command, + f pattern on longer works?
• How do we make sure any expected focus management behavior continues to work as expected?
  • How do we support techniques like typeahead on larger data sets?
• How do we maintain state of items in the virtualized list if we can no longer rely on an item being mounted and persisting local state?
  • For example, in a tree when we need to determine whether an item is expanded or collapsed

Links & Resources

• https://www.patterns.dev/posts/virtual-lists/
• https://web.dev/virtualize-long-lists-react-window/
• Libraries
  • https://github.com/TanStack/virtual
  • https://github.com/bvaughn/react-window
  • https://github.com/bvaughn/react-virtualized
• Explorations
  • https://github.com/github/github/pull/244405
  • https://github.com/github/repos/issues/3374

[joshblack]

Case Study: TreeView

Requirements

• Ability to "flatten" a tree-structure into the available virtual pane size
  • Will this need to be a flat list of nodes or can we continue using the hierarchy of tree items?
• Tree items should support a ref in order to communicate their size to the virtualization library
• Ability to maintain expansion state even if tree items are unmounted

Accessibility

• Focus management
  • Arrow {Up, Down, Left, Right}
  • Backspace
  • Home, End
  • Page Up, Page Down
  • Typeahead
• Use declared properties since we can no longer rely on computed properties
• How do we provide a way for someone accustomed to using browser find to search through the list?

Links & Resources

• https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-1/treeview-1b.html
• https://www.youtube.com/watch?v=bfCsZki_r2o
• https://github.com/microsoft/fluentui/tree/master/packages/fluentui/react-northstar/src/components/Tree

[keithamus]

Generally speaking I'd encourage us to leverage Virtualisation as a last resort strategy, as they're very complex to implement especially WRT making them accessible to screen reader technologies.

There are other mechanisms which we can leverage to net us very large benefits which may get us to a resolution without going down the expensive route of developing virtualisation. For example for tree views, ensuring that the whole tree isn't expanded by default can be a cheap strategy to avoiding rendering lots of rows.

We can also look at CSS properties to tell the browser to avoid rendering such as contain-intrinsic-size. https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size.

All mitigations have trade offs but generally for performance work like this I find it beneficial to find which mitigations can buy us a lot with a little.

[andrialexandrou]

Agreeing here.

@JoyceZhu mentioned a good blog post which hints at the amount of work going into virtualization, which if I understand it means to lazy load content beneath an initial fold of some set content length. See So You Think You've Built a Good Infinite Scroll by Adrian Roselle

[lesliecdubs]

Cross-linking the pattern proposal for virtualization here, which also includes links to prior art on this pattern at GitHub: https://github.com/github/primer/issues/1490

[lesliecdubs]

Also tagging @andrialexandrou here for visibility as she's been looking into accessibility concerns with virtualization.

[andrialexandrou]

issue is github/repos#3374