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

说明与用途

Rillio 是一个实验性的 UI 运行时，使用可寻址 DOM 和平面索引代替虚拟 DOM，允许通过 ID 直接访问节点，并通过单一补丁引擎管理更新。

问题

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.

来源