This document discusses micro frontends, including:
1) Micro frontends allow large monolithic applications to be split into independent, autonomous teams that each work on their own section of the frontend.
2) There are various ways to implement micro frontends including using iframes, JavaScript bundles, or web components. Frameworks like Project Mosaic and Single SPA can also help.
3) Potential pitfalls to avoid include memory leaks from improper event bus usage, misconfiguration between development and production environments, and not being scaled for the approach when first implementing it.
16. Frontend & Backend Split
The A Team
Team Frontend
& Design
Team Backend
& DevOps
Frontend
Frontend
Backend
Backend
@vannsl
17. Microservices
Team Frontend &
Design
Aggregation Layer
Service
Product
Service
Cart
Service
Checkout
Service
Account
The A Team
Team Frontend
& Design
Team Backend
& DevOps
Frontend
Frontend
Backend
Backend
@vannsl
36. Runtime Integration via Bundles
Example: Multiple Micro Frontends per Route
Team
SWORD
Team
SHIELD
Microservices
@vannsl
37. Runtime Integration via Bundles
Example: Multiple Micro Frontends per Route
Layout Service Templates with Fragments
Team
SWORD
Team
SHIELD
Microservices
@vannsl
38. Runtime Integration via Bundles
Example: Multiple Micro Frontends per Route
Layout Service Templates with Fragments
Team
SWORD
Team
SHIELD
Microservices
@vannsl
39. Runtime Integration via Bundles
Example: Multiple Micro Frontends per Route
Layout Service Templates with Fragments
Team
SWORD
Team
SHIELD
Microservices
Static Routes
Router
@vannsl
48. The Challenge
of creating something scalable when not scaled
Fullstack Dev
UX
Scrum
UI
Fullstack Dev
Fullstack Dev
Fullstack Dev PO
@vannsl
49. The Challenge
of creating something scalable when not scaled
Fullstack Dev
UX
Scrum
UI
Fullstack Dev
Fullstack Dev
Fullstack Dev PO Fullstack Dev
UX
Scrum
UI
Fullstack Dev
Fullstack Dev
Fullstack Dev PO
Fullstack Dev
UX
Scrum
UI
Fullstack Dev
Fullstack Dev
Fullstack Dev PO
Fullstack Dev
UX
Scrum
UI
Fullstack Dev
Fullstack Dev
Fullstack Dev PO
@vannsl