> Markdown version of [/videos/130-front-end-micro-apps?t=1152](https://www.wearedevelopers.com/videos/130-front-end-micro-apps?t=1152). 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).

---

# Front-End Micro Apps

Is your frontend monolith causing deployment bottlenecks? Discover how Webpack 5 Module Federation lets your team inject autonomous, framework-agnostic micro apps without breaking the shared user experience.

- **Speakers:** Serg Hospodarets
- **Event:** WeAreDevelopers LIVE
- **Published:** March 25, 2021
- **Duration:** 35:17
- **URL:** https://www.wearedevelopers.com/videos/130-front-end-micro-apps

## Summary

Modern frontend applications eventually hit a scalability ceiling as organizations grow. Teams working on distinct sets of features—such as user subscriptions, social integrations, or media controls—become entangled in monolithic codebases, resulting in slow developer onboarding and fragile delivery pipelines. Following Conway's Law, frontend architecture must evolve to mirror organizational structure. While backend infrastructure successfully adopted loosely coupled microservices, the frontend ecosystem has historically lagged, remaining tightly bundled and prone to release bottlenecks.

To solve this, engineering organizations are adopting frontend micro apps utilizing Webpack 5 Module Federation. This framework-agnostic approach allows developers to dynamically inject autonomous runtime modules—such as authentication flows or image galleries—directly into a parent shell application. Because it leverages native ECMAScript dynamic imports, teams can manage separate code repositories and deployment life cycles without requiring a rigid, unified build step. This architecture effectively scales to design systems, enabling teams to consume UI elements directly via URL imports rather than relying on traditional artifact publishing.

Successfully mapping micro frontends to organizational scale requires strict technical boundaries and team alignment. Organizations must designate platform teams to enforce single, exact versions of core dependencies like React or Angular to prevent catastrophic version clashes in the browser. To maintain decoupling, micro applications should never communicate directly with other micro applications; instead, they should rely on the shell application for highly restricted shared state and global providers, such as global notification modals. Crucially, this architecture introduces new vectors for systemic failure. Developers must implement global error boundaries to prevent one faulty module from crashing the entire shell and strictly isolate third-party scripts from micro apps, as they inherently possess full DOM access. Ultimately, micro apps are an organizational tool; if a feature does not necessitate independent team ownership or separate deployment cadences, a standard UI component remains the superior choice.

**Keywords:** webpack module federation, frontend micro apps, micro frontend architecture, shell application patterns, dynamic module imports, monolithic frontend decomposition, cross-origin resource sharing, conway's law software design, global error boundaries, runtime component loading, design system url deployment, ecmascript dynamic imports, frontend scalability challenges, dependency version management, cross-team release pipelines

## Chapters

1. **Scaling team structures alongside product complexity** (00:00) — Scaling monolithic codebases slows developer onboarding, necessitating independent parallel teams to restore overall feature delivery velocity.
1. **Evolving architectures from backend microservices to micro frontends** (06:11) — Standardizing decoupled deployment strategies at the backend layer eventually requires integrating unified modular boundaries across frontend interfaces.
1. **Enabling framework-agnostic modularity with Webpack module federation** (09:26) — Webpack module federation safely leverages standard ECMAScript dynamic imports to seamlessly stitch separate remote framework builds together at runtime.
1. **Integrating remote entry points in frontend shell applications** (13:05) — Connecting a highly isolated image component directly to a standalone environment demonstrates how live external views render seamlessly.
1. **Distinguishing micro applications for targeted separation of concerns** (16:12) — Isolating transactional flows into micro applications ensures functional domains iterate iteratively without breaking unrelated global layout assets.
1. **Sharing core dependencies for performance and team autonomy** (19:12) — Propagating shared libraries downward from application hosts enhances baseline rendering speed while simultaneously preserving independent engineering agility.
1. **Combining disparate application interfaces into unified shell portfolios** (22:21) — Routing massively sprawling web properties through one unified container intelligently coordinates disparate feature teams directly under a singular domain.
1. **Standardizing platform deployments and strict dependency versioning** (24:57) — Empowering cross-functional platform guilds to actively mandate foundational dependency rules prevents destructive overlapping collisions before isolated builds ship.
1. **Configuring cross-origin security and limiting third-party script access** (27:01) — Restricting remote bundles from indiscriminately navigating parent object models defends overarching architecture layouts from severe downstream vulnerabilities.
1. **Implementing error boundaries and routing centralized shell notifications** (29:29) — Wrapping imported application components manually inside isolated system barriers ensures internal execution crashes cannot abruptly terminate the centralized user experience.
1. **Evaluating technical trade-offs between standard components and micro applications** (31:39) — Verifying asynchronous business delivery patterns determines whether sprawling decentralized execution frameworks are justifiable over simplified standard component trees.

## Related Moments

- [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?")
- [Introduction to micro frontend architecture](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Implementing micro frontends with webpack module federation](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [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")
- [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")
- [Implementing application frontends with modular service architectures](https://www.wearedevelopers.com/videos/200-agile-work-at-cariad-creating-a-customer-web-application-for-controlling-the-vehicle) (from "Agile work at CARIAD – Creating a customer web application for controlling the vehicle ")

## Related Articles

- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [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)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [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**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [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**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub**