Frontend patterns (blueprint)

Purpose: Deep, project-agnostic guides for frontend component, state management, and data-fetching patterns. Each pattern describes its intent, implementation, trade-offs, and testing strategy.

Guide · Updated · Source

Audience: Teams adopting Frontend / Web Engineering; project-specific component documentation stays in Storybook and docs/development/frontend/.

UI pattern thinking means naming recurring structures—composition, state ownership, data flow—so teams can reuse solutions deliberately instead of reinventing ad hoc trees and stores. Start from the component boundary, then decide where state lives, then how data crosses the network; routing and forms sit on top of those choices.

Frontend patterns adoption path

How teams move from shared frontend vocabulary through deep pattern guides to deliberate, reviewable component and state choices.

  1. Process flowConceptual map for navigating this patterns index.
  2. StartAlign on component boundaries, state ownership, and data flow from FRONTEND.md.
  3. Core steps (see walkthrough below)Open the deep guides for component architecture and state management.
  4. OutcomeDeliberate pattern choices with project specifics left to Storybook and docs/development/.
  5. Note: Core knowledge:FRONTEND.md supplies foundational component, rendering, state, and CSS vocabulary.

Core knowledge: Frontend / web engineering body of knowledge — component architecture, rendering, state management, CSS.

Bridge: Frontend Engineering ↔ SDLC ↔ PDLC bridge — how frontend patterns apply across the lifecycle.

Deep guides

Guide Focus
Component architecture Taxonomy, composition APIs, state ownership, design systems, testing, framework comparison
State management Categories, decision tree, Flux/Redux, library matrix, server cache, machines, forms, URL state

Pattern categories (overview)

Pattern category Focus See
Component patterns Compound components, render delegation, controlled vs uncontrolled, polymorphic components, error boundaries Component architecture
State management patterns State colocation, derived state, optimistic updates, state machines for complex flows State management
Data fetching patterns Cache-and-network, stale-while-revalidate, infinite scroll, polling, real-time subscriptions State management
Routing patterns File-based routing, nested layouts, route-level code splitting, prefetching, auth guards Component architecture
Form patterns Multi-step forms, field-level validation, server-side validation integration, autosave State management
Error handling patterns Error boundaries, toast notifications, retry UI, graceful degradation, offline fallbacks Component architecture
Internationalization patterns ICU message format, locale-aware formatting, RTL layout, translation workflow integration Frontend / web engineering body of knowledge

Keep project-specific performance budgets in docs/development/ and optimization decisions in docs/adr/, not in this file.