State of Micro-Frontends in 2026 🧩
Sylvain DEDIEU
Frontend engineer – #ui-foundations 🛸
Sylvain DEDIEU
Frontend engineer – #ui-foundation 🛸
     s.dedieu@criteo.com
     @sdedieu.bsky.social
     s.dedieu@criteo.com
Sylvain Dedieu
Back to 2022
4 years later
Agenda
1
2
3
4
What is and why Micro-frontends ?
Architecting it correctly
Native Federation focus
Live coding demo
1
2
3
4
What is and why Micro-frontends ?
Architecting it correctly
Native Federation focus
Live coding demo
What is and why Micro-frontends ?
Micro-architecture
Micro services and micro frontend living together
Frontend layer
API layer with microservices
Third party system
Database
Database
Database
Database
Microservices Principles
Culture of automation
Modeled around business domains
Hidden implementation details
Highly observable
Decentralization
Isolated failures
Independent deployment
Principles of microservices
1
2
3
4
What is and why Micro-frontends ?
Architecting it correctly
Native Federation focus
Live coding demo
Architecting it correctly
Defining Micro-Frontends
Header (Team C)
Header (Team C)
Header (Team C)
Product details (Team A)
Product carousel (Team B)
Footer (Team C)
Product carousel
(Team A)
Product details
(Team A)
Footer (Team C)
Footer (Team C)
Catalog (Team B)
Video player
(Team B)
Vertical Split
Horizontal Split
Defining your framework(s)
Bounded context
Catalog frontend
Backend fro frontend
Search API
Image microservice
Trending microservice
Personalized microservice
Catalog API
Think your architecture according to your domains
Mico-Frontends Composition
Origin
CDN
Client
Client-side
composition
Edge-side
composition
Server-side
composition
R
R
R
Micro-Frontends communication
Events emitter, pub/sub, or custom events
App A
App B
Shell
Micro-Frontends communication
Shell Application
Web Storage
Shell Application
Authentification Micro-Frontend
Catalog
Storing tokens
Retrieving tokens
Cookie Storage
Micro-Frontends communication
Shell Application
Shell Application
Cart
Catalog
Backend API
Post
Websocket
Implementing a Design System
Design Tokens
Basic Components
UI Components
Micro-Frontend
Implementing a Design System
application-shell.js
vendor.js
auth.js
catalog.js
Second step:
download micro-frontend
First step:
download dependencies
250KB
3MB
3MB
1
2
3
4
What is and why Micro-frontends ?
Architecting it correctly
Native Federation focus
Live coding demo
Native Federation focus
1
2
3
4
What is and why Micro-frontends ?
Architecting it correctly
Native Federation focus
Live coding demo
Live coding demo
Thank You !
Sylvain DEDIEU
Frontend engineer – #ui-foundation 🛸
     s.dedieu@criteo.com
     @sdedieu.bsky.social
     s.dedieu@criteo.com
Sylvain Dedieu