Micro frontends
CONTENTS
Frontend Monolith
Micro frontends
Domain Driven Design (DDD)
Native Module federation 🚀
Communication micro frontends�
Peter Eijgermans
@EijgermansPeter
Monolith - big ball of Mud
Database
Application
Frontend layer
Backend layer
Database layer
Database
Frontend Monolith
the Frontend
DB
DB
DB
DB
DB
DB
DB
Backend
Microservices
Micro frontends �are born!
Short definition Micro frontends
“An architectural style where independently deliverable frontend applications are composed into a greater whole”
Micro frontends as Verticals
Team A
F
Team A
E
D
B
B
C
DB
DB
DB
DB
DB
DB
DB
B
C
F
D
E
Frontend
Backend
Host / Container / Shell
Why micro frontends?
Incremental Upgrades
Simple Codebases
Independent Deployment
Autonomous Teams
Tech Agnostic
Modularity
Reusability
But…
How to define my Verticals?
Use DDD !
Domain Driven Design
Why DDD for Micro frontends?
Alignment Business capabilities
Shared understanding
Clearer Boundaries
Modular design
Continuous Evolution
How to apply DDD?
Event booking platform !
Identify subdomains
Event
Event detail
Planning
Reservation
Invoice
Payment
Event
Booking
Event
Customer
Ticket
account
account detail
Event detail
Query events
Identify subdomains
Event
Event detail
Planning
Reservation
Invoice
Payment
Event
Booking
Event
Customer
Ticket
account
account detail
Event detail
Query events
Identify subdomains
Event
Event detail
Planning
Reservation
Invoice
Payment
Event
Booking
Event
Customer
Ticket
account
account detail
Event detail
Query events
Define Bounded Contexts
Event
Event detail
Planning
Reservation
Invoice
Payment
Event
Booking
Event
Customer
Ticket
account
account detail
Reservation
Booking
Account
Query events
Event
Bounded Contexts as Micro frontends
Event
Account
Reser
vation
Booking
Frontend
Backend
Host / Container
Event
Booking
Account
DB
Reser
vation
DB
DB
DB
Bounded Contexts as Micro frontends
Event
Account
Reser
vation
Booking
Frontend
Backend
Host / Container
Event
Booking
Account
DB
Reser
vation
DB
DB
DB
Micro-frontend Outdoor Events
Container
BrowserRouter - Shared component
Micro-frontend Search Event
Micro-frontend Reservation
Container
BrowserRouter - Shared component
How to develop this
Micro frontend?
Module �Federation
What is Module Federation?
Loads remote modules (MF) at runtime
Allows sharing dependencies
Modules Lazy loaded
Runtime code sharing
Module Federation options
Native Federation 🚀🚀
🚀
How?
Roles?
Host / Container / Shell
remotes: {
outdoorevents:"outdoorevents@http://...”
reservation: "reservation@http://..”
}
Micro frontend 1
name:"outdoorevents",
exposes: {
./OutdoorEvents.tsx
}
Micro frontend 2
name:"reservation",
exposes: {
./OutdoorEvent.tsx
}
Host / Container / Shell
remotes: { reservation:”reservation@http://./remoteEntry.js”
},
shared: {
React: {
singleton: true,
requiredVersion: 18.0.0
strictVersion: true
}
}
Micro frontend (= Remote)
name: "reservation",
filename: "remoteEntry.js",
exposes: {
"./OutdoorEvent":"./src/OutdoorEvent.tsx"
},
shared: {
React: {
singleton: true,
requiredVersion: 17.2.0
}
}
Version mismatch shared lib
Rule:
Take the highest compatible version !
Version mismatch shared lib
singleton = true
Host version: 18.0.0 Mfe version: 17.2.0 | Only load 18.0.0 |
Host version: 18.0.0 Mfe version: 18.1.0 | Only load 18.1.0 (is highest compatible version) |
Version mismatch shared lib
singleton = false
Host version: 18.0.0 Mfe version: 17.2.0 | Load both, big bundle size ! |
Host version: 18.0.0 Mfe version: 18.1.0 | Only load 18.1.0 (is highest compatible version) |
singleton = false
Search
event
Outdoor
events
Reser-
vation
Module
Federation
“Remotes”
Host / Container
React
Module
Federation
“Host”
React
React
React
singleton = true
Search
event
Outdoor
events
Reser-
vation
Module
Federation
“Remotes”
Host / Container
Module
Federation
“Host”
React
Webpack
Module �Federation�
Steps
Step 1. Generate Container
Step 2. Generate Micro Frontends
Step 3. Change Configurations
Step 4. Implement Components
npx create-mf-app
npx create-mf-app
Step 5. Implement Routing
npx create-mf-app
Step 1 Generate Container
microfrontends-in-action ❯ npx create-mf-app
? Pick the name of your app: container
? Project Type: Application
? Port number: 3000
? Framework: (Use arrow keys)
lit-html
mithril
preact
❯ react
solid-js
svelte
vue3
Step 2 Generate Micro Frontends
microfrontends-in-action ❯ npx create-mf-app
? Pick the name of your app: outdoor-events
? Project Type: Application
? Port number: 3002
? Framework: (Use arrow keys)
lit-html
mithril
preact
❯ react
solid-js
svelte
vue3
Step 3 Change configurations
Host / Container / Shell
remotes: {
outdoorevents:"outdoorevents@http://...”
reservation: "reservation@http://..”
}
Micro frontend 1
name:"outdoorevents",
exposes: {
./OutdoorEvents.tsx
}
Micro frontend 2
name:"reservation",
exposes: {
./OutdoorEvent.tsx
}
Step 4 Implement Components
export default function OutdoorEvents() {� return (� <div>� <h1>Outdoor Events . . . .</h1>� <div>� {outdoorEvents.map(event => (� <Card� title={event.title}� image={event.image}� slug={event.slug}� />� ))}� </div>� </div>� );�}��function Card({title, image, slug}) {� return (� <div>� <img src={image} />� <div>� <h2>{title}</h2>� <Link to={`/outdoorEvents/${slug}`}>Reservation</Link>� </div>� </div>� );�}
Step 5 Implement Routing
Micro frontend 1
name:"outdoorevents",
exposes: {
./OutdoorEvents.tsx
}
Micro frontend 2
name:"reservation",
exposes: {
./OutdoorEvent.tsx
}
"/outdoorEvents/:slug
Native
Module �Federation�
Native Module Federation 🚀
Browser-native implementation 🚀
Independently of build tools and frameworks 🧰
Mental model as Module Federation 𝌭
Embraces Import maps & EcmaScript modules
Blazing fast⌚
Layered Architecture
@angular-architects/native-federation
@softarc/native-federation
@gioboa/vite-module-federation
yours
Native Federation Core
h
Native Federation
Your Bundler
Your Adapter
Comparison
Webpack Module Federation
Native Federation
Very Fast
Easy to use
Buildtools agnostic
Small community
Least Mature
Slower
More difficult
Dependent on Webpack
Large community
Mature
More plugins and tools
Caches shared dep
Lazy loading
Lazy loading
Maximum flexibility
🚀
Example Apps
Communication between Micro frontends�
Routing
CustomEvent Web API
Pub Sub
Shared state
Live coding Shopping cart
OutdoorEvents
Layout
Header.tsx
CustomEvent: addToCart
const increment = () => {
const action = {
detail: { action: 'increment' },
};
const event = new CustomEvent('ADD_TO_CART', action);
document.dispatchEvent(event);
};
export default function Header() {
const [count, setCount] = useState(0);
useEffect(() => {
const handleIncrement = () => {
setCount((prevCount) => prevCount + 1);
};
const handleCustomEvent = (event) => {
if (event.detail.action === 'increment') {
handleIncrement();
}
};
document.addEventListener('ADD_TO_CART', handleCustomEvent);
return () => {
document.removeEventListener('ADD_TO_CART', handleCustomEvent);
};
}, [count]);
Peter Eijgermans
@EijgermansPeter
Peter Eijgermans
@EijgermansPeter
const increment = () => {
const action = {
detail: { action: 'increment' },
};
const event = new CustomEvent('ADD_TO_CART', action);
document.dispatchEvent(event);
};
const [count, setCount] = useState(0);
useEffect(() => {
const handleIncrement = () => {
setCount((prevCount) => prevCount + 1);
};
const handleCustomEvent = (event) => {
if (event.detail.action === 'increment') {
handleIncrement();
}
};
document.addEventListener('ADD_TO_CART', handleCustomEvent);
return () => {
document.removeEventListener('ADD_TO_CART', handleCustomEvent);
};
}, [count]);
Monolith !!!
How fast can Indian Rhinoceroses run?
How fast can Indian Rhinoceroses run?
C. 50 km per hour !!!
How do I survive the charging Rhino?
click!
Micro
Agile
Independent
Adaptability
To survive
Strength and robustness
Easy to manipulate