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 · 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
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

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
World Congress 2021 • over 5 years ago

Microfrontends at Scale

Josh Goldberg

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
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
24:47
World Congress 2025 • about 1 year ago

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

Manfred Steyer

Micro-frontends anti-patterns thumbnail
47:05
JS Congress • almost 5 years ago

Micro-frontends anti-patterns

Luca Mezzalira

Micro-Frontends with Module Federation: Beyond the Basics thumbnail
44:35
JS Congress • almost 5 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.