Web-Fragments: incremental micro-frontends migration approach for enterprise

What if you could run micro-frontends like Docker containers inside your monolith? Learn a new approach to safely migrate legacy applications without the drawbacks of iframes.

#1about 3 minutes

Challenges of modernizing and scaling monolithic frontends

Large monolithic applications become outdated and difficult to scale, a problem backend teams solved with microservices and virtualization.

#2about 2 minutes

Introducing Web Fragments for frontend virtualization

Web Fragments provide the missing virtualization layer for micro-frontends, enabling true isolation and incremental migration of monoliths.

#3about 2 minutes

Avoiding fate sharing with isolated micro-frontends

True micro-frontend independence requires avoiding fate sharing, where one team's error can bring down the entire application.

#4about 3 minutes

Demo of migrating a legacy e-commerce application

A client-side rendered React monolith is incrementally migrated by replacing its catalog and cart with server-side rendered fragments.

#5about 4 minutes

How Web Fragments achieve CSS and JavaScript isolation

Web Fragments use Shadow DOM for CSS encapsulation and a hidden "reframed iframe" to create isolated JavaScript execution contexts.

#6about 2 minutes

Improving performance with server-side rendered fragments

Server-side rendered fragments can be displayed and become interactive immediately, even while the legacy application shell is still loading.

#7about 2 minutes

Debugging isolated JavaScript contexts in dev tools

Browser developer tools can target each fragment's isolated JavaScript context, and removing a fragment from the DOM completely unloads its code and memory.

#8about 4 minutes

Overcoming iframe limitations for complex UI patterns

Unlike traditional iframes, Web Fragments can render UI like modal dialogs that break out of their original boundaries without sacrificing isolation.

#9about 1 minute

A summary of the Web Fragments migration workflow

The migration process involves rebuilding a component, deploying it to an endpoint, registering it in a middleware, and adding a custom HTML tag to the host application.

#10about 3 minutes

Comparing Web Fragments to iframes and Module Federation

Web Fragments offer the isolation of iframes without the UI/UX limitations and avoid the fate-sharing and tooling lock-in of Module Federation.

#11about 3 minutes

Project status, roadmap, and future web standards

The project is in production and the roadmap includes dependency reuse, with plans to adopt future web standards like Shadow Realms to replace custom implementations.