What Frontend Frameworks Solve

Without a framework: write DOM manipulation code by hand.

<div id="counter">0</div>
<button onclick="increment()">+</button>
<script>
let count = 0;
function increment() {
    count++;
    document.getElementById('counter').textContent = count;
}
</script>

Works for tiny apps. For real apps:

• Many components, many state changes.
• State scattered.
• Updates often miss DOM.
• Performance: full DOM rewrites are slow.

A frontend framework provides:

• Component model: pieces of UI you can compose.
• Declarative rendering: describe the UI, framework figures out updates.
• State management: clean way to track data.
• Reactivity: when state changes, UI auto-updates.

Real frameworks:

• React (Facebook, 2013): virtual DOM + components. Largest ecosystem.
• Vue (Evan You, 2014): reactive + templates.
• Svelte (Rich Harris, 2016): compile-time framework.
• Angular (Google, 2010+): full framework with DI.
• Solid (Ryan Carniato, 2018): reactive without VDOM.
• Lit (Web Components based).
• HTMX (server-driven; opposite philosophy).

Two paradigms:

1. Virtual DOM (React, Vue, Preact):

• Render returns lightweight tree.
• Diff against previous tree.
• Apply minimal DOM changes.

2. Compile-time / fine-grained reactivity (Svelte, Solid, SolidJS):

• Track per-state dependencies at compile time.
• Update only the specific DOM nodes that changed.
• No diffing.

We'll build VDOM-based, like a tiny React. By the end, you understand:

• JSX → tree.
• Reconciliation algorithm.
• useState, useEffect.
• Rendering and re-rendering.

Reference: build-your-own-react series, micro-react implementations.