Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Import Maps: The Next Evolution Step for Micro Frontends?

Import Maps: The Next Evolution Step for Micro Frontends?

Manfred Steyer

September 29, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

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

    (Remote) RemoteEntry.js <script src="…"></script>
  3. @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)
  4. @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>
  5. @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>
  6. @ManfredSteyer <script type="importmap"> { "imports": { […] }, "scopes": {

    "http://that-app/module.mjs": { "date-fns": "./libs/other-date-fns.js" } } } </script>
  7. @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
  8. @ManfredSteyer // Step 1: Initialize Native Federation await federationBuilder.init({ ...

    }) // Step 2: Trigger your build process await esbuild.build({ [...] external: federationBuilder.externals, [...] });
  9. @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();
  10. @ManfredSteyer import { initFederation } from '@softarc/native-federation'; (async () =>

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

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

    { await initFederation('assets/manifest.json'); await import('./app'); })();
  13. @ManfredSteyer Module Federation: Mental Model rocks! Import Maps: Provide low

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