Trishul Goel
Destructuring Frontend monoliths with MicroFrontends
#1about 2 minutes
Understanding the problems of frontend monoliths
Frontend monoliths suffer from increasing code complexity, inter-team dependencies, and slow development cycles.
#2about 2 minutes
Introducing the micro-frontend architectural pattern
Micro-frontends break a large application into smaller, independent, and separately deployable apps to enable parallel development.
#3about 2 minutes
Structuring an e-commerce site with micro-frontends
An e-commerce application can be structured with a central "App Shell" that consumes different pages, like homepage or cart, as individual micro-frontends.
#4about 3 minutes
Using an App Shell to manage shared business logic
The App Shell centralizes shared functionalities like login state, user data, tracking, system configuration, and routing to avoid code duplication.
#5about 3 minutes
Choosing a communication pattern between components
Communication can be handled via props when using the same tech stack or through technology-agnostic custom DOM events for different stacks.
#6about 5 minutes
Using Webpack 5 Module Federation for implementation
Webpack's Module Federation allows a host application to reference and load remote modules that are not available at compile time.
#7about 5 minutes
Live demo of a host consuming a remote component
A practical demonstration shows a host application dynamically loading a remote component and passing its local state as props.
#8about 2 minutes
Solving design inconsistency with a shared UI kit
A centralized UI kit provides a collection of reusable components to ensure design consistency across all micro-frontends.
#9about 4 minutes
Automating new micro-frontend setup with templates
A templating engine automates the creation of new micro-frontends, including all necessary configuration for CI/CD, Docker, and Kubernetes.
#10about 3 minutes
Strategies for decoupling code from the monolith
Gradually migrate from a monolith by extracting UI components into a design system and moving shared static logic into internal NPM packages.
#11about 2 minutes
Building an efficient local development environment
A Docker-based setup allows developers to run the App Shell with remote micro-frontends from a staging environment while running only their target micro-frontend locally.
#12about 2 minutes
Q&A: Sharing types between host and remotes
Types are shared between the host and micro-frontends using a dedicated NPM package that exports all necessary TypeScript interfaces.
#13about 2 minutes
Q&A: Managing UI kit versions and dependencies
Micro-frontends can either fall back to the UI kit version shared by the App Shell or bundle their own newer version if needed.
#14about 3 minutes
Q&A: Performance comparison and data integrity
Performance is comparable to code-splitting in a monolith, and data integrity is maintained through a strict unidirectional data flow from the App Shell.
#15about 3 minutes
Q&A: Monorepos vs separate repositories for teams
Separate repositories were chosen over monorepo tools to grant teams more autonomy, control over their processes, and a clear sense of ownership.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
Front-End Micro Apps
Serg Hospodarets
Microfrontends at Scale
Josh Goldberg
Stairway to Heaven - Scaling Frontends the Right Way
Florian Rappl
Micro-Frontends with Module Federation: Beyond the Basics
Manfred Steyer
Micro Frontends with Module Federation: Why and How?
Manfred Steyer
Independently together: how micro-applications improve developer experience + app performance
Bilal Cinarli
The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular
Manfred Steyer
Micro-frontends anti-patterns
Luca Mezzalira
From learning to earning
Jobs that call for the skills explored in this talk.





