Frontend Architecture
This cluster is a connected course in frontend architecture, the engineering of browser applications and the systems around them. It starts from the shape of a single page app and works through structure, routing, state, components, and events, then widens to systems, scale, realtime, interactivity, browser state, and performance. The guides read in order as a curriculum, but each also stands on its own, and all of them favour framework-neutral principles illustrated with a stack that hides nothing.
The guides
All twelve guides in this cluster, in suggested reading order:
- 1. SPA Architecture Available now
How single page apps are built: the app shell, client-side routing, the data layer, and rendering from state. - 2. Client-side Architecture Available now
Structuring a frontend into layers with separation of concerns, one-way dependencies, and thin views. - 3. Routing Available now
Client-side routing as a system: matching, parameters, nested routes, the History API, guards, and code-splitting. - 4. State Management Available now
A single source of truth, unidirectional data flow, derived state, and how much to centralize. - 5. Component Communication Available now
Props down and events up, lifting state for siblings, a shared store for distant parts, and pub-sub. - 6. Event-driven UI Available now
Reacting to events, DOM delegation, the observer pattern, domain events, and taming noisy events. - 7. Frontend Systems Available now
The frontend as a system: the build pipeline, modules, the network boundary, the browser runtime, and observability. - 8. Scalable UI Available now
Scaling code and load: composition, a design system and tokens, consistent patterns, virtualization, and budgets. - 9. Realtime Systems Available now
Live, collaborative UIs: transports, syncing clients, optimistic updates, presence, and resilient reconnection. - 10. Interactive Apps Available now
Software in the browser: immediate feedback, interaction state machines, undo and redo, and rich input. - 11. Browser State Systems Available now
Where state lives: in-memory and the URL, Web Storage, IndexedDB, cookies, and choosing the right store. - 12. Frontend Performance Available now
The critical path, bundle size, the main thread, Core Web Vitals, and a measurement culture.
New to this? Begin with the Foundations cluster for core Backbone.js concepts, then return here. For how these choices affect search, see the JavaScript SEO cluster.
Frequently Asked Questions
What is frontend architecture?
Frontend architecture is how you structure a browser application and the system around it, the layers, the state, the routing, the way components communicate, and the build and runtime it lives in, so that it stays maintainable, scalable, and fast as it grows.
Where should I start in this cluster?
Start with SPA architecture for the overall shape, then client-side architecture for how to structure the code. From there the guides flow through routing, state, components, and events into systems, scale, realtime, interactivity, browser state, and performance.
Do these guides assume a particular framework?
No. The cluster teaches framework-neutral principles and illustrates them with plain JavaScript and Backbone, a stack that hides nothing. The same ideas, layering, unidirectional state, crawlable routing, apply directly to React, Vue, Angular, and others.
How does frontend architecture relate to SEO?
Architecture decisions, especially routing and rendering, determine whether content is crawlable and how fast a page loads, both of which affect ranking. This cluster pairs with the JavaScript SEO guides, which cover crawling, rendering, and indexing in depth.
Related clusters
Frontend architecture links to these related clusters. Continue your path:
Build the fundamentals first.
The complete Backbone guide is the hands-on companion to this architecture cluster.
Explore the Backbone Guide →