Import Maps: The Next Evolution Step for Micro Frontends?

Transcript

1. @ManfredSteyer Import Maps: The Next Evolution Step for Micro Frontends?
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
5. @ManfredSteyer
6. @ManfredSteyer const Component = await import('other-app/xyz')
7. @ManfredSteyer const Component = await import('other-app/xyz')
8. @ManfredSteyer
9. @ManfredSteyer
10. @ManfredSteyer
11. @ManfredSteyer #1 Import Maps #2 Module Federation on Import Maps
12. @ManfredSteyer Manfred Steyer
13. @ManfredSteyer
14. @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>
15. @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>
16. @ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js" } } </script>
17. @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>
18. @ManfredSteyer <script type="importmap"> { "imports": { […] }, "scopes": { "http://that-app/module.mjs": { "date-fns": "./libs/other-date-fns.js" } } } </script>
19. @ManfredSteyer const im = document.createElement('script'); im.type = 'importmap'; im.textContent = JSON.stringify(importMap); document.currentScript.after(im);
20. @ManfredSteyer [https://caniuse.com/import-maps]
21. @ManfredSteyer
22. @ManfredSteyer
23. @ManfredSteyer
24. @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)
25. @ManfredSteyer
26. @ManfredSteyer
27. @ManfredSteyer
28. @ManfredSteyer
29. @ManfredSteyer
30. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
31. @ManfredSteyer Import Maps: Provide low level building blocks Native Federation: Insurance Try out with esbuild, vite, etc.
32. @ManfredSteyer
33. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io