Design Choices in Frontend Frameworks: Virtual DOM, Reactive APIs, and the Rise of SolidJS and Svelte

Frontend frameworks have proliferated rapidly; React pursues asynchronous rendering while Vue 3 exposes low‑level APIs like reactive and Proxy , making core techniques increasingly similar. Designing a new framework forces choices about core principles, update granularity, virtual‑DOM adoption, DSL, and extra features.

Core principle selection: Immutable tree‑diff (e.g., React) updates the whole tree and diffs changes. Mutable reactive updates (e.g., Vue, Svelte, SolidJS) track precise state changes for node‑level updates.

Update granularity: Application‑level (React/Fiber). Component‑level (Vue 2+). Node‑level (Vue 1.x, Svelte, SolidJS).

Virtual‑DOM usage: Yes – required for application‑level updates to perform diffing (React, Vue). No – unnecessary for node‑level updates (Vue 1.x, Svelte, SolidJS).

DSL for development: JSX (React, SolidJS). Template + compile directives (Vue, Svelte).

Additional features such as Suspense , Portals , Fragments , Context , and Streaming SSR are optional extensions.

The article then questions whether virtual‑DOM makes applications faster. Benchmarks (JS Framework Benchmark) show SolidJS topping the list, but the speed gain stems from eliminating virtual‑DOM diffing and leveraging compile‑time optimizations. Virtual‑DOM adds runtime overhead; it helps when update granularity is coarse but can hurt performance for massive state changes, prompting React to replace its synchronous reconciler with the Fiber architecture.

SolidJS is introduced as a React‑like framework without a virtual‑DOM. Its bundle is smaller, it directly manipulates the real DOM, and it adopts a compile‑time approach that removes the diff/patch step. This yields faster first‑paint performance and enables independent component distribution.

Comparisons of call stacks illustrate React’s reliance on virtual‑DOM versus SolidJS’s direct DOM updates. The article also shows how Svelte compiles a simple template into plain JavaScript that creates and updates DOM nodes without any virtual‑DOM layer.

To achieve cross‑framework component reuse, the author proposes WebComponents as a standards‑based, framework‑agnostic solution, despite current maturity challenges.

In conclusion, non‑virtual‑DOM frameworks offer performance and bundle‑size benefits but may lack cross‑platform rendering abstractions; mainstream frameworks have entrenched advantages, making wholesale replacement difficult.