Domain-Driven Design in Micro Frontends
summary
Applies hexagonal architecture to micro frontends and shows concrete code: refactors a React order details component into a framework‑agnostic domain class, exposes the domain via props or context, and replaces REST with GraphQL by swapping an adapter. Demonstrates widget integration using window RPC then switching to browser custom events, argues for starting with larger bounded contexts and measuring traffic before splitting, warns against shared business logic and recommends a platform team or duplication, and provides a sample repo to be published.
AI-written summary · about
chapters (23)
- 0:00Introduction and welcome
- 1:51DDD in micro frontends overview
- 3:40Hexagonal architecture explained
- 8:34Food delivery system example
- 9:59Domain-Driven Design fundamentals
- 12:27Mapping domains to micro frontends
- 14:56Vertical team slices benefits
- 15:17Avoiding Conway law pitfalls
- 15:57Data-driven decomposition
- 16:40Common closure principle
- 17:21Shared dependencies challenges
- 19:07React component refactoring demo
- 24:53Domain logic isolation
- 28:51Cross-context event handling
- 33:36Framework-agnostic domain models
- 34:18Q&A: Domain directories and entities
- 36:04Q&A: Micro frontends and microservices
- 38:36Q&A: Repository and blog details
- 39:23Q&A: Backend-frontend entity mapping
- 40:04Q&A: Backend microservices necessity
- 41:11Q&A: Custom object mapping
- 42:18Q&A: Domain knowledge location
- 44:29Closing remarks and thanks
related talks
27mBridging Business and Frontend: Domain-Driven Design in Modern Web Architecture.
51mEscaping the Framework
56mMicroservices and Domain-Driven Design — The Strategic Parts
36mMicro Frontends in Action!
45mMicro Frontends in Action!
55mFront-End Independence with GraphQL and Redux
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
30mMicro Frontends in React — a State of the Art Approach