The Price of Micro Frontends … and Your Alternatives @bastacon 2025 in Frankfurt

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer The Price of Micro Frontends … and Your Alternatives Manfred Steyer, ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2 Good Fences Make Good Neighbors!
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 3 Verticals for Autonomous Teams Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 4 Verticals A Vertical represents a business domain (ideally!) Verticals as Micro Frontends: Maximizes Independence
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 5 Benefits Team Autonomy Easier Onboarding Shorter Release Cycles Different Technology Stacks
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 6 Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer How to deal with these challenges and what does it “cost“?
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 8 1) Strategies for Dealing with Challenges 2) Costs of Strategies 3) Alternatives Agenda
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 9 About me … Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 10 Strategies for Dealing With Challanges
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 11 Strategies for Addressing Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts Design System Federation & Sharing Libs DDD SSR Starter Kits and Libs Conventions Inner Sourcing Web Components Eventing
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 12 Strategies for Addressing Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts Design System Federation & Sharing Libs DDD SSR Starter Kits and Libs Conventions Inner Sourcing Separate Ways Eventing
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 13 Domain-Driven Design
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 14 Domain-Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 This is what Strategic Design Prevents
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 16 Example Flight System
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 17 Example Booking Check-in Boarding Luggage Sub-Domains
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 18 Finding Sub-Domains Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage Passenger Travel Agency Check-in Agent Boarding Agent
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Event Storming
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 21 Module Federation
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 22 Idea const Component = import('other-app/xyz')
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 23 Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }
23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 24 Providing Metadata Shell (Host) Micro Frontend (Remote) RemoteEntrypoint.js import('…'); <script src="…"></script>
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 25 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
25. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2 6 Alternatives Getting Popular TURBOPACK
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 27
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 28 Your Bundler Native Federation Adapter
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 29 Characteristics Mindset: Module Federation EcmaScript Modules Import Maps Simple config, sharing libs
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 1) npm i @angular-architects/native-federation -D 2) nx g @angular-architects/native-federation:init 3) Adjust generated configuration 4) nx serve Native Federation
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 31 DEMO
31. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Costs of Micro Frontends
32. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 33 Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change
33. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 34 Evaluating Options Facilitating Decisions Communicating Decisions
34. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 35 Alternative: Frontend Modulith
35. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 36 Verticals in One Monolith Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
36. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 37
37. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 38 Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
38. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 39 DEMO
39. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 40 6th edition 20 chapters http://angularArchitects.io/ebook Free eBook
40. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 41 Conclusion It‘s all about verticals! Strategic Design (DDD) Platform Team Alternative: Modulith You need to evaluate!
41. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 42 Good Fences Make Good Neighbors!
42. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io