Frontend vocabulary
Vocabulary
UI vocabulary names what you see; frontend vocabulary names how it is wired.
Juan M. Cornejo
Notes, no. 06
UI vocabulary names what you see; frontend vocabulary names how it is wired. Components, state, data, routing, styling, tooling, quality. The terms that turn a feature request into buildable instructions.
1Frontend vocabulary
Part 01
The atoms of a modern frontend. Everything you see is made of these.
One screen read as components: eighteen cards are one component given eighteen sets of props.
The atoms of a modern frontend. Everything you see is made of these.
A self-contained, reusable piece of UI with its own logic and markup. The core unit of React, Vue, Svelte.
Inputs passed into a component to configure it, like function arguments for UI.
Data a component owns that can change over time and triggers a re-render when it does.
Content passed between a component's tags, rendered wherever it defines a slot.
The process of turning component code + data into actual on-screen elements.
The HTML-like syntax (JSX in React) used to describe what a component outputs.
The nested hierarchy of components that makes up a screen.
Showing elements based on a condition, or one per item in a collection.
Part 02
Where data lives and how it moves. Naming this is how you spec interactive behavior.
Where data lives and how it moves. Naming this is how you spec interactive behavior.
Local = owned by one component; global = shared app-wide (cart, user, theme).
Moving shared state to the closest common parent so siblings can both use it.
Passing data through many layers of components, a smell that often calls for context/store.
A way to share values with a subtree without passing props at every level.
A central place for app-wide state (Redux, Zustand, Pinia) with predictable updates.
Values calculated from existing state rather than stored separately (avoids drift).
Work outside rendering, fetching, subscriptions, timers, that runs after render.
Reusable functions that add state/lifecycle/logic to components (React), start with use.
Controlled inputs are driven by state; uncontrolled keep their own internal value.
Part 03
Getting data in and out, and handling the inevitable waiting and failing.
Getting data in and out, and handling the inevitable waiting and failing.
Requesting data from a server over the network.
REST = endpoints per resource; GraphQL = one endpoint, you ask for exactly the fields you need.
Syntax for handling operations that take time (network, files) without blocking.
The three states every async UI needs. Always design all three, not just the happy path.
Reusing fetched data instead of re-requesting; revalidating when it goes stale (React Query, SWR).
Showing the change instantly and rolling back if the server rejects it, feels fast.
Where pages render: in the browser (CSR), on the server per request (SSR), or prebuilt (SSG).
Attaching JavaScript to server-rendered HTML so it becomes interactive.
Part 04
How URLs map to screens in a frontend app.
How URLs map to screens in a frontend app.
A URL pattern mapped to a specific page/component.
A single-page app swaps views in the browser instead of loading new HTML pages.
A route with a variable segment, so one page serves many items.
Key-value pairs after ? in the URL, filters, sorts, page numbers.
Sending users elsewhere (e.g. to login if not authenticated) before a route loads.
Loading a route's code only when visited, shrinking the initial bundle.
Part 05
The many ways to apply CSS in a frontend. Name the one your project uses.
The many ways to apply CSS in a frontend. Name the one your project uses.
Composing styles from tiny single-purpose classes right in the markup.
Writing scoped CSS inside JS, co-located with the component (styled-components, Emotion).
Locally-scoped CSS files so class names never collide across components.
Named, reusable values for color/spacing/type that drive consistent, themeable styling.
Swapping a token set to restyle the whole app (light/dark, brands).
The rules deciding which CSS wins when several target the same element.
Part 06
The ecosystem that turns your code into a running app.
The ecosystem that turns your code into a running app.
The library that structures your UI (React, Vue, Svelte, Angular). Name yours so output fits.
A framework on top of a UI library (React, Vue, Svelte) adding routing, SSR, and build conventions.
Tools (Vite, webpack, esbuild) that compile and package your code for the browser.
Converting newer or non-browser syntax (TS, JSX) into JS browsers understand.
Reusable third-party code installed from a registry and tracked in package.json.
A local server that refreshes the browser instantly as you edit (HMR).
A typed layer over JS that catches errors before runtime and documents shapes.
any."Tools that catch bad patterns (lint) and auto-format code consistently.
Part 07
What separates a frontend that works from one that's fast and accessible.
What separates a frontend that works from one that's fast and accessible.
When a component runs again because its state/props changed. Too many = jank.
Caching a computed value or component so it only recomputes when inputs change.
An in-memory representation the framework diffs to update only what changed.
Total JS shipped; tree-shaking removes unused code to shrink it.
Limiting how often a function fires, debounce waits for a pause; throttle caps the rate.
Roles, labels, and keyboard support so assistive tech can use the app.
Using meaningful HTML elements over generic divs, better a11y and SEO.
A wrapper that catches render crashes and shows a fallback instead of a blank page.
Elsewhere
another notebook Claude for Research
UI Design vocabulary
Claude for Research