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
    Import Maps:
    The Next Evolution Step for Micro Frontends?

    View full-size slide

  2. @ManfredSteyer

    View full-size slide

  3. @ManfredSteyer

    View full-size slide

  4. @ManfredSteyer
    Booking App Check-in App
    Boarding App
    Luggage App

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. @ManfredSteyer

    View full-size slide

  8. @ManfredSteyer

    View full-size slide

  9. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  11. @ManfredSteyer
    Manfred Steyer

    View full-size slide

  12. @ManfredSteyer

    View full-size slide

  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')

    View full-size slide

  14. @ManfredSteyer
    How to Get the Microfrontend's URL?
    Shell (Host) Microfrontend (Remote)
    RemoteEntry.js

    View full-size slide

  15. @ManfredSteyer
    Shell (Host) Microfrontend (Remote)
    shared: [
    "@angular/core", "…"
    ]
    shared: [
    "@angular/core", "…"
    ]

    View full-size slide

  16. @ManfredSteyer
    Selecting the highest compatible version
    ^10.0 ^10.1

    View full-size slide

  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)

    View full-size slide

  18. @ManfredSteyer
    Conflict: No highest compatible version
    11.0 10.1

    View full-size slide

  19. @ManfredSteyer

    View full-size slide

  20. @ManfredSteyer
    <br/>import { format, parseISO } from 'date-fns';<br/>const date = parseISO('2022-08-15');<br/>const weekday = format(date, 'EEE');<br/>console.log(`It's a ${weekday}.`);<br/>

    View full-size slide

  21. @ManfredSteyer
    <br/>import { format, parseISO } from 'date-fns';<br/>const date = parseISO('2022-08-15');<br/>const weekday = format(date, 'EEE');<br/>console.log(`It's a ${weekday}.`);<br/>

    View full-size slide

  22. @ManfredSteyer
    <br/>{<br/>"imports": {<br/>"date-fns": "./libs/date-fns.js"<br/>}<br/>}<br/>

    View full-size slide

  23. @ManfredSteyer
    <br/>{<br/>"imports": {<br/>"date-fns": "./libs/date-fns.js",<br/>"is-long-weekend": "http://this-app/module.mjs",<br/>"is-bridging-day": "http://that-app/module.mjs"<br/>}<br/>}<br/>

    View full-size slide

  24. @ManfredSteyer
    <br/>{<br/>"imports": { […] },<br/>"scopes": {<br/>"http://that-app/module.mjs": {<br/>"date-fns": "./libs/other-date-fns.js"<br/>}<br/>}<br/>}<br/>

    View full-size slide

  25. @ManfredSteyer
    const im = document.createElement('script');
    im.type = 'importmap';
    im.textContent = JSON.stringify(importMap);
    document.currentScript.after(im);

    View full-size slide

  26. @ManfredSteyer
    [https://caniuse.com/import-maps]

    View full-size slide

  27. @ManfredSteyer

    View full-size slide

  28. @ManfredSteyer

    View full-size slide

  29. @ManfredSteyer

    View full-size slide

  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

    View full-size slide

  31. @ManfredSteyer

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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();

    View full-size slide

  36. @ManfredSteyer
    module.exports = withNativeFederation({
    name: 'mfe1',
    exposes: {
    './component': './mfe1/component',
    },
    shared: {
    ...shareAll({ [...] }),
    },
    });

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. @ManfredSteyer
    import { initFederation } from '@softarc/native-federation';
    (async () => {
    await initFederation('assets/manifest.json');
    await import('./app');
    })();

    View full-size slide

  40. @ManfredSteyer
    const module = await loadRemoteModule({
    remoteName: 'mfe1',
    exposedModule: './component',
    });

    View full-size slide

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

    View full-size slide

  42. @ManfredSteyer
    { "shimMode": true }


    View full-size slide

  43. @ManfredSteyer

    View full-size slide

  44. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  46. @ManfredSteyer
    If you use esbuild or vite: Give Native Federation
    a try and provide feedback

    View full-size slide

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

    View full-size slide

  48. @ManfredSteyer
    In general: Native Federation is your insurance for
    the mid- and long-term

    View full-size slide

  49. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  51. @ManfredSteyer
    Module
    Federation: Mental
    Model rocks!
    Import Maps:
    Provide low level
    building blocks
    Native
    Federation:
    Insurance
    Try out with
    esbuild, vite,
    etc.

    View full-size slide

  52. @ManfredSteyer

    View full-size slide

  53. @ManfredSteyer
    d
    Slides & Examples Remote Company Workshops
    and Consulting
    http://angulararchitects.io

    View full-size slide