Skip to main content

Appendix B — Tools and Technology Cheatsheet 2026

Status Ratings: ADOPT / TRIAL / ASSESS / HOLD


Core Stack

CategoryToolVersionStatusNotes
UI FrameworkReact19.2ADOPTCompiler available, RSC stable
Meta-frameworkNext.js16ADOPTTurbopack default, App Router stable
Alt meta-frameworkAstro5ADOPTBest for content-heavy sites
LanguageTypeScript5.9ADOPTMandatory for new projects
StylingTailwind CSS4.xADOPTOxide engine, CSS-first config
Bundler (SPA)Vite6.xADOPTDefault for new SPAs and libraries
Bundler (Next.js)Turbopackbuilt-inADOPTNo config needed in Next.js 16
Bundler (migration)Rspack1.xTRIALDrop-in Webpack replacement
Package managerpnpm9.xADOPTBest for monorepos
RuntimeNode.js22 LTSADOPTNative TypeScript support

Testing

CategoryToolStatusNotes
Unit + IntegrationVitestADOPT~98% satisfaction, Vite-native
Component renderingReact Testing LibraryADOPTIndustry standard
API mockingMSW (Mock Service Worker)ADOPTNetwork-level mocking
E2E + AccessibilityPlaywrightADOPT94% satisfaction, multi-browser
Visual regressionChromaticTRIALStorybook integration
PerformanceLighthouse CIADOPTCI performance gating
Bundle analysisbundlewatchADOPTSize budget enforcement
A11y unit testsaxe-coreADOPTVia @axe-core/playwright or jest-axe

State Management

Use CaseToolStatusNotes
Server stateTanStack Query v5ADOPTDefault for all data fetching
Client UI stateZustandADOPT~3KB, no Provider boilerplate
FormsReact Hook FormADOPTUncontrolled, performant
Schema validationZodADOPTType-safe validation
URL statenuqsTRIALType-safe URL search params
Atomic stateJotaiTRIALFine-grained, atom-based
Complex flowsXStateASSESSState machines for complex UX
Enum/boolean stateuseStateADOPTAlways start here

Architecture and Monorepos

CategoryToolStatusNotes
Monorepo buildTurborepoADOPTRemote caching, task graph
Monorepo enterpriseNxADOPTModule boundaries, generators
Workspace managerpnpm workspacesADOPTFoundation for monorepos
Circular dep checkmadgeADOPTFitness function in CI
Architecture docsMermaidADOPTDiagrams as code, GitHub native
ADR managementLog4brainsTRIALADR tracking and publishing
FSD lintingSteigerTRIALFeature-Sliced Design linter

DevOps and CI/CD

CategoryToolStatusNotes
CI/CDGitHub ActionsADOPTDefault for most teams
CI/CD (Azure)Azure DevOps PipelinesADOPTEnterprise/Microsoft stacks
Preview deploysVercelADOPTPer-PR previews, edge network
Preview deploys (alt)Cloudflare PagesADOPTGood price/performance
ContainerDocker multi-stageADOPTStandard for non-serverless
IaCPulumi (TypeScript)TRIALTypeScript IaC — natural for FE teams

Component Libraries and Design

CategoryToolStatusNotes
Headless UI primitivesRadix UIADOPTAccessibility-first, composable
Headless (alternative)shadcn/uiADOPTCopy-paste, built on Radix
Component docsStorybookADOPTComponent development and docs
Icon libraryLucideADOPTTree-shakable, TypeScript
AnimationFramer Motion (Motion)TRIALWeb Animations API preferred for simple
Data visualizationRechartsADOPTReact-native charting
High-frequency chartsD3.js + CanvasADOPTWhen Recharts is too slow

Hold List — Do Not Use for New Projects

ToolReasonMigration Path
Create React AppUnmaintained since 2022Vite + React
Webpack (new)Superseded by Vite/RspackRspack or Vite
EnzymeRTL is the standardReact Testing Library
moment.js300KB+, mutable APIdate-fns v4 or Temporal API
RecoilMeta archived, unmaintainedJotai or Zustand
nextjs-mfHeading EOL (ThoughtWorks Vol 33)@module-federation/enhanced
AngularJS 1.xEOL January 2022Angular 17+ or React
Redux (new projects)Overly complex for most use casesZustand + TanStack Query
CSS-in-JS runtimePerformance cost on hydrationTailwind CSS or CSS Modules

Appendix C — Glossary of Terms

TermDefinition
ADRArchitecture Decision Record — a short document capturing a significant architectural decision, its context, and its consequences
ATAMArchitecture Tradeoff Analysis Method — a structured SEI methodology for evaluating architectural decisions against quality attributes
Atomic DesignBrad Frost's design system methodology organizing components into atoms, molecules, organisms, templates, and pages
BFFBackend for Frontend — a dedicated backend service shaped specifically for one UI client (web, mobile), owned by the frontend team
Bounded ContextDDD concept: an explicit boundary within which a specific domain model and ubiquitous language applies consistently
C4 ModelSimon Brown's four-level architecture documentation model: Context, Container, Component, and Code
CLSCumulative Layout Shift — Core Web Vital measuring visual stability; target ≤ 0.1
CRDTConflict-free Replicated Data Type — a data structure enabling conflict-free concurrent updates in distributed systems (Yjs, Automerge)
CSPContent Security Policy — HTTP response header that instructs browsers to restrict sources of executable scripts and other resources
CSRClient-Side Rendering — HTML rendered by JavaScript in the browser; no server-rendered HTML
Conway's LawOrganizations design systems that mirror their own communication structure
DDDDomain-Driven Design — an approach to software development that models software around the business domain
DACIDriver, Approver, Contributors, Informed — a decision-making framework clarifying roles in a decision
FCPFirst Contentful Paint — time until the first content element is painted in the browser
FSDFeature-Sliced Design — a framework-agnostic frontend codebase organization methodology with six hierarchical layers
Fitness FunctionAn automated test that verifies an architectural property of the system (no circular dependencies, bundle size under budget)
GraphQLA query language for APIs and a runtime for executing queries with your data
INPInteraction to Next Paint — Core Web Vital measuring input responsiveness; target ≤ 200ms
ISRIncremental Static Regeneration — Next.js rendering pattern that serves a cached static page while regenerating it in the background
iSAQBInternational Software Architecture Qualification Board — German-origin certification body for software architects
LCPLargest Contentful Paint — Core Web Vital measuring loading performance; target ≤ 2.5s
MFEMicro-Frontend — an independently developed and deployed frontend application module; extends microservices model to the UI
MQTTMessage Queuing Telemetry Transport — lightweight pub/sub protocol for IoT device communication
NFRNon-Functional Requirement — quality attributes such as performance, security, scalability, and accessibility
OCPPOpen Charge Point Protocol — industry standard protocol for EV charging station communication
OTOperational Transformation — algorithm enabling real-time collaborative editing (used by Google Docs)
PKCEProof Key for Code Exchange — OAuth 2.1 security extension mandatory for all authorization code flows
Ports and AdaptersAlso called Hexagonal Architecture: ports are interfaces, adapters are implementations — the application core depends on ports only
Progressive EnhancementBuilding web experiences in layers: functional HTML, then CSS, then JavaScript — each layer optional
RADIORequirements, Architecture, Data, Interface, Optimizations — frontend system design interview framework
RFCRequest for Comments — a document proposing a significant technical change, circulated for team input before a decision is made
RSCReact Server Components — React components that execute on the server and send minimal HTML/JSON to the browser
SBISituation, Behavior, Impact — structured feedback framework
SPASingle-Page Application — a web application loading one HTML page and updating dynamically via JavaScript
SRISubresource Integrity — a browser mechanism to verify that fetched resources have not been tampered with, using cryptographic hashes
SSEServer-Sent Events — a web standard for unidirectional server-to-client streaming over HTTP
SSGStatic Site Generation — pre-rendering all pages to HTML at build time; served from CDN
SSRServer-Side Rendering — rendering the full HTML of a page on the server per request
STAR-LSituation, Task, Action, Result, Learnings — behavioral interview framework with added learning dimension
Strangler FigA software migration pattern that incrementally replaces a legacy system route-by-route without a big-bang rewrite
Tech RadarA visual tool (popularized by ThoughtWorks) classifying technologies into ADOPT, TRIAL, ASSESS, and HOLD rings
tRPCTypeScript Remote Procedure Call — end-to-end type-safe API layer for full-stack TypeScript applications
TTFBTime to First Byte — the time from a browser request until the first byte of the server response is received
Ubiquitous LanguageDDD concept: a shared vocabulary used consistently by developers and domain experts within a Bounded Context
VirtualizationRendering only the visible items in a long list (windowing) — used for lists of hundreds or thousands of items
WCAGWeb Content Accessibility Guidelines — international standard for web accessibility; version 2.2 is the current target
XSSCross-Site Scripting — a category of injection attack where malicious scripts are injected into web pages viewed by other users

End of Appendices

The Complete Frontend Architect Book — May 2026 Edition React 19.2 | TypeScript 5.9 | Next.js 16 | Tailwind CSS 4 | Vitest 4 | Playwright 1.50