> Markdown version of [/videos/1677-advanced-micro-frontends-multi-version-and-multi-framework-scenarios](https://www.wearedevelopers.com/videos/1677-advanced-micro-frontends-multi-version-and-multi-framework-scenarios). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

True frontend autonomy requires mastering the chaos of conflicting frameworks. Discover how combining Module Federation with Web Components resolves multi-version mismatches without sacrificing developer velocity.

- **Speakers:** [Manfred Steyer](https://www.wearedevelopers.com/@manfred-steyer)
- **Event:** World Congress 2025
- **Published:** August 20, 2025
- **Duration:** 24:47
- **URL:** https://www.wearedevelopers.com/videos/1677-advanced-micro-frontends-multi-version-and-multi-framework-scenarios

## Summary

Micro frontends restore "the agility of a small team" to massive software systems by enabling independent development, deployment, and team autonomy. However, integrating these disparate frontends into a cohesive user shell at runtime introduces substantial architectural complexity, especially when historical mergers or gradual tech stack migrations result in a mix of multiple framework versions. Module Federation—whether through Webpack, Rspack, or esbuild-driven Native Federation—solves the baseline integration challenge by allowing a host application to dynamically load remote modules it did not know at compile time.

To handle conflicting toolchains or version mismatches, developers can wrap entire single-page applications into coarse-grained Web Components. This abstraction hides underlying framework details, allowing the shell to dynamically render Custom Elements. When combined with Federation, this approach offers the best of both worlds: shared dependencies are downloaded only once if versions match, while isolated instances are safely provisioned for conflicting versions. Implementing this architecture requires crucial workarounds, most notably scoping single-page application routers so they only monitor designated URL segments rather than assuming total control over the browser's address bar.

While engineering teams can avoid multi-version chaos through governed monorepos or monolithic architectures enforced by dependency linting tools like Nx, these alternatives trade away a degree of team autonomy. Ultimately, succeeding with a deeply decoupled micro frontend architecture introduces a specific organizational cost: the creation of a dedicated platform team. By stepping outside of default architectures, companies must invest in a small group to provide the necessary workarounds, helper functions, and integration guidelines that enable primary stream-aligned teams to focus entirely on delivering business value.

**Keywords:** micro frontends runtime integration, module federation configuration, native federation esbuild, rspack architecture, multi-version framework alignment, web components encapsulation, custom elements declaration, angular elements wrapper, lazy loading remote modules, spa routing conflicts, url segment scoping, platform team topology, stream-aligned teams, monorepo architectural trade-offs, nx dependency linting, gradual stack migration

## Chapters

1. **Splitting large monolithic frontends for team autonomy** (00:05) — Micro frontends preserve the agility of small teams by allowing independent development and deployment.
1. **Integrating independent applications using runtime module federation** (01:49) — Module federation allows a shell application to load unknown remote applications mapping URLs at runtime.
1. **Supporting framework-independent builds with rspack and native federation** (03:14) — Module federation has been ported to rspack and native esbuild to support framework independence and dependency sharing.
1. **Managing framework churn and version mismatches across independent teams** (04:56) — Incremental migrations and separate minor versions can introduce application crashes due to internal private API mismatching.
1. **Abstracting framework implementations behind native web components** (09:31) — Wrapping single-page applications inside native web components standardizes their bootstrapping and teardown processes within the shell.
1. **Combining web components with runtime module federation** (14:23) — Creating coarse-grained components loaded dynamically via federation balances shared standard libraries with isolated version dependencies.
1. **Demonstrating multi-version routing and application state conflicts** (15:25) — A sample dashboard reveals challenges in runtime isolation, particularly restricting global routers to specific URL segments.
1. **Evaluating architectural alternatives to multi-framework micro frontends** (19:14) — Trading team autonomy for stability can be achieved by utilizing monorepos, monoliths with strict linting boundaries, or iframes.
1. **Sustaining micro frontend infrastructure with dedicated platform teams** (21:39) — Complex micro frontend architectures necessitate small centralized platform teams that provide guidelines, helpers, and integration workarounds.
1. **Summary of web components and module federation capabilities** (23:13) — Combining standard web components with module federation provides a robust mechanism for integrating diverse technological stacks.

## Related Moments

- [Micro frontends and Webpack module federation challenges](https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular) (from "Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular")
- [Answering questions on micro-frontend adoption and tooling](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [Overcoming team scaling challenges with module federation](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics) (from "Micro-Frontends with Module Federation: Beyond the Basics")
- [Transitioning monolithic page structures to distributed front-end architectures](https://www.wearedevelopers.com/videos/1012-micro-frontends-discovery) (from "Micro-Frontends Discovery")
- [Introduction to micro frontend architecture](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Introduction to micro frontends and architectural consequences](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")

## Related Articles

- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [The Best 7 Frontend Frameworks for Developers in 2025](https://www.wearedevelopers.com/magazine/400-the-best-7-frontend-frameworks-for-developers-in-2025)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**