Micro Frontend: the microservice puzzle extended to frontend
summary
Saagie moves from embedding entire apps as web components (bad SPA performance, router coupling, library conflicts) to trying React fragments (still version conflicts) and finally to a layout-as-library delivered via NPM. The final approach runs as a tiny JS library that loads a top-level menu, uses a load-data helper and mocked Express for local tests, accepts occasional UI inconsistency but removes runtime conflicts, speeds delivery (four apps and security split in a year) and shares cross-app state via Kafka events.
AI-written summary · about
chapters (15)
- 0:00Introduction and speaker intro
- 4:38Problems with frontend monoliths
- 10:22Real-world case study Data Fabric
- 15:21Design system necessity
- 16:47Web components explained
- 20:46Converting apps to web components
- 23:59First micro frontend attempt issues
- 26:50Second attempt with React fragments
- 29:44Third attempt layout as library
- 36:30Page transition types
- 39:16Benefits of the final solution
- 42:55Micro teams organization results
- 43:16Best practices for micro frontends
- 46:29Resources and further reading
- 48:26Q&A state management
related talks
46mMicro Frontend: the microservice puzzle extended to frontend
44mMicro Frontend: the microservice puzzle extended to frontend
44mMicro Frontend: The Microservices Headache Extended to the FrontEnd
36mMicro Frontends in Action!
37mIntroduction to Micro Frontends
57mMicro Frontends – a strive for fully verticalized systems
45mMicro Frontends in Action!
36mMicro Frontends - Breaking Monoliths