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