Frontend Architecture

23 chapters

This page contains all chapters in this theme. Use search and the type and difficulty filters to find the right material inside this section.

Difficulty:

Only chapters matching both the selected material type and the selected difficulty are shown.

Why Frontend Architecture Matterseasy

Introductory chapter on how frontend architecture connects rendering models, client state, performance, observability, release safety, and team scaling.

Frontend Application Architecture: App Shell, Feature Modules, and Shared Kerneleasy

How to structure frontend as a modular system: app shell, feature modules, shared kernel, import boundaries, public module APIs, and team ownership.

Frontend Architecture for Design Systems (short summary)medium

Micah Godbolt’s book on the four pillars of frontend architecture: code, process, testing, and documentation. Uses Red Hat to explain design systems, component contracts, and quality checks.

Frontend rendering models: SPA, SSR, SSG, streaming, and hydrationmedium

How to choose a rendering model for SEO, latency, CDN caching, personalization, and product constraints: SPA, SSR, SSG, streaming, islands, and hydration.

Frontend Data Layer: REST, GraphQL, BFF, and Orchestrationmedium

How to design the frontend data layer: REST, GraphQL, BFF, route loaders, aggregation, partial failures, retries, and contract evolution.

Client State and Cache Architecture in Frontend Applicationsmedium

How to separate local UI, server, URL, and form state; design client caching, invalidation, optimistic updates, and behavior under network failures.

Accessibility, Forms, and Internationalization as Architectural Constraintsmedium

How accessibility, forms, keyboard navigation, form validation, autosave, and permission-aware UX shape frontend application architecture.

Frontend Platform Performancemedium

Performance budgets, bundle size, code splitting, asset delivery, virtualization, RUM, and Core Web Vitals in frontend platform architecture.

Testing Strategy for Complex Frontend Applicationsmedium

How to build a test pyramid, choose unit, integration, end-to-end, visual, and contract checks, control flaky behavior, and make quality gates part of frontend platform architecture.

Frontend Observability, Feature Flags, and Safe Releasesmedium

Client telemetry, error tracking, session replay, feature flags, staged rollout, kill switches, and rollback as part of frontend release safety.

Frontend Application Security and the Browser Threat Modelmedium

How to design frontend security through the browser threat model: XSS, CSRF, CSP, token storage, third-party code, BFF, and supply-chain risk.

Modular frontend vs micro-frontends: when and why to split an applicationmedium

A decision framework for modular monoliths and micro-frontends: module boundaries, ownership, migration paths, integration tax, and selection criteria.

Building Micro-Frontends (short summary)medium

Luca Mezzalira on scaling frontend teams: fourteen chapters on principles, composition models, automation, migration, and organizational adoption of micro-frontends.

Micro Frontends in Action (short summary)medium

Michael Geers on micro-frontends: composition models, platform contracts, team autonomy, and migration from a monolithic SPA.

The Art of Micro Frontends - Second Edition (short summary)medium

Florian Rappl on mature micro-frontend platforms: runtime orchestration, contracts, change governance, developer experience, and enterprise practices.

Frontend system design case: Design Instagram Feedmedium

Practical frontend case: designing an Instagram feed with an emphasis on performance, caching, pagination and UX for mobile scenarios.

Frontend System Design Case: Google Docs-Style Collaborative Editorhard

A practical frontend case for a Google Docs-style collaborative editor: realtime synchronization, OT/CRDT, offline mode, reconnect, conflicts, and UX during network failures.

Frontend System Design Case: Data-Dense Analytics Dashboardhard

A practical frontend case for a data-dense analytics dashboard: filters, URL state, BFF, query cache, heavy tables, RBAC/ABAC, exports, and tight performance constraints.

React.js: The Documentaryeasy

React as a frontend platform story: component model, JSX, open-source adoption, rendering boundaries, and the tooling ecosystem around interfaces.

Angular: The Documentaryeasy

Angular as a frontend platform story: TypeScript, dependency injection, compilation, managed migrations, SSR, and team standardization.

Svelte Origins: A JavaScript Documentaryeasy

Svelte as a compiler-first interface model: reactivity, generated code, SvelteKit, hydration, and client-side JavaScript cost.

Vite: The Documentaryeasy

How Vite reshaped frontend development through the dev server, native ESM, HMR, plugins, Rollup/Rolldown, and faster feedback loops.

Ember.js: The Documentarymedium

History of Ember.js: convention over configuration, Ember CLI, Ember Data, Glimmer, RFCs, LTS, and managed upgrades.