Hi, I am Trishul
🤖
👨💻
@trishulgoel
Destructuring Frontend monoliths with MicroFrontends
@trishulgoel
Monoliths
@trishulgoel
Monolithic application is designed to be self-contained; components of the program are interconnected and interdependent
@trishulgoel
@trishulgoel
https://en.wikipedia.org/wiki/Model–view–controller
@trishulgoel
https://microservices.io/patterns/microservices.html
@trishulgoel
Frontend Monolith
@trishulgoel
All the code in a single place
Increased inter-team dependency
Slow development to deploy cycle
Increasing size of repo everyday
Only as strong as weakest link
@trishulgoel
MICROFRONTENDS
@trishulgoel
Microfrontend architecture is a design pattern where a monolithic Frontend app is destructured into small independent(?) apps. These micro apps are stitched together as a single page on the fly.
@trishulgoel
Standalone system
Independent Repository
Independent CI Pipelines
Independent Deployments
Parallel development cycle
@trishulgoel
ARCHITECTURE
@trishulgoel
Remote 1
HOST
Remote 2
Remote 3
@trishulgoel
HEADER
FOOTER
Home Page
Product Listing
Page
Product Details
Page
Payments
and
Checkout
Cart
MicroFrontend
Appshell / Host
@trishulgoel
Appshell
Shared business Logic
Login
Tracking
System config
Routing
@trishulgoel
COMMUNICATION
Same tech stack
Share via props
Different tech stack
Custom DOM events
@trishulgoel
Custom DOM Events
@trishulgoel
HOW?
@trishulgoel
Some Traditional Approaches
Node modules
IFrames
@trishulgoel
MODULE FEDERATION
@trishulgoel
Remote 1
Remote 2
Remote 3
HOST
@trishulgoel
Main.jsx
@trishulgoel
Remote config
@trishulgoel
Host config
@trishulgoel
Host App
@trishulgoel
DEMO TIME
@trishulgoel
CHALLENGES
@trishulgoel
Decoupling the huge Codebase
@trishulgoel
DESIGN CONSISTENCY
@trishulgoel
SHARED FUNCTIONAL LOGIC
@trishulgoel
NPM PACKAGES
BUS FACTOR
@trishulgoel
Document Driven Development
Initializing new MicroFrontend
Templating engine
Tenpureto
@trishulgoel
@trishulgoel
An efficient developer experience
THANK YOU
@trishulgoel
REFERENCES
-
https://webpack.js.org/concepts/module-federation/
-
https://github.com/module-federation/module-federation-examples