Cloudflare has recently unveiled a Worker template for Vertical Microfrontends (VMFE), a groundbreaking architecture that revolutionizes how independent Cloudflare Workers are mapped to specific URL paths on a single domain. This innovative approach, detailed in the link https://dash.cloudflare.com/?to=/:account/workers-and-pages/create?type=vmfe, brings together Service Bindings and the Speculation Rules API, enabling decentralized teams to manage their own stacks and CI/CD pipelines while maintaining the seamless, single-page application (SPA) experience. The key to this lies in the shift from horizontal component mixing to vertical, path-based ownership, where teams can control the entire vertical stack, from choosing frameworks like Astro or React to handling the entire CI/CD pipeline, all without interfering with other teams managing different routes like /marketing or /dashboard.
The technical foundation of this architecture is threefold. Service Bindings facilitate direct communication between the Router Worker and sub-application Workers at the edge, minimizing latency by avoiding the public internet. The Router Worker acts as the front door, directing requests based on path prefixes. Lastly, the HTMLRewriter automatically adjusts HTML responses to fix pathing issues, such as adding '/docs' to image sources, which often break when services are reverse-proxied. To ensure a smooth user experience, the template incorporates two modern browser APIs: CSS View Transitions, which keeps DOM elements visible during page changes, and the Speculation Rules API, which prefetches linked microfrontends into memory, making transitions between physically separate Workers nearly instant. Cloudflare's internal dashboard already utilizes this model to separate core features from products like Zero Trust, as highlighted by Brayden Wilmoth, a full-stack engineer at Cloudflare.
This move towards verticality reflects a broader shift in software development, emphasizing team autonomy and 'flow' over code reuse, as noted by Luca Mezzalira, principal solutions architect at AWS, in the InfoQ article https://www.infoq.com/articles/adopt-micro-frontends/. Vertical slices serve as an ideal proving ground, allowing teams to tackle complex issues like auth and observability without the challenges of a 'big bang' migration. However, this architecture comes with its own set of operational trade-offs. A Reddit thread https://www.reddit.com/r/CloudFlare/comments/1qr8bzr/buildingverticalmicrofrontendsoncloudflares/ highlights a caveat involving the billing model for edge-based routing, where adding a Router Worker can convert free static asset requests into metered Router requests, potentially increasing costs. Additionally, while Vercel achieved significant improvements in preview build times by adopting a vertical approach, they also encountered challenges with local testing and manual workarounds for certain features. The industry remains divided on this concept, with vertical slices being a lifesaver for large enterprises but potentially unnecessary for smaller teams with fewer than 15 developers.
