Adam Niederer

Adam Niederer

Adam leads frontend development at Chatham Financial, where his efforts to centralize front-end resources and training have led to transformative improvements in product consistency and quality, accessibility of user experiences, and developer efficiency. In addition to the frontend, Adam especially enjoys working on projects involving performance, accessibility, and coding theory. Outside work, he spends his time learning human languages, writing open-source projects, and haunting his favorite sushi joint.
Fast, Flexible Virtual Scrolling With Functional Programming
JSNation US 2024JSNation US 2024
16 min
Fast, Flexible Virtual Scrolling With Functional Programming
Virtual scrolling is a clever way to reduce rendering overhead, and is especially helpful as the complexity of websites increases. Although there are many plug-and-play libraries which support virtual scrolling in various frameworks, rolling your own is surprisingly easy. In addition, this allows one to maximally optimize each viewport for its content, unlocking additional performance savings.

In this talk, you will learn how to create a flexible virtual scrolling viewport from scratch, and make it performant using concepts from functional programming. We will be following an implementation of a virtual scrolling viewport using web components from start to finish, including variable element heights, skeletons, asynchronous child component rendering. We will then optimize it using memoization, wrapping more-performant imperative constructs in a functional layer, and using element recycling to significantly reduce render churn when using stateless child components.

Finally, we will touch on the state of the art in virtual DOM rendering, and how this approach compares to the use of the new `content-visibility` CSS property.