Camel and Eye of a Needle: Integration of SPA-based Micro Frontends

Transcript

1. @ManfredSteyer ManfredSteyer Camel and Eye of a Needle Manfred Steyer, ANGULARarchitects.io Integration of SPA-based Micro Frontends
2. @ManfredSteyer Which one is the best?
3. @ManfredSteyer It’s all about consequences in your very situation!
4. @ManfredSteyer
5. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
6. @ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1 Strict Borders
7. @ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1 Strict Borders
8. @ManfredSteyer Shared Booking Boarding
9. @ManfredSteyer Shared Booking Boarding Not officially tested Version Mismatches vs. Bundle Sizes
10. @ManfredSteyer #1 Approaches: Traditional SPAs #2 Approaches: "New Wave"
11. @ManfredSteyer Manfred Steyer
12. @ManfredSteyer
13. @ManfredSteyer µFrontend SPA µFrontend SPA µFrontend SPA
14. @ManfredSteyer
15. @ManfredSteyer
16. @ManfredSteyer µService µFrontend µFrontend µFrontend Shell
17. @ManfredSteyer iframe Bootstrapping several SPAs Module Federation + meta frameworks using these approaches e. g. SAP Luigi Framework
18. @ManfredSteyer <other-spa></other-spa> <script src="other-spa/bundle.js"></script>
19. @ManfredSteyer const script = document.createElement('script'); script.src = 'other-spa/bundle.js'; document.body.appendChild(script); const myElement = document.createElement('other-spa'); myElement['visible'] = true; document.body.appendChild(myElement);
20. @ManfredSteyer Option: Wrap them into Web Components Angular App (MFE) React App (MFE)
21. @ManfredSteyer const Component = import('http://other-app/xyz')
22. @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')
23. @ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
24. @ManfredSteyer Single Framework/ Version Multiple Frameworks/ Versions Like Lazy Loading Like bootstrapping several SPAs + Sharing where same version No workarounds Some workarounds
25. @ManfredSteyer
26. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
27. @ManfredSteyer
28. @ManfredSteyer
29. @ManfredSteyer
30. @ManfredSteyer HTML JS DATA FMP
31. @ManfredSteyer HTML JS DATA TTI FMP
32. @ManfredSteyer HTML JS DATA TTI "Uncanny Vally" FMP
33. @ManfredSteyer
34. @ManfredSteyer HTML DATA FMP JS JS JS JS JS JS JS JS TTI
35. @ManfredSteyer HTML DATA FMP JS JS JS JS TTI
36. @ManfredSteyer
37. @ManfredSteyer SPAs + MF: Trade-offs Business Apps: Traditional approaches ok Conversions: New wave very tempting! Evalulate options against requirements!
38. @ManfredSteyer
39. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io