Micro Frontends: The Good, the Bad, and the Ugly

on YouTube ↗31m

" summary

A greenfield online shop is rebuilt using micro-frontends deployed to separate URLs with Vue.js and the Vue Server Renderer Plugin, UI pieces as web components, and first-party libraries in TypeScript. The talk examines how cross-team isolation reduced coupling but introduced deployment and runtime complexity, discusses iframe and other integration patterns and server-side rendering trade-offs, and reports surprising issues such as persistent memory leaks across micro-frontends and brittle semantic-versioning that forced rollbacks and coordination.

AI-written summary · about

" chapters (13)

1. 0:00Micro Frontends intro
2. 2:01Choosing Micro Frontends
3. 4:11E-commerce checkout
4. 6:15Real-world lessons
5. 9:31Trade-offs in architecture
6. 12:26Custom vs frameworks
7. 15:45Layout service
8. 18:36Client-side communication
9. 21:24Functional requirements
10. 24:19Maintenance and scalability
11. 26:47Config and deployment
12. 29:17Debugging incidents
13. 30:21Summary

" related talks

• 34mMicro FrontendsElmar Burke, Hans-Christian Otto · JSUnconf 2018
• 57mMicro Frontends – a strive for fully verticalized systemsDavid Leitner · NDC London 2020
• 56mMicro Frontends with Vue.jsAleksandr Tserkovnyy · JS Fest 2019 Autumn
• 29mMicro Frontends, or How to Evolve to an Extensible FrontendBenjamín Martínez · JSConf Mexico 2020 Virtual Edition
• 46mMicro Frontend: the microservice puzzle extended to frontendaudrey neveu · Voxxed Days Microservices 2019
• 45mMicro Frontends in Action!Peter Eijgermans · Voxxed Days Luxembourg 2023
• 25mMicrofrontends: a Modern Approach to Complex Web ApplicationsFederico Stefani · Intersection Conference 2023
• 52mMicro frontends: prepare for the ridePaulius Kimbartas · Build Stuff 2021