I Built Rillio: A JSX UI Runtime Using Addressable DOM Instead of Virtual DOM

Описание и применение

Rillio – экспериментальный UI‑рантайм, использующий адресуемый DOM и плоский индекс вместо виртуального DOM, позволяющий напрямую обращаться к узлам по идентификатору и управлять обновлениями через единственный патч‑двигатель.

Задача

Existing UI runtimes rely on a Virtual DOM tree as the main source of truth, which can lead to unnecessary DOM mutations and complexity in managing node identity and updates.

Результат

Rillio demonstrates that a flat, addressable DOM registry can replace a virtual DOM tree, offering direct node access and potentially reducing unnecessary DOM mutations for certain workloads, while introducing new challenges in transaction validation and lifecycle management.

Рабочий процесс

• Define a FlatNode interface with id, parentId, prevSibling, nextSibling, firstChild, lastChild, version, and node fields.
• Maintain a registry mapping NodeId to FlatNode records.
• Use a Patch Engine to batch DOM operations such as setText, move, and remove, validating each transaction before applying.
• Render JSX components with familiar syntax; under the hood, Rillio uses the Flat Index and Patch Engine to manage DOM identity and updates.
• Implement reactive state APIs (e.g., useState) that trigger Patch Engine operations when state changes.
• Handle transaction validation, rollback, and edge cases like moving a parent into its descendant.
• Test correctness with randomized consistency testing, ensuring the Flat Index matches the actual DOM.
• Benchmark Rillio against other runtimes for keyed lists, text updates, and DOM reordering to identify workloads that benefit from stable node identity.
• Iterate on transaction validation, testing, nested DOM handling, cost-aware patch planning, and potential compiler optimizations.

Доказательства

In Rillio, every managed DOM node gets a stable NodeId.

Источник

Another design decision was to keep DOM mutations behind a single Patch Engine.

Источник

I generate sequences of DOM updates and check whether the Flat Index still agrees with the actual DOM.

Источник