DriftJS - Exploring a Register-Based Bytecode VM for UI…
0 reactions
DriftJS - Exploring a Register-Based Bytecode VM for UI Frameworks
Hey everyone,
I wanted to share an experimental project called DriftJS. It's a frontend framework prototype that explores using an in-browser register-based Bytecode Virtual Machine (VM) for UI rendering, rather than traditional Virtual DOM diffing or purely compile-time reactive models.
Repository: https://github.com/hrutavmodha/driftjs
### The Architecture: Register-Based VM
Most frameworks either diff Virtual DOM trees (React) or generate reactive dependency graphs ahead-of-time (Svelte, SolidJS). DriftJS explores a different path:
It compiles .drift templates into compact binary-serializable bytecode streams. At runtime, a lightweight 256-register VM executes these opcodes directly against the DOM.
Key Architectural Highlights:
- Zero VDOM Overhead: Replaces tree-diffing with direct bytecode instructions (like CREATE_ELEMENT, SET_ATTR) for DOM execution.
- 256 Virtual Registers: Uses fixed virtual registers (r0, r1...) for DOM nodes and runtime values, drastically cutting instruction counts and memory allocations compared to stack-machine models.
- Targeted Reactivity: Basic state updates execute as direct O(1) mutations. Dynamic control flow structures (@if,
### Key Features So Far:
- 🛡️ 100% CSP Compliant: Built-in Acorn AST interpreter evaluates runtime JS expressions safely without using eval() or new Function().
- 🔄 Keyed LIS Reconciliation: Uses a Longest Increasing Subsequence algorithm to minimize DOM node movements during list updates.
- 🪶 Zero Framework Bloat: Implements reactivity and execution in the leanest bytecode form possible, avoiding heavy object models and monolithic runtime bloat.
- 🚀 Early Benchmarks (js-framework-benchmark vs React 19):
• 10.8x FASTER on "Swap rows (1k)"
• 3.05x FASTER on "Clear 1,000 rows"
• ~1.8x LESS memory footprint
• 5.75x smaller uncompressed bundle size
### Current Status & Call for Feedback
DriftJS is currently an experimental prototype. It handles single-template compilation, AST evaluation, and keyed LIS list reconciliation.
Still on the roadmap:
- Component composition & props passing
- State management stores
- SSR & Hydration
I'm opening this up to compiler engineers, frontend performance nerds, and systems devs. Does a register-based VM architecture hold real promise for low-level web runtimes?
Check out the repo, run the benchmarks, and feel free to share your thoughts or ISA critiques!
GitHub Repo: https://github.com/hrutavmodha/driftjs
#programming #js #technology #dev
Hey everyone,
I wanted to share an experimental project called DriftJS. It's a frontend framework prototype that explores using an in-browser register-based Bytecode Virtual Machine (VM) for UI rendering, rather than traditional Virtual DOM diffing or purely compile-time reactive models.
Repository: https://github.com/hrutavmodha/driftjs
### The Architecture: Register-Based VM
Most frameworks either diff Virtual DOM trees (React) or generate reactive dependency graphs ahead-of-time (Svelte, SolidJS). DriftJS explores a different path:
It compiles .drift templates into compact binary-serializable bytecode streams. At runtime, a lightweight 256-register VM executes these opcodes directly against the DOM.
Key Architectural Highlights:
- Zero VDOM Overhead: Replaces tree-diffing with direct bytecode instructions (like CREATE_ELEMENT, SET_ATTR) for DOM execution.
- 256 Virtual Registers: Uses fixed virtual registers (r0, r1...) for DOM nodes and runtime values, drastically cutting instruction counts and memory allocations compared to stack-machine models.
- Targeted Reactivity: Basic state updates execute as direct O(1) mutations. Dynamic control flow structures (@if,
### Key Features So Far:
- 🛡️ 100% CSP Compliant: Built-in Acorn AST interpreter evaluates runtime JS expressions safely without using eval() or new Function().
- 🔄 Keyed LIS Reconciliation: Uses a Longest Increasing Subsequence algorithm to minimize DOM node movements during list updates.
- 🪶 Zero Framework Bloat: Implements reactivity and execution in the leanest bytecode form possible, avoiding heavy object models and monolithic runtime bloat.
- 🚀 Early Benchmarks (js-framework-benchmark vs React 19):
• 10.8x FASTER on "Swap rows (1k)"
• 3.05x FASTER on "Clear 1,000 rows"
• ~1.8x LESS memory footprint
• 5.75x smaller uncompressed bundle size
### Current Status & Call for Feedback
DriftJS is currently an experimental prototype. It handles single-template compilation, AST evaluation, and keyed LIS list reconciliation.
Still on the roadmap:
- Component composition & props passing
- State management stores
- SSR & Hydration
I'm opening this up to compiler engineers, frontend performance nerds, and systems devs. Does a register-based VM architecture hold real promise for low-level web runtimes?
Check out the repo, run the benchmarks, and feel free to share your thoughts or ISA critiques!
GitHub Repo: https://github.com/hrutavmodha/driftjs
#programming #js #technology #dev
| 1,000 mlx | |
| 1 | |
| 0 |