Frontend Architecture

MPA, SPA, SSR app, static site and micro frontends; design systems, internationalization, BFFs, deployment — and the fact that web clients never update atomically.

Choosing a Frontend Architecture

MPA, SPA, SSR application, static site and micro frontends compared on team shape, content versus application, discoverability, interactivity depth and deployment independence — with no universal winner.

Q · Given this product, this team and these users, which frontend architecture is the right one — and what actually decides it?
MPA vs SPA

An MPA gets history, scroll, focus reset, back and forward, and per-page code loading from the browser. A SPA must rebuild all of it — and buys preserved state and richer transitions in return.

Q · What exactly does the browser do for a multi-page application that a single-page application has to reimplement, and what does the SPA get in exchange?
Micro Frontends

Independently owned and deployed frontend boundaries. The driver is almost always organisational rather than technical, the benefit lands on teams, and the cost lands on users.

Q · When does splitting a frontend into independently deployed units pay for itself, and who actually pays the bill?
Design Systems

Tokens to components to patterns to applications: a versioned product with a public API, accessibility built in at the component layer, and an adoption problem that decides whether it is leverage or a cost centre.

Q · What is a design system actually made of, and what makes one that teams use rather than one that teams work around?
Design Tokens

Named values in three layers — primitive, semantic, component. The semantic layer is the one that makes a re-theme a set of value swaps instead of a rewrite.

Q · How should design values be named and layered so that a theme, a dark mode or a rebrand is a change to values rather than a change to every component?
Internationalization

Not a translation table bolted on later: plural rules, locale-aware formatting, text that grows, and a layout that has to work in both directions.

Q · What has to be true about this interface before it can exist in another language?
Timezones and Locale Formatting

Instant, timezone, locale, display — four separate things. Most date bugs come from collapsing them, and most of the rest come from string manipulation.

Q · This timestamp is correct in the database. Why is it showing the wrong day?