Cloudflare's bold move: A new template for Vertical Microfrontends!
Unleashing the power of path-based edge routing!
Cloudflare has introduced a Worker template that revolutionizes the way independent teams manage their stacks and pipelines. This architecture, known as Vertical Microfrontends (VMFE), assigns specific URL paths on a single domain to dedicated Cloudflare Workers, creating a seamless single-page application experience.
The shift from horizontal component mixing to vertical ownership is a game-changer. Each team now has control over their vertical stack, from framework selection to CI/CD management, without interfering with other teams' routes. For instance, the /docs team can choose their framework and handle their pipeline, distinct from the /marketing or /dashboard teams.
But here's the technical magic:
- Service Bindings: A Router Worker communicates directly with sub-application Workers at the edge, minimizing latency by avoiding the public internet.
- Router Worker: Acts as the gateway, directing requests based on path prefixes.
- HTMLRewriter: Automates HTML response adjustments, fixing pathing issues like adding /docs to image sources when services are reverse-proxied.
To ensure a smooth user experience, the template integrates modern browser APIs. CSS View Transitions keep DOM elements visible during page changes, eliminating the annoying white flash. Additionally, the Speculation Rules API prefetches linked microfrontends into memory, creating a nearly instant transition between Workers, currently limited to Chromium-based browsers.
Cloudflare's internal dashboard exemplifies this model, separating core features from products like Zero Trust. Brayden Wilmoth, a full-stack engineer, highlights the challenges of framework diversity and the frustration of rollbacks due to regressions introduced by a single team.
And this is the part most people miss:
Luca Mezzalira, principal solutions architect at AWS, emphasizes that micro-frontends are about team autonomy and flow, not just code reuse. He suggests that an end-to-end vertical slice is an ideal testing ground for complex tasks like auth and observability, avoiding the chaos of a big-bang migration.
While the architecture offers organizational advantages, it comes with operational trade-offs. A Reddit user pointed out a billing model caveat: adding a Router Worker converts free static asset requests into metered Router requests, potentially increasing costs.
Vercel's success with vertical microfrontends in 2024, reducing preview build times by 40%, showcases the benefits. However, the industry remains divided. While vertical slices are a blessing for large enterprises, smaller teams might question the architectural overhead for fewer than 15 developers.
So, what's your take on this controversial approach?
Do you think the benefits outweigh the challenges, or is it a step too far? Share your thoughts in the comments!
