Improving Web Application Modularity with Micro-frontends and Module Federation
////////////// 上原
MERGULHE EM TECNOLOGIA_
Kevin Uehara
Frontend Engineer at IFood
Instructor at Alura
Google Developer Expert
2x Microsoft MVP Speaker and Tech Content Creator
ABOUT ME
Contact
Micro Frontends
Agenda
Module Federation
Show me the code
Q&A
alura
Introduction to
Micro Frontends
////////////// 上原
What are Micro Frontends?
Contact
alura
Contact
A large, monolithic, complex web application with slow builds, coupled deployments
Problem
Huge, hard-to-maintain codebase with many teams in the same repo
Rollbacks affect the entire app
alura
A Microfrontend is an architecture approach that breaks the frontend into smaller, functional, and independent fragments, where each fragment is developed and deployed by a separate team.
Contact
alura
Contact
Build Time Sharing - code is shared during the build process — everything is bundled together before deployment.
Build Time Sharing x Runtime Sharing
Runtime Time Sharing - Code is shared after deployment, directly in the browser at runtime.
alura
Contact
alura
Contact
alura
Contact
Independent Delivery
Core ideas behind Micro-Frontends
Be Technology Agnostic
Scalable Architecture
Isolated Codebases
alura
So, I should always use Micro-Frontends, right?
Contact
alura
Like everything in technology... it depends
Contact
alura
Contact
Higher Architectural Complexity - complex build, routing and communication setup
Trade Offs
Higher Initial Costs - more repos, more pipelines, more maintenance, infra
Risk of Over-engineering - Not every project needs MFEs and small teams or apps may suffer more than benefit
Performance Overhead - Multiple bundles increase page load size and requires smart caching and shared dependencies
alura
Module Federation
////////////// 上原
Module Federation is an architectural pattern that allows independently built JavaScript applications to share code and dependencies at runtime. This enables a micro-frontend approach, where large applications can be broken into smaller, independently deployable parts.
Contact
alura
Contact
Large Applications: For large applications, you can break the application into multiple micro-frontends and use Module Federation to share code and resources between them.
Use Cases
Micro-frontend Architecture: Module Federation is an ideal tool for building micro-frontend architectures.
Multi-team Development: Module Federation can assist multiple teams in collaboratively developing large applications.
alura
Contact
History of Module Federation
2014
WebPack was released
2018
Webpack 4.20 was released, introducing module hooks, which laid the foundation for the development of Module Federation
2019
Webpack 5 was released, officially introducing the Module Federation feature.
2024
Module Federation v2.0 was released with more features and including rspack as option of build tool
alura
Contact
https://module-federation.io/index.html
alura
Now
Show me the code!
////////////// 上原
Contact
We'll use Rspack to create our project
What are we going to create?
Create a Micro-frontend (remote and host)
Run both applications
Live Demo Project
alura
Contact
alura
Contact
Project Structure
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Contact
alura
Thank you so much!
Stay well, always!
////////////// 上原
Social Medias
Let's connect, tag me and give feedback on the talk!
POINT THE CAMERA
Q&A
Do you have any questions or curiosity? Let's talk about it!
ASK AS YOU WANT