The Status of Micro Frontends

Transcript

1. @ManfredSteyer ManfredSteyer The Status of Micro Frontends Manfred Steyer, ANGULARarchitects.io
2. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer ✓Hyperlinks ✓Server-Side Includes ✓Server-Side orchestration
7. @ManfredSteyer The Final Frontier
8. @ManfredSteyer ▪ Loading into Browser ▪ Bundle Size ▪ Version Conflicts
9. @ManfredSteyer #1 Analysis #2 Implementation
10. @ManfredSteyer Manfred Steyer
11. @ManfredSteyer
12. @ManfredSteyer Which one is the best?
13. @ManfredSteyer It’s all about consequences in your very situation!
14. @ManfredSteyer
15. @ManfredSteyer
16. @ManfredSteyer • Autarkic teams, so that … • it's possible to do changes w/o coordinating with other teams • own architectural decisions • Migrating step by step to new tech stacks : • Fully consistent design • Bundle size
17. @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage
18. @ManfredSteyer Should mirror a real-world business domain Large enough: Most use cases don't overlap domains Small enough: One team can handle it
19. @ManfredSteyer
20. @ManfredSteyer
21. @ManfredSteyer Monorepo Structure
22. @ManfredSteyer https://nrwl.io/nx
23. @ManfredSteyer Visualize Module Structure
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer
27. @ManfredSteyer
28. @ManfredSteyer
29. @ManfredSteyer µFrontend µFrontend µFrontend
30. @ManfredSteyer
31. @ManfredSteyer
32. @ManfredSteyer
33. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell
34. @ManfredSteyer • iframes (very present) • Web Components (a bit)
35. @ManfredSteyer const Component = await import('other-app/cmp');
36. @ManfredSteyer 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')
37. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>
38. @ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
39. @ManfredSteyer Selecting the highest compatible version 10.0 10.1
40. @ManfredSteyer Compiled app code is not officially backwards compatible
41. @ManfredSteyer Conflict: No highest compatible version 11.0 10.1
42. @ManfredSteyer
43. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Publish shared libs seperately via npm Repository n Repository 2 Repository 1 Version Mismatches? Strict Borders
44. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App
45. @ManfredSteyer Decoupling: Access Restrictions/ Linting (Nx) Separate Deployment* No Version Conflicts (just one version!)
46. @ManfredSteyer
47. @ManfredSteyer Hyperlinks µFrontend µFrontend µFrontend
48. @ManfredSteyer <iframe></iframe>
49. @ManfredSteyer
50. @ManfredSteyer Abstracting away differences b/w frameworks Shadow DOM Properties/ Events
51. @ManfredSteyer
52. @ManfredSteyer const Component = await import('other-app/cmp');
53. @ManfredSteyer const main = await import('other-app/main'); main.bootstrap();
54. @ManfredSteyer const main = await import('other-app/main'); main.bootstrap(); const rootElm = document.createElement('app-root') document.body.appendChild(rootElm);
55. @ManfredSteyer await import('other-app/main'); // Self-Bootstrapping const rootElm = document.createElement('app-root') document.body.appendChild(rootElm);
56. @ManfredSteyer await import('other-app/main'); const rootElm = document.createElement('app-root') document.body.appendChild(rootElm); WrapperComponent
57. @ManfredSteyer
58. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
59. @ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
60. @ManfredSteyer Conclusion Know your architecture goals + Evaluate! Know your architecture goals + Evaluate! Moduliths vs. Micro Frontends Moduliths vs. Micro Frontends Monorepo vs. multiple repos Monorepo vs. multiple repos Module Federation: Tempting Module Federation: Tempting
61. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io