WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 24, 2021

Destructuring Frontend monoliths with MicroFrontends

Trishul Goel

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.

Pause
Mute Enter Fullscreen
#1 about 2 min

Understanding the frontend monolith problem

How the evolution of JavaScript limits team velocity by creating tightly coupled, large codebases.

#2 about 3 min

Introduction to micro frontend architecture

Restructuring a monolithic application into standalone systems that deploy independently and stitch together dynamically.

#3 about 2 min

Deconstructing an e-commerce platform with micro frontends

Converting pages like the homepage and checkout to run in independent repositories to isolate deployments.

#4 about 4 min

Routing and sharing business logic via the app shell

Managing cross-cutting concerns like login state, tracking, routing, and configurations through a centralized host application.

#5 about 3 min

Enabling cross-frontend communication strategies

Using React props for shared technologies and custom DOM events to support technology-agnostic signaling flows.

#6 about 6 min

Delivering remote modules with Webpack Module Federation

Utilizing Webpack 5 to reference and load uncompiled remote dependencies over the network dynamically.

#7 about 6 min

Live demo of hooking up remote components

Configuring Webpack Module Federation to inject local react states directly into asynchronous remote apps.

#8 about 2 min

Enforcing design consistency across discrete repositories

Creating a centralized UI kit to maintain uniform visual styling and streamline component reuse.

#9 about 4 min

Automating repository setup with templating engines

Scaffolding boilerplate code, CI pipelines, and deployment configs reliably across micro apps using custom template tools.

#10 about 3 min

Refactoring shared code into private NPM packages

Moving static rendering rules and redundant UI operations out of the monolith to reusable internal packages.

#11 about 3 min

Streamlining local development using Docker environments

Connecting a single local micro frontend alongside staged network remotes to avoid cloning the entire ecosystem.

#12 about 10 min

Questions on architecture typing and team organization

Exploring how TypeScript interfaces, centralized tracking flows, and split repositories address common enterprise developer challenges.

Matching moments

3:07 min

Combining micro frontends and the modular monolith pattern

Florian Rappl · WWC 2022

13:09 min

Answering questions on micro-frontend adoption and tooling

Luca Mezzalira Luca Mezzalira · JS Congress

9:16 min

Implementing micro frontends with webpack module federation

Manfred Steyer Manfred Steyer · WWC 2021

1:43 min

Splitting large monolithic frontends for team autonomy

Manfred Steyer Manfred Steyer · WWC 2025

1:26 min

Introduction to micro frontends and platform architecture

Florian Rappl · LIVE

6:44 min

Micro frontends and Webpack module federation challenges

Manfred Steyer Manfred Steyer · WWC 2024

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
over 4 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Paweł Matynia, Bartosz Leczycki

Paweł Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

It’s Alive! Taming the MLOps Franken-Stack: Write, Run, and Serve with Michelangelo

Eric Wang, Paul Zimmerman

Eric Wang
Paul Zimmerman
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare

Related videos

Front-End Micro Apps thumbnail
35:17
LIVE • over 5 years ago

Front-End Micro Apps

Serg Hospodarets

Microfrontends at Scale thumbnail
43:20
WWC 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
WWC 2021 • almost 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios thumbnail
24:47
WWC 2025 • 12 months ago

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

Manfred Steyer

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • over 4 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Micro-Frontends with Module Federation: Beyond the Basics thumbnail
44:35
JS Congress • over 4 years ago

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.