> Markdown version of [/videos/318-destructuring-frontend-monoliths-with-microfrontends?t=120](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends?t=120). 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).

---

# Destructuring Frontend monoliths with MicroFrontends

Are tight dependencies and massive frontend monoliths blocking your deployment pipelines? Learn how micro frontends and webpack module federation empower teams to build and ship independently.

- **Speakers:** Trishul Goel
- **Event:** JavaScript Congress
- **Published:** November 24, 2021
- **Duration:** 41:49
- **URL:** https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends

## Summary

Frontend applications frequently expand into monolithic codebases, creating tight team dependencies, massive repository bloat, and blocked deployment pipelines. Transitioning to a micro frontend architecture resolves these systemic bottlenecks by decomposing the frontend into self-contained, independently deployable micro apps unified by a centralized "App Shell." This architectural shift mirrors backend microservices, allowing domain-specific engineering teams to develop, test, and release features asynchronously without jeopardizing the stability of the broader application.

To effectively stitch these isolated applications together, organizations can leverage webpack 5 module federation, which enables an App Shell host to dynamically request remote JavaScript modules at runtime. The App Shell serves as the core orchestrator, standardizing centralized routing, user authentication state, and analytics tracking while enforcing predictable, unidirectional data flow to the micro apps. When micro frontends share the same tech stack, communication happens seamlessly via standard component props; when bridging different frameworks, native custom DOM events provide a robust, framework-agnostic channel for sending signals back to the host.

Adopting this distributed paradigm introduces its own operational challenges, requiring thoughtful developer experience and governance strategies. Centralizing shared UI components into a dedicated design system maintains cross-app visual consistency, while shifting static utility functions into shared npm packages avoids logic duplication. To combat configuration fatigue, teams can utilize scaffolding engines to instantly generate compliant repositories with standardized CI/CD pipelines and Docker configurations. Ultimately, providing a streamlined local development loop—where engineers spin up a single local micro frontend against a containerized staging environment—preserves the deployment velocity and autonomy that makes micro frontends valuable in the first place.

**Keywords:** frontend monoliths, micro frontend architecture, webpack 5 module federation, app shell pattern, unidirectional data flow, inter-app communication, custom dom events, cross-framework communication, design system centralization, frontend repository scaffolding, templating engines, local developer experience, dockerized staging environments, multi-repo strategy, domain-driven team autonomy, ci/cd pipeline standardization

## Chapters

1. **Understanding the frontend monolith problem** (00:00) — How the evolution of JavaScript limits team velocity by creating tightly coupled, large codebases.
1. **Introduction to micro frontend architecture** (02:00) — Restructuring a monolithic application into standalone systems that deploy independently and stitch together dynamically.
1. **Deconstructing an e-commerce platform with micro frontends** (04:07) — Converting pages like the homepage and checkout to run in independent repositories to isolate deployments.
1. **Routing and sharing business logic via the app shell** (05:36) — Managing cross-cutting concerns like login state, tracking, routing, and configurations through a centralized host application.
1. **Enabling cross-frontend communication strategies** (08:41) — Using React props for shared technologies and custom DOM events to support technology-agnostic signaling flows.
1. **Delivering remote modules with Webpack Module Federation** (11:05) — Utilizing Webpack 5 to reference and load uncompiled remote dependencies over the network dynamically.
1. **Live demo of hooking up remote components** (16:20) — Configuring Webpack Module Federation to inject local react states directly into asynchronous remote apps.
1. **Enforcing design consistency across discrete repositories** (21:35) — Creating a centralized UI kit to maintain uniform visual styling and streamline component reuse.
1. **Automating repository setup with templating engines** (23:30) — Scaffolding boilerplate code, CI pipelines, and deployment configs reliably across micro apps using custom template tools.
1. **Refactoring shared code into private NPM packages** (27:04) — Moving static rendering rules and redundant UI operations out of the monolith to reusable internal packages.
1. **Streamlining local development using Docker environments** (29:36) — Connecting a single local micro frontend alongside staged network remotes to avoid cloning the entire ecosystem.
1. **Questions on architecture typing and team organization** (32:02) — Exploring how TypeScript interfaces, centralized tracking flows, and split repositories address common enterprise developer challenges.

## Related Moments

- [Combining micro frontends and the modular monolith pattern](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way) (from "Stairway to Heaven - Scaling Frontends the Right Way")
- [Answering questions on micro-frontend adoption and tooling](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [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?")
- [Splitting large monolithic frontends for team autonomy](https://www.wearedevelopers.com/videos/1677-advanced-micro-frontends-multi-version-and-multi-framework-scenarios) (from "Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios")
- [Introduction to micro frontends and platform architecture](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) (from "Multiple Ships to the Island - Micro Frontends & Island Architectures")
- [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")

## 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)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [Dev Digest 104 - Fight for your right to 3rd party](https://www.wearedevelopers.com/magazine/390-dev-digest-104-fight-for-your-right-to-3rd-party)

## 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**
- [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**
- [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub**