Let’s learn how modern JavaScript frameworks work by building one

The post argues that modern JavaScript frameworks are easiest to understand by building one. It treats post-React frameworks as a family that relies on reactivity, cloned templates, and APIs like <template> and Proxy, then sketches a toy framework around those ideas.

Reading notes

#

• Modern frameworks are described as post-React client-side frameworks such as Lit, Solid, Svelte, and Vue.
• The author groups them around three shared ideas: reactivity for DOM updates, cloned templates for rendering, and newer web APIs like <template> and Proxy.
• React is presented as more pull-based, while modern frameworks push updates only to the parts of the component tree that depend on changed state.
• A small reactivity system is built with a Proxy, createEffect, onGet, onSet, a dependency map, and microtask batching.
• DOM rendering is built around tagged template literals, parsing HTML once into a <template>, and cloning the template for later renders.
• The template parsing step is cached with a WeakMap keyed by the tokens array from the tagged template literal.
• Dynamic values are handled with stub placeholders that are replaced in attributes and text content.
• The reactive system and renderer are combined so state changes update the DOM through effects.
• The post notes missing pieces such as deep tree updates, repeated lists, key handling, and more efficient binding lookup.
• The conclusion says the exercise helped explain framework internals and mentions a smaller custom framework for an emoji picker component.
• It also points to browser APIs such as the DOM Part API proposal and possible extensions to Proxy as future improvements.