Cloudflare has introduced a groundbreaking Worker template for Vertical Microfrontends (VMFE), revolutionizing the way teams manage their web applications. This innovative architecture empowers independent Cloudflare Workers to handle specific URL paths, offering a seamless single-page application (SPA) experience. By combining Service Bindings and the Speculation Rules API, the template enables decentralized teams to oversee their own stacks and CI/CD pipelines, fostering a more efficient and organized workflow.
The key to this transformation lies in the shift from horizontal component mixing to vertical, path-based ownership. Imagine a team in charge of the /docs route, wielding complete control over the entire vertical stack. They can choose frameworks like Astro or React, manage the CI/CD pipeline, and do so without interfering with other teams handling /marketing or /dashboard routes. This modular approach ensures a harmonious and collaborative development environment.
The technical foundation of this system is a well-designed trio. Service Bindings facilitate direct communication between the Router Worker and sub-application Workers at the edge, minimizing latency by bypassing the public internet. The Router Worker acts as the gatekeeper, directing requests based on path prefixes. Additionally, the HTMLRewriter automatically adjusts HTML responses to resolve pathing issues, such as adding /docs to image sources, which often break when services are reverse-proxied.
To enhance the user experience, the template incorporates two modern browser APIs. CSS View Transitions ensure that DOM elements, like navigation bars, remain visible during page changes, eliminating the 'white flash' typically associated with Multi-Page Applications. Furthermore, the Speculation Rules API is utilized to prefetch linked microfrontends into memory, resulting in nearly instant transitions between physically separate Workers, currently supported in Chromium-based browsers.
Cloudflare's internal dashboard exemplifies the practical application of this model, effectively separating core features from products like Zero Trust. Brayden Wilmoth, a full-stack engineer at Cloudflare, highlights the challenges teams face as they grow, where different frameworks serve varying use cases. He emphasizes that updates to add new features from several teams can lead to frustrating rollbacks due to regressions introduced by a single team.
This vertical approach mirrors a broader shift in software development, as noted by Luca Mezzalira, principal solutions architect at AWS, in a recent InfoQ article. He argues that micro-frontends should be about team autonomy and 'flow' rather than just code reuse. An end-to-end vertical slice serves as an ideal 'proving ground', enabling teams to tackle complex tasks like authentication and observability without the challenges of a 'big bang' migration.
However, this architecture is not without its trade-offs. A Reddit thread discussion points out a caveat related to the billing model for edge-based routing. Adding a Router Worker means every static asset request now incurs a charge, even though the underlying static asset Workers are free. This could potentially convert free, unlimited static requests into metered Router requests for path-based routing.
Vercel, another player in the industry, achieved similar success in late 2024 by adopting a vertical approach, reducing preview build times by 40%. However, they also encountered challenges, such as the complexity of testing these setups locally and the need for manual workarounds for certain features. The industry remains divided on this concept, with vertical slices being a lifesaver for large enterprises, but smaller teams questioning the added architectural 'tax' for their limited developer count.
Author's Note: Steef-Jan Wiggers, the author of this article, has provided an insightful exploration of Cloudflare's VMFE template, shedding light on its potential and challenges. The discussion invites readers to ponder the trade-offs and consider the implications for their own development practices.
