跪拜 Guibai
← All articles
Frontend · Frontend Framework

One Developer Ditched Vue and React to Build Their Own Framework — Here's What They Learned

By 下家 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

This project shows that the mainstream frameworks still leave real gaps for certain use cases — especially around fine-grained rendering control and transparent internals. For Western developers, it's a signal that the frontend ecosystem may still have room for new approaches, and that the trade-offs of existing frameworks aren't settled science.

Summary

After struggling to build a complex visual editor with Vue, React, and Solid, a Chinese developer decided to create their own frontend framework from scratch. The result is Vitarx, a framework designed around three core principles: signal-level precise updates (no diff overhead), a runtime view tree (for flexible rendering orchestration), and a fully transparent component system with no black boxes.

Vitarx uses a doubly linked list for dependency management in its reactive system, which the developer claims enables more efficient tracking and triggering than Vue's approach. The view system converts JSX into lightweight view objects rather than a virtual DOM, and the renderer is completely replaceable — developers can swap between DOM, Canvas, or WebGL backends by implementing a simple interface.

Benchmark tests show Vitarx outperforming Vue 3.6 and React 19 in partial updates, row selection, and deletion scenarios, though it lags behind in full table creation and updates. The framework also ships smaller bundles: 17 KB compressed versus 22.9 KB for Vue and 51.4 KB for React. The developer acknowledges that custom frameworks aren't for everyone, recommending them only for projects with extreme performance needs, deep customization requirements, or teams with sufficient technical resources.

Takeaways
A Chinese developer built a custom frontend framework called Vitarx after Vue, React, and Solid couldn't meet the needs of a complex visual editor project.
Vitarx uses signal-level precise updates with a doubly linked list for dependency management, avoiding virtual DOM diff overhead.
The framework's view system converts JSX into lightweight view objects, and the renderer is completely replaceable via a simple interface.
In benchmarks, Vitarx outperformed Vue 3.6 and React 19 in partial updates (9.2 ms vs 19.1 ms and 11.2 ms), row selection (4.5 ms vs 9.8 ms and 5.8 ms), and deletion (17.2 ms vs 20.9 ms and 18.1 ms).
Vitarx ships a smaller bundle than both Vue and React: 17 KB compressed vs 22.9 KB for Vue and 51.4 KB for React.
The developer recommends custom frameworks only for projects with extreme performance needs, deep customization requirements, or teams with sufficient technical resources.
Vitarx includes server-side rendering with renderToString and renderToStream APIs, plus incremental hydration on the client.
The framework uses a Vite plugin for custom JSX compilation, avoiding reliance on React's jsx-runtime.
Conclusions

The fact that a single developer could build a competitive framework in two years says as much about the maturity of the frontend ecosystem as it does about the developer's skill — the building blocks are now well understood.

The benchmark results are interesting but should be taken with a grain of salt: Vitarx wins on partial updates but loses on full table creation and updates, which are common real-world scenarios.

The developer's decision to build a custom framework rather than contribute to existing ones reflects a broader tension in open source: sometimes the fastest path to a solution is to start fresh, even if it fragments the ecosystem.

The emphasis on 'no black boxes' and transparent internals suggests that developer frustration with framework opacity is a real pain point that mainstream frameworks haven't fully addressed.

The roadmap includes AI integration and WebAssembly optimization, which hints at where the developer sees the frontend landscape heading — but these are listed as low priority, suggesting they're more aspirational than concrete.

Concepts & terms
Signal-level precise updates
An approach where data changes only trigger updates to the specific DOM nodes that depend on that data, avoiding the overhead of virtual DOM diffing. Vitarx implements this using a doubly linked list to track dependencies between signals and effects.
Runtime view tree
A complete, mutable representation of the UI structure that exists at runtime, as opposed to compile-time-only optimizations. This allows for dynamic operations like reordering or replacing parts of the view tree without recompilation.
View Switch Transaction
A mechanism in Vitarx that wraps view switching operations as interruptible, rollbackable transactions. This allows components like Transition to insert animation logic between the old and new views.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗