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 · World Congress 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 · World Congress 2021

1:43 min

Splitting large monolithic frontends for team autonomy

Manfred Steyer

Manfred Steyer · World Congress 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 · World Congress 2024

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail

almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail

almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail

almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail

almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail

almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail

almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

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

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki

Paweł Matynia

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Outdoor Stage

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham

World Congress 2026 North America

September 25, 2026 · 12:55–13:25

Stage 9

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

Eric Wang, Paul Zimmerman

Eric Wang

Paul Zimmerman

World Congress 2026 North America

September 23, 2026 · 13:00–13:30

Stage 2

Parallelize Your Development with GitHub Copilot

Pamela Fox

Principal Cloud Advocate, Microsoft

Pamela Fox

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

World Congress 2026 North America

September 24, 2026 · 17:30–18:00

Stage 7

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić

Related videos

Front-End Micro Apps thumbnail

LIVE • over 5 years ago

Front-End Micro Apps

Serg Hospodarets

Microfrontends at Scale thumbnail

World Congress 2021 • about 5 years ago

Microfrontends at Scale

Josh Goldberg

Micro Frontends with Module Federation: Why and How? thumbnail

World Congress 2021 • about 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

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

World Congress 2025 • about 1 year ago

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

Manfred Steyer

Micro-frontends anti-patterns thumbnail

JS Congress • almost 5 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Micro-Frontends with Module Federation: Beyond the Basics thumbnail

JS Congress • almost 5 years ago

Micro-Frontends with Module Federation: Beyond the Basics

Manfred Steyer

Related articles

BB

Benedikt Bischof

Web Development Best Practices: What The Data Tells us

Welcome to the new issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Laurie Voss who gave advice about the best practices in web development. What you will l...

over 4 years ago

Web Development Best Practices: What The Data Tells us

CH

Chris Heilmann

Dev Digest 138 - Are you secure about this?

Hello there! This is the 2nd "out of the can" edition of 3 as I am on vacation in Greece eating lovely things on the beach. So, fewer news, but lots of great resources. Many around the topic of sec...

almost 2 years ago

Dev Digest 138 - Are you secure about this?

CH

Chris Heilmann

Dev Digest 120 - Apple and peers

Hello fellow developer, yes, yes, yes, Apple announced a ton of things last week, so much so that you can't escape the announcements, which is why we won't cover them here. Instead, here are some i...

about 2 years ago

Dev Digest 120 - Apple and peers

CH

Chris Heilmann

Dev Digest 104 - Fight for your right to 3rd party

Last Friday's Dev Digest was a spotlight issue covering the problem of Apple's plan to disallow web applications to be added to the homescreen and run as standalone apps. We had an expert round and...

over 2 years ago

Dev Digest 104 - Fight for your right to 3rd party

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Engineer

Berlin, Germany

Expert €80k–140k NestJS ReactJS TypeScript

Junior Frontend Engineer

Berlin, Germany

Starter €60k–75k NestJS ReactJS Backend

18 days ago • Verified

Founding Engineer (Front End)

San Francisco, United States

Expert €180k–220k React Next.js JavaScript

20 days ago • Verified

Staff Frontend Software Engineer

Expert Remote React JavaScript TypeScript

Mid/Senior Full-Stack Engineer (Web-first)

SMG Swiss Marketplace Group

Valbonne, France

Experienced Remote Kotlin Backend ReactJS

about 1 month ago

Senior Design Engineer

San Francisco, CA, United States

Expert $329k HTML Figma Github