Frontend Engineering

Busted

• BundlerThe tool that follows your imports and packs hundreds of source files into a few optimized files a browser can actually load.
• Client ComponentA component whose JavaScript reaches the browser, letting it hold state, handle events, and use browser APIs.
• Client-Side Data CacheA memory of what you already fetched: components share one copy, duplicate requests collapse into one, and refetching follows a freshness policy.
• Client-Side Rendering (CSR)The server sends a nearly empty HTML shell and the browser's JavaScript draws the entire page after it loads.
• Code SplittingCutting one huge JavaScript bundle into chunks so a visitor downloads only the code this page needs and grabs the rest later.
• ComponentA named, reusable piece of UI (a button, a card, a whole navbar) that you define once and drop in anywhere with different data.
• Component CompositionMaking a component flexible by letting callers nest other components inside it, instead of piling on boolean props for every variation.
• Component LifecycleThe stages a piece of UI passes through: it appears (mount), it updates when data changes, and it gets removed (unmount).
• Compound ComponentsA set of components, like Tabs.Root and Tabs.Trigger, that share state behind the scenes while you control how their parts are arranged.
• Context / ProviderA way to give shared data to every component in one branch without passing it through each layer as props.
• Controlled vs. Uncontrolled InputA controlled field takes its value from React state; an uncontrolled field keeps its own value in the DOM until you read it.
• Convention over ConfigurationThe framework treats standard file names and folders as instructions, so common behavior needs little or no setup.
• CSS-in-JS vs. CSS ModulesTwo ways to stop styles leaking: a .module.css file whose classes the build renames, or styles written inside the component in JS.
• Custom ElementA reusable element built into the browser, registered as your own HTML tag and usable with plain JavaScript or any framework.
• Data FetchingThe code that goes and gets remote data for a screen, plus the loading, error, and stale states that come with the trip.
• Debounce vs. ThrottleDebounce runs after rapid events go quiet; throttle keeps running during them, but no more than once per chosen interval.
• Design TokensNamed design values that let every component use the same colors, spacing, type, and themes without copying raw numbers.
• DOM (Document Object Model)The browser's live tree of the page, where HTML becomes nodes that JavaScript can inspect, change, and listen to.
• Dynamic RouteOne page template serving thousands of URLs by reading the changing part of the address as a variable.
• End-to-End Type SafetyOne set of types flowing from database to API to UI, so renaming a column breaks the build instead of breaking production.
• Error BoundaryA crash barrier around part of the UI that catches render failures and replaces the broken section with fallback content.
• Event DelegationOne listener on a parent handles events from many current and future children by checking which child the event came from.
• Global State / StoreShared state that any component can subscribe to and update through the store's own API, however deep in the tree it sits.
• Headless ComponentA component that gives you the behavior, keyboard handling, and accessibility of a widget with zero styling. You bring the CSS.
• Higher-Order ComponentA function that takes a component and returns a wrapped version with extra behavior or props, such as authentication or store data.
• Hook / ComposableA reusable function that packages state and lifecycle logic while leaving each component in charge of its own markup.
• Hot Module Replacement (HMR)A dev server swaps changed code into the running page, often preserving UI state instead of doing a full reload.
• HydrationServer HTML arrives looking finished, then JavaScript loads and wires up the handlers so the page actually responds.
• Incremental Static Regeneration (ISR)A cached static page that Next.js rebuilds after it goes stale, so content updates without rendering every visit.
• Islands ArchitectureA mostly static HTML page where JavaScript wakes up only the interactive regions, not the whole screen.
• JSX / Template SyntaxThe HTML-looking syntax inside a component that declares what the UI should contain for the current data.
• MemoizationRemembering a calculation's result and reusing it while its inputs stay the same, instead of doing the work every render.
• Module / ImportA file with private code and explicit exports that other files can bring in with import.
• MonorepoOne Git repository containing several apps and shared packages, with tooling that understands how they depend on each other.
• Package ManagerThe tool that installs project libraries, locks their versions, and runs scripts from package.json.
• PortalRendering a child somewhere else in the DOM, usually under document.body, while it still behaves like part of its original component tree.
• Progressive EnhancementBuild so the core job works with plain HTML, then layer JavaScript on top for the nicer version. If scripts fail, it still works.
• Prop DrillingPassing data down through layers of components that don't care about it, just so one component at the bottom can use it.
• Props vs. StateProps are data handed in from the parent and never edited by the child. State is data the component owns, changes, and re-renders for.
• Re-render CascadeOne state update makes a component and a big branch beneath it render again, even though only a small part of the screen needed new work.
• React Server Components (RSC)React components that render only on the server, so their own code adds nothing to the browser bundle.
• RefA direct handle on a real DOM element, or on a value that survives re-renders, so you can focus it, measure it, or scroll it.
• Render PropsA component hands data to your function, and your function returns the UI, letting you reuse behavior without locking in the markup.
• RoutingThe rulebook deciding which screen shows for a given URL, and how you move between screens.
• Server ActionA server-only function the UI or a form can call through a framework-managed request, without hand-writing a separate API route.
• Server-Side Rendering (SSR)The server builds the finished HTML for each request, so the browser paints real content instead of an empty div waiting on JavaScript.
• Shadow DOMA private DOM subtree whose markup and selectors stay behind a component boundary, protecting a widget from most page CSS and vice versa.
• Side EffectAnything a component does besides return UI: fetching, timers, subscriptions, touching the DOM. Work with consequences outside render.
• Signals / Fine-Grained ReactivityReactive values that track who reads them, so a change updates the exact computations and DOM bindings that depend on it.
• Single-Page App (SPA)One HTML page that swaps its content with JavaScript as you navigate, so the browser never does a full reload.
• Slot / Children PatternA hole in a component that the caller fills with whatever they want. In React it is 'children'; in Vue, Svelte, and web components it is a 'slot'.
• State ManagementDeciding where an app's changing data lives and who can update it, so two screens never disagree about the same fact.
• Static Site Generation (SSG)Pages are rendered once at build time into plain HTML files, then served straight from a CDN. No server work per visitor.
• Streaming RenderingThe server sends the page in pieces: layout and fast content first, skeletons where slow data goes, real content swapped in as it lands.
• TranspilationA build step that turns TypeScript, JSX, or newer JavaScript into JavaScript the target runtime can execute.
• Utility-First CSSStyling by stacking tiny single-purpose classes right in the markup (flex, p-4, text-sm) instead of naming rules in a stylesheet.
• Virtual DOM / ReconciliationThe framework compares old and new in-memory UI trees, then changes only the real DOM parts that need to catch up.

The territory

30 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.

• Componentreusable self-contained UI building block with props and state"a chunk of UI I reuse everywhere" · "like a Lego piece of the page"
• Props vs. Statepassed-in data vs. data a component owns and changes"stuff handed down vs. stuff it remembers" · "inputs vs. memory"
• Component Compositionbuilding flexible UI by nesting, not boolean prop piles"build it out of smaller pieces" · "nest things instead of adding more options"
• Slot / Children Patternletting callers inject arbitrary content into a component"let me drop my own content inside" · "the bit between the tags"
• Server-Side Rendering (SSR)server builds HTML per request, browser gets finished page"page arrives already filled in" · "rendered before it hits the browser"
• Static Site Generation (SSG)pages pre-built at deploy time into plain HTML files"baked ahead of time" · "just files on a server"
• Client-Side Rendering (CSR)browser downloads JS, then draws the page itself"blank page until the JavaScript runs" · "the app builds itself in the browser"
• Hydrationattaching JavaScript interactivity to server-rendered HTML"the page looks ready but nothing clicks yet" · "waking up the HTML"
• React Server Components (RSC)components that render only on server, ship zero JS"server components" · "components that never reach the browser" · "no-JavaScript components"
• Single-Page App (SPA)one page swaps content via JS, no full reloads"never refreshes when you click" · "feels like an app not a site"
• Routingmapping URLs to which screen or view renders"what page shows for what link" · "the URL-to-screen map"
• Dynamic Routeone template serving many URLs via a variable slug"route params" · "one page template for every product" · "the /blog/whatever-slug thing"
• State Managementshared app data many components read and update"keeping everything in sync" · "one place for the app's data"
• Global State / Storeapp-wide data container avoiding prop drilling"data anything can grab" · "the shared brain"
• Prop Drillingpassing data through many layers just to reach a child"handing it down five levels" · "passing it along the whole chain"
• Side Effectcode running outside render: subscriptions, timers, fetches"the fetching and timer stuff" · "things that happen outside drawing the page"
• Component Lifecyclewhen a component appears, updates, and is removed"when it shows up and goes away" · "setup and cleanup"
• Data Fetchingcode that gets remote data before or during render"loader" · "getting the data for the page" · "calling the API for this screen"
• Optimistic UIshow the result instantly, reconcile with server after"reacts before it saves" · "pretend it worked already"
• Client-Side Data Cacheremembering fetched data to avoid repeat requests"query cache" · "don't refetch what I already have" · "keeps data around"
• Bundlertool compiling source into browser-ready optimized files"the build step" · "the thing that packages my code" · "compile before shipping"
• Code Splittingslicing the bundle so pages load only what they need"don't load the whole app upfront" · "load per-page"
• Lazy Loadingdeferring a component or asset until it's actually needed"load it when they scroll to it" · "only when it's needed"
• Streaming Renderingsend page in chunks, show fallbacks while parts load"suspense boundary" · "page fills in piece by piece" · "skeleton until it's ready"
• Utility-First CSSstyling by composing tiny single-purpose classes in markup"the classes-in-the-HTML approach" · "no separate stylesheet"
• CSS-in-JS vs. CSS Modulesscoped styling strategies preventing class-name collisions"styles that can't leak" · "styles that only apply here"
• Headless Componentbehavior and accessibility without any visual styling"unstyled component" · "logic without the looks" · "I want to style it myself"
• Refdirect handle to a DOM element for focus, measure, scroll"a direct handle on the element" · "grab the actual thing on the page"
• Progressive Enhancementcore works without JS, richness layers on top"still works if scripts fail" · "basic version first"
• End-to-End Type Safetytypes flowing from database through API to UI"type safety" · "it yells at me before it breaks" · "typos caught before deploy"

Deeper in the field

• DOM (Document Object Model) browser's live tree of elements, attributes, and text
• Client Component interactive component whose JavaScript executes in the browser
• Hook / Composable reusable function encapsulating stateful component logic
• Context / Provider supplies shared data to a subtree without prop drilling
• Error Boundary catches rendering failures and displays fallback UI
• Server Action server-executed function invoked directly from frontend code or forms
• JSX / Template Syntax markup-like syntax used to declare component output
• Virtual DOM / Reconciliation in-memory tree diffed to compute minimal DOM updates
• Signals / Fine-Grained Reactivity values that update exactly the DOM nodes depending on them
• Memoization caching a computed value so it doesn't recalculate every render
• Re-render Cascade one state change needlessly redrawing large component subtrees
• Compound Components related components sharing implicit state via context
• Render Props passing a function that returns UI to control rendering
• Higher-Order Component function wrapping a component to add behavior
• Portal rendering a child into a DOM node outside its parent
• Controlled vs. Uncontrolled Input React owns the field value vs. the DOM owns it
• Event Delegation one listener on a parent handling many children's events
• Debounce vs. Throttle wait-until-quiet vs. rate-limit for rapid-fire events
• Custom Element framework-agnostic reusable element built on browser standards
• Shadow DOM encapsulated DOM subtree preventing styles and markup from leaking
• Islands Architecture mostly static HTML with isolated interactive regions
• Incremental Static Regeneration (ISR) static pages that quietly rebuild themselves on a schedule
• Module / Import code unit exposing functionality for other files to consume
• Package Manager installs, versions, and runs third-party project dependencies
• Transpilation converts newer or typed source into browser-compatible JavaScript
• Hot Module Replacement (HMR) updates changed modules during development without a full reload
• Convention over Configuration folder structure implies routes and behavior without setup files
• Design Tokens named variables for colors, spacing, type across the codebase
• Monorepo one repository holding multiple apps and shared packages