Large monolithic applications become outdated and difficult to scale, a problem backend teams solved with microservices and virtualization.
Web Fragments provide the missing virtualization layer for micro-frontends, enabling true isolation and incremental migration of monoliths.
True micro-frontend independence requires avoiding fate sharing, where one team's error can bring down the entire application.
A client-side rendered React monolith is incrementally migrated by replacing its catalog and cart with server-side rendered fragments.
Web Fragments use Shadow DOM for CSS encapsulation and a hidden "reframed iframe" to create isolated JavaScript execution contexts.
Server-side rendered fragments can be displayed and become interactive immediately, even while the legacy application shell is still loading.
Browser developer tools can target each fragment's isolated JavaScript context, and removing a fragment from the DOM completely unloads its code and memory.
Unlike traditional iframes, Web Fragments can render UI like modal dialogs that break out of their original boundaries without sacrificing isolation.
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.
Web Fragments offer the isolation of iframes without the UI/UX limitations and avoid the fate-sharing and tooling lock-in of Module Federation.
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.
Hubert Burda Media
München, Germany
Sensory-Minds GmbH
Offenbach am Main, Germany
24:47Manfred Steyer
59:03Florian Rappl
43:20Josh Goldberg
54:39Alexander Günsche
45:40Manfred Steyer
29:36Manfred Steyer
35:17Serg Hospodarets
41:49Trishul Goel
Jobs that call for the skills explored in this talk.
Frontier Resourcing
Cardiff, United Kingdom
Logicc
Hamburg, Germany