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

November 22, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

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

    "http://that-app/module.mjs": { "date-fns": "./libs/other-date-fns.js" } } } </script>
  4. @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
  5. @ManfredSteyer • How to implement maintainable architectures with Monorepos, Standalone

    Components, DDD, and NX? • How to implement Micro Frontends w/ Module Federation, Standalone Components and Web Components ? • … Public or Company Training, Remote or On-Site German and English
  6. @ManfredSteyer Module Federation: Mental Model rocks! Import Maps: Provide low

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