Import Maps and Modern Hydration: The Future of Micro Frontends?

Transcript

1. @ManfredSteyer Import Maps and Modern Hydration The Future of Micro Frontends? ManfredSteyer
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
5. @ManfredSteyer Benefits of Micro Frontends Peltonen, Mezzalira, and Taibi: Motivations, benefits, and issues for adopting Micro-Frontends: A Multivocal Literature Review
6. @ManfredSteyer
7. @ManfredSteyer const Component = await import('other-app/xyz')
8. @ManfredSteyer const Component = await import('other-app/xyz')
9. @ManfredSteyer
10. @ManfredSteyer
11. @ManfredSteyer
12. @ManfredSteyer Technology-related Issues
13. @ManfredSteyer
14. @ManfredSteyer
15. @ManfredSteyer #1 Module Federation 101 #2 Import Maps #3 Module Federation on Import Maps #4 Hydration for Micro Frontends
16. @ManfredSteyer Manfred Steyer
17. @ManfredSteyer
18. @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')
19. @ManfredSteyer Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>
20. @ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
21. @ManfredSteyer Selecting the highest compatible version ^10.0 ^10.1
22. @ManfredSteyer Conflict: No highest compatible version 11.0 10.1
23. @ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0 10.1
24. @ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true // Error instead of warning! } } 11.0 10.1
25. @ManfredSteyer
26. @ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns'; const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
27. @ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns'; const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
28. @ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js" } } </script>
29. @ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js", "is-long-weekend": "http://this-app/module.mjs", "is-bridging-day": "http://that-app/module.mjs" } } </script>
30. @ManfredSteyer <script type="importmap"> { "imports": { […] }, "scopes": { "http://this-app/module.mjs": { "date-fns": "./libs/this-date-fns.js" }, "http://that-app/module.mjs": { "date-fns": "./libs/that-date-fns.js" } } } </script>
31. @ManfredSteyer const im = document.createElement('script'); im.type = 'importmap'; im.textContent = JSON.stringify(importMap); document.currentScript.after(im);
32. @ManfredSteyer [https://caniuse.com/import-maps]
33. @ManfredSteyer
34. @ManfredSteyer
35. @ManfredSteyer Meta Data • Providing at compile time • Loading at runtime Bundling • Remotes • Shared packages • Angular compiler Import Map • Generate using meta data • Scopes for version mismatches
36. @ManfredSteyer
37. @ManfredSteyer @gioboa/vite-module-federation @softarc/native-federation @angular-architects/native-federation yours Example: VanillaJS and React with esbuild Example: Vite with Svelte and Angular (AnalogJS)
38. @ManfredSteyer
39. @ManfredSteyer
40. @ManfredSteyer
41. @ManfredSteyer
42. @ManfredSteyer Once, Angular CLI supports esbuild: Move to Native Federation
43. @ManfredSteyer If you already use esbuild or vite: Native Federation
44. @ManfredSteyer In general: Native Federation is your insurance for the mid- and long-term
45. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
46. @ManfredSteyer
47. @ManfredSteyer HTML DATA FMP JS JS JS JS JS JS JS JS TTI
48. @ManfredSteyer HTML DATA FMP JS JS JS JS TTI
49. @ManfredSteyer isServer? Embed HTML Fragment from Micro Frontend else: Load (Web) Component via Module Federation
50. @ManfredSteyer
51. @ManfredSteyer Module Federation: Mental Model rocks! Import Maps: Provide low level building blocks Native Federation: Insurance Hydration via ProxyComp.
52. @ManfredSteyer
53. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io