Ben Hutchison: VDOM or not VDOM? A survey of incremental UI updates in React, Elm, Svelte, SolidJS and Laminar

​Melbourne Compose is the monthly in-person meetup for functional programmers in Melbourne, every 3rd Thursday of the month in Carlton.

​Our October meeting will be 6:00-8:00 pm Thurs 15th of October at our regular venue, Activity Room 2 at Kathleen Syme Center in Carlton. Arrive from 5:30 for chat and socialising, talks start at 6:30pm. Please RSVP via Luma.

​Ben Hutchison will present:

VDOM or not VDOM?
A survey of incremental UI updates in React, Elm, Svelte, SolidJS and Laminar.

​To be performant, all modern User Interface (UI) frameworks must solve the same underlying Incremental Update problem: incoming changes to the records behind a UI cannot simply re-render the whole UI; this doesn't scale or perform adequately. Rather, they need to make targeted changes to the UI that track the actual scope of what changed.

​React became arguably the world's most popular UI framework by solving this with the Virtual DOM - a solution that also presents a simple programming model to developers. Elm took a similar approach.

​However, a second lineage emerged, represented by frameworks like Svelte, SolidJS and Laminar. These choose not to diff a Virtual DOM tree and instead track, at a fine-grain, which specific UI elements depend on which data, and update only those.

​Watching the same problem being concurrently solved in two distinctly different ways is, to me, a hint there's an interesting story underneath - one that's had my curiosity these past six months.

​In this talk I will attempt to give the audience an intuitive feel for:

• ​What the Incremental Update problem is in UI programming

• ​Why creating, updating and destroying browser DOM nodes can be slow & heavy

• ​What a Virtual DOM is and how it solves the incremental update problem

• ​An alternative to Virtual DOM: fine-grained, signal-based reactivity

​Then we'll take a little interval and switch into demo mode. We'll compare the same app, receiving the same set of incremental updates, but implemented using a variety of contemporary UI frameworks

​Control

• ​Naive Javascript, no incremental update strategy

​Virtual DOM

• ​React (with/without React Compiler optimizer)

• ​Elm

​Fine-grain/Signal (no Virtual DOM)

• ​Svelte 5

• ​SolidJS

• ​Laminar (contrast naive & performant implementations)

​We won't end with a clear winner, but rather a bunch of trade-offs.

​As always, newcomers welcome. Contact Ben on 0407 990 094 if you need assistance finding us on the night.

​Hope to see you there :)
-Ben Hutchison & John Walker