Architecture
Microfrontends for every team
Your frontend should scale like your backend. Here is how we split the Platform admin tool into independently deployable units.
Bobby Scales, Engineering Excellence Manager
· 2 min read
The Platform admin tool had three pages, one codebase, and four users. A team that thinks a few years out sees one point of failure.
Horizontal or vertical?
There are two ways to split a frontend. A vertical split gives each page its own microfrontend. A horizontal split breaks a single page into pieces, like the header and footer, and deploys each one on its own.
Most teams debate which one fits. That debate is a sign of thinking at the wrong level.1 Following our Guiding Constant, we did both:
- Vertical: one microfrontend per page. That is three.
- Horizontal: the header, navigation, and footer each became their own. That is three more.
- Composition: a shell loads the other six, and a second shell loads the first shell’s configuration.
Implementation
Each unit has its own repository, pipeline, and RACI matrix. Every matrix lists me as Consulted, so I can review every change without slowing anyone down.
The units never import each other. They communicate over the Excellence Bus. When a user clicks a link, the navigation publishes a NavigationIntentDeclared event, and the header subscribes to it. Each unit also bundles its own copy of React, which guarantees isolation.
Everything deploys to three regions. All four users sit in the same office, but we are designing for the users we will have.
Results
The migration resulted in a slightly increased build time, which we determined to be acceptable for the runtime and stability gains our users now enjoy.2 The header and footer even run different versions of the design system, which proves they are truly independent.3
From leadership
Bobby is always three steps ahead. I’ve asked every team to take a look at what Platform did here.
Jordan Ellsworth
VP of Engineering
Great example of the Strangler Fig pattern, applied in reverse. Happy to walk anyone through it.
Footnotes
-
One engineer suggested keeping a single app with a clean folder structure. I walked them through the difference between a folder and a boundary. ↩
-
Builds went from 40 seconds to 14 minutes. Page loads went from under a second to about eleven. ↩
-
Two of the four users have asked whether the old version can come back. Their feedback is being tracked in a follow-up. ↩