Micro Frontends Unmasked: Opportunities, Challenges, Alternatives

Transcript

1. AngularArchitects.io | @ManfredSteyer Micro Frontends Unmasked Opportunities, Challenges, Alternatives
2. Good Fences Make Good Neighbors!
3. Verticals: Basis for Autonomous Teams Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
4. Verticals Verticals represent a business domain (ideally!) Verticals as Micro Frontends: Maximizes Independence
5. Opportunities Team Autonomy Adding new Teams & Members Shorter Release Cycles Testability Fault Isolation Runtime Performance Different Technology Stacks
6. Challanges UI/UX Initial Loading Times Coupling Technical Conflicts Complexity Diverging Micro Frontends
7. @ManfredSteyer How to deal with these challenges?
8. @ManfredSteyer Agenda 1. Strategies for Dealing with Challenges 2. Costs of Strategies 3. Alternatives
9. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer
10. @ManfredSteyer Strategies for Dealing With Challanges
11. @ManfredSteyer Design Systems Sharing Styles Sharing Libs Shadow DOM UI/UX
12. @ManfredSteyer SSR Automated Performance Checks Sharing Code Initial Loading Times
13. @ManfredSteyer Module Federation Shell (Host) Microfrontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } // Expose files in // webpack config exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
14. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: { } exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
15. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntrypoint.js import('…'); <script src="…"></script>
16. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
17. @ManfredSteyer
18. @ManfredSteyer Your Bundler Native Federation
19. @ManfredSteyer Demo
20. @ManfredSteyer Strategic Design (DDD) Eventing Separate Ways Inner Sourcing Coupling
21. @ManfredSteyer Event Storming
22. @ManfredSteyer Naming Conventions iframes Import Maps Script Loaders (SystemJS) Federation Separate Ways Technical Conflicts
23. @ManfredSteyer Starterkits Utility Libs Meta Frameworks Automated Tests Developer Survey Complexity
24. @ManfredSteyer However, … Many of these Strategies make sense even without Micro Frontends! Strategic Design (DDD) Design Systems Starterkits and Libs Getting Dev Feedback …
25. @ManfredSteyer Costs of Micro Frontends
26. @ManfredSteyer Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change
27. @ManfredSteyer Evaluating Options Facilitating Decisions Communicating Decisions
28. @ManfredSteyer Alternative
29. @ManfredSteyer Verticals in a Modulith Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
30. @ManfredSteyer
31. @ManfredSteyer Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
32. @ManfredSteyer Demo
33. @ManfredSteyer Free eBook (6th Edition) angularArchitects.io/ebook
34. @ManfredSteyer Conclusion It's all about Verticals! Strategic Design (DDD) Challenges & Solutions Platform Team Alternative: Modulith You need to evaluate!
35. Good Fences Make Good Neighbors!
36. ManfredSteyer AngularArchitects.io Slides & Examples