A frontend framework provides the structure that runs a web application’s user interface. You define what the view should show and how it responds to interaction; the framework executes your code when the appropriate trigger occurs. That differs from a library, whose functions you call yourself. The point is not the framework itself, but the applications it helps you build. section 1.1
A small framework can be understood as a few connected jobs:
- Represent the view: components describe portions of the interface. A virtual DOM can provide a lightweight representation of the browser DOM. section 1.2 section 1.3.1
- Mount the view: JavaScript uses the Document API to create elements and place them in the page. In a single-page application, the initial HTML can be mostly empty. section 1.3.2
- Handle changes: an interaction can change application state and trigger another render. Reconciliation determines which DOM changes are needed to match the new virtual DOM. section 1.2 section 5.2.6
- Navigate without a page reload: a router updates the displayed view and the browser’s URL when the route changes. section 1.3.2
To see why these jobs matter, try making an interactive page with vanilla JavaScript and the Document API. You must create elements, respond to events, and keep the DOM aligned with state yourself. A first framework can take over that work with an application instance holding state, a view function, event dispatch, and mounting. This version may simply destroy and recreate the view after each state change; it does not yet need optimized updates. section 2.0 section 5.2.6 section 6.2
A button counter
Start with state 0. A view function describes a button displaying that number. Clicking it emits an add event; a reducer adds 1 to the state, and the framework renders again. The visible result is a button changing from 0 to 1, even though this first implementation replaces the button element rather than updating it in place. An exercise extends the example with separate increment and decrement buttons. section 6.2
createApp({
state: 0,
reducers: {
add: (state, amount) => state + amount,
},
view: (state, emit) =>
h(
'button',
{ on: { click: () => emit('add', 1) } },
[hString(state)]
),
}).mount(document.body)
The counter listing puts the pieces together: createApp receives state, a reducer, and a view; the button emits an event, and mount attaches the application to the document. section 6.2
From there, components can gain their own state, contain subcomponents, exchange props and events, and run lifecycle hooks. Refactoring a TODO application to use the framework makes the trade-off concrete: the framework creates the markup, leaving application code to describe the view and its behavior. A compact implementation is enough to expose the mechanism, even if it is not a production-ready choice for complex projects. section 1.2.2 section 6.3 section 1.2
