Frontend Engineering

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