Micro Frontends - True End-to-End Decoupling in Practice

Hey Architect! Conference 2024

Transcript

1. Micro Frontends True End-to-End Decoupling in Practice Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik
2. Who am I? Michael Geers 👨💻 Software Engineer 📐 Frontend Architect Author 📕 Micro Frontends in Action, Manning 📝 micro-frontends.org Work neuland Büro für Informatik, Bremen E-Commerce & Verticalized Architectures Open Source ☀🚘 evcc.io Core Team - solar EV charging
3. Agenda 1. What are they & why should I care? 2. How do they work? 3. Real-World example Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik
4. High-performing Teams success factors for
5. Deployment Frequency Lead Time to Change Mean Time To Recovery Change Failure Rate
6. Continuous Delivery High Degree Of Automation
7. Easy to implement For small Teams and small projects
8. What about Large Projects
9. Monolithic Software days / weeks deployment frequency large
10. Monolithic Software large Large team
11. Monolithic Software large small team small team small team small team
12. Microservices Mins / Hours
13. Frontend Monolith Microservices Mins / Hours
14. Frontend Monolith Microservices Mins / Hours Sprints / Weeks inter-team dependencies
15. Frontend Devs Backend Devs Devops Teams of Tech-Experts
16. the micro frontends approach Teams of Tech-Experts DOMAIN search experts
17. Team Explore Team Decide Team Checkout Helps user to explore the product portfolio. Helps user to decide which product is right for him. Helps user to complete the purchase. Missions Frontend Backend DevOps
18. Micro Frontends or verticalized architecture or self-contained systems
19. Cross- Functional Teams Domain Ownership End-to-End Responsability user interface database system properties of a micro frontends architecture
20. Agenda 1. What are they & why should I care? 2. How do they work? 3. Real-World example Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik
21. home category product cart checkout success Pages
22. Pages home category product cart checkout success team explore team decide team checkout LINKS integration via
23. Composition explore decide checkout explore
24. Isolation each micro frontend is a self-contained mini-application
25. DEPLOYMENT teams can update their micro frontends independently Mins / Hours
26. Tech-Agnostic teams can choose di ff erent technologies v18 v19 v19 + + + → Use this power wisely. Alignment has bene fi ts. #futureproo fi ng #decoupling
27. Integration techniques Web Components iFrames Links Browser Events using web standards SSI/ESI Import Maps
28. Integration techniques Single SPA Piral Zephyr Cloud using tools & frameworks Baseplate Cloud Module Federation qiankun Luigi Picard.js Ionic Portals
29. Agenda 1. What are they & why should I care? 2. How do they work? 3. Real-World example Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, neuland Büro für Informatik
30. Tractor Store same application with di ff erent implementations micro-frontends.org/tractor-store/
31. micro-frontends.org/tractor-store/ Tractor Store - e-commerce example - pages transitions - composition - communication - performance testing - styles & data provided - SPA and/or server-render - serverless-ready
32. micro-frontends.org/tractor-store/ Tractor Store examine di ff erent approaches examine the code everything is open source
33. Demo preact custom elements implementation
34. Agenda 1. What are they & why should I care? 2. How do they work? 3. Real-World example Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik
35. More stuff I didn’t talk about today Design Systems Organisational Implications Local Development Dependency Sharing Performance Implications Sharing Knowledge Freedom vs. Alignment Debugging & Error Reporting Testing Strategies Migration Szenarios
36. Micro Frontend bene fi t What’s my Favorite Working in a team with a clear focus feels fantastic. It’s possible to know every feature of your codebase.
37. Want to learn more? my book micro-frontends.org micro-frontends.org/ tractor-store/
38. Thanks for Listening! geers.tv These and other slides on this topic. Michael Geers michael.geers@neuland-b fi .de @naltatis GitHub, Mastodon, LinkedIn
39. Questions? Hey Architect! Conference 24, Mercedes Benz AG, 9.10.2024 Michael Geers, @naltatis, neuland Büro für Informatik