$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

September 29, 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 const Component = await import('other-app/xyz')

  6. @ManfredSteyer const Component = await import('other-app/xyz')

  7. @ManfredSteyer

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @ManfredSteyer #1 Module Federation 101 #2 Import Maps #3 Module

    Federation on Import Maps
  11. @ManfredSteyer Manfred Steyer

  12. @ManfredSteyer

  13. @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')
  14. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

    (Remote) RemoteEntry.js <script src="…"></script>
  15. @ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]

    shared: [ "@angular/core", "…" ]
  16. @ManfredSteyer Selecting the highest compatible version ^10.0 ^10.1

  17. @ManfredSteyer Make sure, your Angular app sees exactly the same

    Angular version at runtime it was built with! (Don't use ^ or ~ in your package.json)
  18. @ManfredSteyer Conflict: No highest compatible version 11.0 10.1

  19. @ManfredSteyer

  20. @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>
  21. @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>
  22. @ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js" } }

    </script>
  23. @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>
  24. @ManfredSteyer <script type="importmap"> { "imports": { […] }, "scopes": {

    "http://that-app/module.mjs": { "date-fns": "./libs/other-date-fns.js" } } } </script>
  25. @ManfredSteyer const im = document.createElement('script'); im.type = 'importmap'; im.textContent =

    JSON.stringify(importMap); document.currentScript.after(im);
  26. @ManfredSteyer [https://caniuse.com/import-maps]

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer

  30. @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
  31. @ManfredSteyer

  32. @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)
  33. @ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...

    })
  34. @ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...

    }) // Step 2: Trigger your build process await esbuild.build({ [...] external: federationBuilder.externals, [...] });
  35. @ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...

    }) // Step 2: Trigger your build process await esbuild.build({ [...] external: federationBuilder.externals, [...] }); // Step 3: Run additional tasks await federationBuilder.build();
  36. @ManfredSteyer module.exports = withNativeFederation({ name: 'mfe1', exposes: { './component': './mfe1/component',

    }, shared: { ...shareAll({ [...] }), }, });
  37. @ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>

    { await initFederation({ mfe1: 'http://localhost:3001/remoteEntry.json', }); await import('./app'); })();
  38. @ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>

    { await initFederation({ mfe1: 'http://localhost:3001/remoteEntry.json', }); await import('./app'); })();
  39. @ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>

    { await initFederation('assets/manifest.json'); await import('./app'); })();
  40. @ManfredSteyer const module = await loadRemoteModule({ remoteName: 'mfe1', exposedModule: './component',

    });
  41. @ManfredSteyer const module = await import('mfe1/component');

  42. @ManfredSteyer <script type="esms-options"> { "shimMode": true } </script> <script src="../es-module-shims.js"></script>

    <script type="module-shim" src="main.js"></script>
  43. @ManfredSteyer

  44. @ManfredSteyer

  45. @ManfredSteyer If you use webpack: No need to hurry. Stick

    with webpack Module Federation
  46. @ManfredSteyer If you use esbuild or vite: Give Native Federation

    a try and provide feedback
  47. @ManfredSteyer Once, Angular CLI supports esbuild: Give Native Federation a

    try and provide feedback
  48. @ManfredSteyer In general: Native Federation is your insurance for the

    mid- and long-term
  49. @ManfredSteyer

  50. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx

  51. @ManfredSteyer Module Federation: Mental Model rocks! Import Maps: Provide low

    level building blocks Native Federation: Insurance Try out with esbuild, vite, etc.
  52. @ManfredSteyer

  53. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io