Web Fragments Documentation

Web Fragments is a framework, tooling, and platform-agnostic architecture for building micro-frontends. It provides a way to containerize web frontends on both the client-side and server-side, similar to how Docker containerizes applications.

Key features include:

• Isolation: Micro-frontends are isolated from each other by executing their client-side JavaScript in separate JavaScript contexts.
• Cohesion: Despite execution isolation, fragments share the same DOM document, browser navigation, and history, allowing them to form a single, cohesive user experience.
• Scalability: Enables decomposing monolithic frontends into independently developed and released micro-frontends.
• Incremental Modernization: Supports low-risk, incremental migration and re-platforming of existing applications.

Piercing (also known as eager-rendering) is the capability of Web Fragments to inline the fragment response directly into the initial HTML stream of a Single Page Application (SPA) during the client's initial request.

This technique is used to improve user experience by reducing Largest Contentful Paint (LCP) and allowing users to interact with fragment portions of the application much sooner.

Reframing is a core architectural feature of Web Fragments that provides isolation and encapsulation for applications running as fragments. It uses a JavaScript and DOM virtualization technique to prevent JavaScript collisions between different fragments and between a fragment and the host application.

Key benefits include:

• Isolation: Each fragment runs in its own clean JavaScript context.
• Encapsulation: DOM operations are scoped to the fragment's Shadow DOM.
• Automatic Cleanup: When a Web Fragment is destroyed, its associated JavaScript context is also destroyed, automatically freeing up data memory (objects), loaded code, the module registry, timers, and event listeners.

Web Fragments operate in a virtualized environment that provides access to the viewport, navigation, and history while remaining isolated from the host application.

Key encapsulation features:

• DOM Isolation: The fragment's DOM is encapsulated within a Shadow Root to prevent style collisions.
• JavaScript Isolation: A dedicated JavaScript context (e.g., wf:fragment-id) is created for the fragment, backed by a hidden iframe. This ensures scripts run in an isolated environment.
• Lifecycle Management: When the <web-fragment> element is removed from the document, the associated JavaScript context, memory, handlers, and scheduled tasks are automatically released.

Web Fragments uses a gateway middleware to manage requests.

1. All requests initiated from the fragment's DOM or JavaScript are intercepted by the fragment gateway middleware.
2. The middleware identifies requests originating from a specific fragment by checking the routePattern defined in that fragment's registration configuration.
3. The middleware then reroutes asset requests to the correct fragment endpoint.

For detailed implementation, see the gateway documentation.