> Markdown version of [/videos/165-micro-frontends-with-module-federation-why-and-how?t=2597](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how?t=2597). 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).

---

# Micro Frontends with Module Federation: Why and How?

Are massive frontend monoliths slowing your development teams down? Discover how Webpack 5's Module Federation dynamically orchestrates micro frontends without the heavy overhead of custom meta-frameworks.

- **Speakers:** [Manfred Steyer](https://www.wearedevelopers.com/@manfred-steyer)
- **Event:** World Congress 2021
- **Published:** August 29, 2021
- **Duration:** 45:40
- **URL:** https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how

## Summary

Large-scale enterprise applications often struggle to maintain agility as development teams and business domains grow. To scale team productivity and prevent architectural tangling, organizations increasingly adopt micro frontends. This architectural style splits massive monoliths into smaller, domain-specific applications that can be developed, deployed, and maintained in isolation while still offering an integrated user experience. However, traditional orchestration methods like iframes or custom meta-frameworks introduce massive overhead and historically struggle with optimizing shared runtime dependencies.

Webpack 5's Module Federation provides a native, straightforward solution to orchestrate these distributed applications dynamically. By introducing a host-and-remote configuration model, Module Federation allows an application shell to load separately compiled and deployed UI chunks on demand. This approach seamlessly leverages standard dynamic imports, bypassing the need for a proprietary overarching meta-framework. Development teams can fine-tune their Webpack configurations to explicitly declare exposed modules and shared dependencies, gracefully handling framework version mismatches while heavily optimizing runtime bundle sizes.

Implementing this in strictly abstracted environments, such as the Angular CLI, requires specific build plugins to access and modify the underlying Webpack functionality. Once seamlessly configured, teams can utilize static or dynamic federation, where remote application mappings are fetched at runtime via backend APIs for maximum routing flexibility. While it is technically possible to mix diverse frameworks like React, Vue, and Angular using web component wrappers, this drastically increases complexity and should be treated cautiously as a modernization tool rather than a default state. Ultimately, "there is not an option like the best option, it's always about consequences in your very situation." Micro frontends shine when scaling massive organizational teams, but they deliberately shift application boundaries from compile-time to runtime, demanding robust integration testing to prevent isolated errors from breaking the shared user interface.

**Keywords:** micro frontends, webpack module federation, software architecture scaling, dynamic lazy loading, runtime dependency sharing, angular CLI build plugins, host and remote configuration, monorepo domain structuring, dynamic federation mapping, framework version mismatches, web components encapsulation, bundle size optimization, legacy framework modernization, application shell orchestration, distributed team scaling

## Chapters

1. **Introduction to micro frontends and architectural consequences** (00:02) — Evaluating consequences over absolute best practices helps determine if scaling with independent teams justifies the complexity of an application shell.
1. **Why companies scale application development with micro frontends** (03:58) — Case studies reveal that isolating business domains and scaling teams are the primary drivers for splitting large codebases.
1. **Implementing micro frontends with webpack module federation** (14:40) — Decoupling the compilation process with webpack plugins enables host applications to load separate remote bundles on demand without upfront knowledge.
1. **Live coding a static module federation architecture** (23:57) — Extending angular compilation with a custom builder adds the necessary configuration for mapping remotes and sharing dependencies.
1. **Fetching remotes at runtime with dynamic federation** (34:40) — Defining remote paths using runtime variables instead of static maps allows backend services to control available frontend integrations.
1. **Mixing framework versions using web components and federation** (36:49) — Combining web components with module federation allows developers to mix incompatible frameworks safely inside a single browser window.
1. **Reviewing tradeoffs and testing risks of micro frontends** (41:06) — Shifting build-time dependencies to runtime requires rigorous integration testing to catch version mismatches before production.
1. **Q&A on source code sharing and library coupling** (43:17) — Applying version mismatch strategies manages the inherent tradeoff between isolated module safety and shared application bundle size.

## 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")
- [Enabling framework-agnostic modularity with Webpack module federation](https://www.wearedevelopers.com/videos/130-front-end-micro-apps) (from "Front-End Micro Apps")
- [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")
- [Summarizing module federation patterns and architectural choices](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics) (from "Micro-Frontends with Module Federation: Beyond the Basics")
- [Delivering remote modules with Webpack Module Federation](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")

## 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)
- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)

## Related Jobs

- [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**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [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**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**