Web Fragments: A radically new architecture to build micro-frontends

Overview | The Goal | Getting started | More Resources

Overview

Web Fragments are a radically new approach to Web micro-frontends which is framework, tooling, and platform agnostic.

New to micro-frontends? Check out https://microfrontend.dev

[!NOTE] The project is in beta, but is already being used in production by teams at Cloudflare. We are looking for teams and companies interested in providing early feedback that can help us shape the feature set and APIs.

The goal

The main goal of Web Fragments is to enable teams operating enterprise web frontends so they can:

1. Modernize and re-platform their apps using an incremental migration approach that is low risk and allows product owners to prioritize the most valuable parts of the frontend.
2. Scale large web frontends via decentralization and decomposition of monolithic web frontends into independently developed and released micro-frontends, that still form a cohesive user experience.

What's radically different about Web Fragments?

Unlike other micro-frontend technologies, Web Fragments focuses on isolating individual micro-frontends from each other by executing their client-side JavaScript in separate JavaScript context, while enabling them to share the same DOM document, browser navigation and history.

Just like Docker enables containerization of applications, Web Fragments enable containerization of web frontends on the client-side, and by extension also on the server-side.

This JavaScript execution context isolation and low-overhead virtualization enables large monolithic web frontends to be broken up into smaller, independently developed and released web applications, that in production are composed into a single cohesive UI. In this way Web Fragments enable scaling and incremental modernization of the frontend tech stack.

Getting started

The best way to learn more is going to our official documentation.

You can also check out the demos present in this repository where you can find examples e2e/pierced-react/README.md for platforms supporting Web Fetch API like Cloudflare or Netlify, or e2e/node-servers/README.md for platforms supporting Node.js runtimes.

More resources

We blogged about the philosophy of our approach and published some early research on the Cloudflare blog. You can check out a post introducing the previous generation of Web Fragments: https://blog.cloudflare.com/better-micro-frontends.

We also blogged about how Web Fragments can enable incremental adoption of micro-frontends: https://blog.cloudflare.com/fragment-piercing

Incremental adoption of micro-frontends with Cloudflare Workers

Large frontend applications are often hard to improve without major investments. With Cloudflare Workers, our fragment-based micro-frontend architecture, and fragment piercing technique, engineering teams can incrementally improve large frontends in a fraction of the time, yielding significant user and developer experience gains.

This research and development is sponsored by Cloudflare: