$30 off During Our Annual Pro Sale. View Details »

Import Maps: The Next Evolution Step for Micro Frontends?

Import Maps: The Next Evolution Step for Micro Frontends?

Manfred Steyer
PRO

November 16, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

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