Frontend · Reference
Frontend vocabulary
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.
The atoms of a modern frontend. Everything you see is made of these.
Description
The atoms of a modern frontend. Everything you see is made of these.
Terms
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.
Where data lives and how it moves. Naming this is how you spec interactive behavior.
Description
Where data lives and how it moves. Naming this is how you spec interactive behavior.
Terms
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.
Getting data in and out, and handling the inevitable waiting and failing.
Description
Getting data in and out, and handling the inevitable waiting and failing.
Terms
Requesting data from a server over the network.
vs query { user }
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).
confirm with server after
Showing the change instantly and rolling back if the server rejects it, feels fast.
static-generated
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.
How URLs map to screens in a frontend app.
Description
How URLs map to screens in a frontend app.
Terms
A URL pattern mapped to a specific page/component.
full page reload
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.
The many ways to apply CSS in a frontend. Name the one your project uses.
Description
The many ways to apply CSS in a frontend. Name the one your project uses.
Terms
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).
(who wins)
The rules deciding which CSS wins when several target the same element.
The ecosystem that turns your code into a running app.
Description
The ecosystem that turns your code into a running app.
Terms
The library that structures your UI (React, Vue, Svelte, Angular). Name yours so output fits.
SvelteKit · Remix
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.
update ⚡
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.
What separates a frontend that works from one that's fast and accessible.
Description
What separates a frontend that works from one that's fast and accessible.
Terms
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.
→ smaller bundle
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.