The frontend ecosystem is always evolving, moving from Virtual DOM diffing to fine-grained reactivity and compiler-heavy approaches. Today, I'm excited to share an experimental project exploring a different path: DriftJS.
DriftJS is a next-generation frontend framework powered by an in-browser register-based Bytecode Virtual Machine (VM).
Check out the GitHub Repository
The Architecture & Compiler Pipeline
Unlike traditional Virtual DOM frameworks that re-evaluate large tree structures, or compiler-only frameworks, DriftJS compiles .drift single-file templates into compact binary-serializable bytecode streams (CompiledModule).
At runtime, a lightweight 256-register VM executes these instructions directly against the DOM.
The compilation and execution workflow consists of 5 tightly decoupled stages:
- DriftLexer: On-demand parser-driven tokenization
- DriftParser: AST construction
- DriftTransformer: Whitespace stripping & Acorn JS expression enrichment
- DriftGenerator: Emits a precise 15-Opcode Bytecode Array, Constant Pool, & Reactive Bindings
- DriftClientVM: Executes Bytecode via 256 Registers & Keyed LIS Reconciler
Key Technical Features
- ️ 100% CSP Compliant: Built-in Acorn AST interpreter evaluates JS expressions in scope without
eval() or new Function(), making DriftJS safe for strict Content Security Policy environments.
- ⚡ Register-Based Virtual Machine: Uses exactly 256 fast virtual registers (
r0, r1, ...) for DOM elements, text nodes, and values. Memory allocation is kept incredibly low.
- Keyed LIS Reconciliation: Features a custom Longest Increasing Subsequence (LIS) list reconciler that minimizes DOM node movements, insertions, and deletions during loop updates (triggered by the
0x0E REACTIVE_FOR opcode).
- Fast-Path Attribute Patching: Re-evaluates element attributes in-place without rebuilding DOM subtrees when data object references remain stable using the
0x05 SET_ATTR opcode.
- Fine-Grained Reactive Regions: HTML comment anchors visually bound
@if and @for blocks, allowing surgical clearBetweenAnchors re-rendering of targeted regions without disturbing surrounding DOM elements.
Benchmark Results vs React 19
In the official js-framework-benchmark suite, DriftJS shows massive performance gains:
- 10.8x FASTER than React 19 on "Swap rows (1k)" (119.0ms vs 1285.7ms)
- 3.05x FASTER on "Clear 1,000 rows" (92.4ms vs 282.0ms)
- 2.06x FASTER on "Create 10,000 rows" (1842.9ms vs 3804.5ms)
- Uses ~1.8x less memory during the "Run-Clear" cycle.
- 5.75x smaller uncompressed bundle size than React 19.
We Need Your Help!
DriftJS is currently an experimental prototype. While the single-template bytecode compilation, Acorn expression evaluation, and basic keyed LIS list reconciliation are implemented and passing test suites, there is more to do!
Current limitations include a lack of component composition/nesting, routing, state management stores, and SSR/hydration.
We warmly invite framework researchers, compiler engineers, and open-source contributors to collaborate with us! Whether you want to fix bugs, optimize VM opcode execution, improve compiler error reporting, or add developer tools, we'd love to have you.
Drop by the repo, check out the architecture, and let us know what you think!