The Frontend Architecture Roadmap
Frontend architecture is the set of decisions that keep an interface maintainable as it grows: how components talk to each other, where state lives, how the application stays fast, and how the structure scales past a handful of files. This path orders the architecture cluster so each decision builds on the last, from the basic shape of a frontend system to the patterns that keep large applications from collapsing under their own weight.
Each stage names the articles to read and the example to run.
What you'll learn
Stage 1: What frontend architecture is
Start with the shape of a frontend system before the individual patterns.
The systems view
Read frontend systems and single page application architecture. Seeing the application as a system of cooperating parts, rather than a pile of files, is the mindset everything else depends on.
Stage 2: How components communicate
The first real decision is how the parts talk without becoming tangled.
Events over direct calls
Study component communication and event-driven UI, then run the event-driven UI example. Decoupling components through events is what lets an interface grow without every change risking something unrelated.
Stage 3: Where state lives
Shared data is the next architectural decision, and a consequential one.
A single source of truth
Read state management and browser state systems, then run the state management example. Deciding what is shared and giving it one home prevents the drift that causes hard-to-trace bugs.
Stage 4: Keeping it fast
Architecture and performance are linked, so address speed as a structural concern.
Performance by design
Work through frontend performance. The structural choices made here, around rendering and data flow, determine how fast the application can be before any micro-optimization.
Stage 5: Structuring for scale
Finally, learn the patterns that hold up as the codebase and team grow.
Structure that survives growth
Read scalable UI and client-side architecture. These tie the earlier decisions into a structure that a larger team can work in without stepping on each other.
Stage 6: Practise the patterns
Cement the ideas by building with them.
From patterns to practice
Combine the SPA routing example, the state management example, and the event-driven UI example into a small structured app. The full cluster is at frontend architecture.
Frequently Asked Questions
What is frontend architecture?
Frontend architecture is the set of decisions that keep an interface maintainable as it grows: how components communicate, where state lives, how the app stays fast, and how the structure scales. It treats the application as a system of cooperating parts.
How should frontend components communicate?
Through events rather than direct references where possible. Decoupling components with an event bus lets the interface grow without every change risking something unrelated, which is the core of event-driven UI.
Where should application state live?
Decide what is genuinely shared and give it one home as a single source of truth, while keeping view-specific data local. This prevents the drift between copies that causes hard-to-trace bugs.
How do I structure a frontend app to scale?
Decouple components through events, centralise shared state, treat performance as a structural choice, and adopt patterns for scalable UI and client-side architecture so a larger team can work without conflicts.
Read next: the frontend performance roadmap, or the Guides hub.
Start here?
The frontend systems view is the mindset every later stage builds on.
Read: Frontend Systems →