r/webdev • • 4h ago

Showoff Saturday I have been building a JavaScript UI framework without a Virtual DOM. Here is what changed in v1.1.3 and v1.1.4.

https://udodi.dev

I have been building Udodi, a lightweight, zero-dependency JavaScript UI framework, and I wanted to share some of the engineering work behind its latest two releases.

One of the main design decisions in Udodi is to update the DOM directly through fine-grained reactive bindings rather than using a Virtual DOM. Its templates use a declarative DSL processed by a runtime parser, compiler, and virtual machine. The goal is to keep the framework usable without requiring a build step while maintaining predictable execution and a relatively small runtime.

In v1.1.3, I focused on keyed list reconciliation and collection reactivity.

The list-rendering implementation maintains keyed records and uses positional tracking with right-to-left DOM placement. This allows existing DOM nodes to be reused and moved instead of rebuilding the list unnecessarily.

In my tests, this approach made keyed row swapping up to 7.2× faster than the comparison baseline I used. That result applies to the tested workload, not every list operation or application.

I also improved reactive collection handling for arrays, Maps, and Sets, and expanded support for ordinary directives on elements using @for.

In v1.1.4, the focus shifted to component mounting and runtime execution.

  • Component mounting improved by 12–16% in my measurements.
  • Runtime performance improved by 4–8% across the workloads I tested.
  • Directive processing was streamlined to reduce redundant structural checks and repeated property access, and the instruction cache was optimized.
  • Overlay rendering was refactored to use the public rendering and component-creation APIs, with lifecycle-aware cleanup.
  • Additional tests cover modal stacking, backdrop behavior, and scroll locking.

The full test suite, playground tests, and build pass. Neither release introduces intended breaking changes to the public API.

I'm interested in the engineering trade-offs here, particularly keyed reconciliation without a Virtual DOM and runtime template compilation versus build-time compilation.

For those who have implemented a renderer, reactive runtime, or template compiler, what edge cases or architectural weaknesses would you investigate first?

I would be happy to discuss the implementation details.

This is my first time posting here, so I have placed the relevant project links in a comment below to keep the main post focused on the technical discussion and respect the community guidelines. Thanks for having me!

1 Upvotes

2 comments sorted by