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

Micro Frontends with Module Federation @MicroFrontend Summit 2023

Micro Frontends with Module Federation @MicroFrontend Summit 2023

Manfred Steyer
PRO

January 11, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    ManfredSteyer
    Micro Frontends with Module Federation
    Manfred Steyer, ANGULARarchitects.io

    View Slide

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

    View Slide

  3. @ManfredSteyer

    View Slide

  4. @ManfredSteyer

    View Slide

  5. @ManfredSteyer

    View Slide

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

    View Slide

  7. @ManfredSteyer
    #1a
    Module
    Federation
    #1b
    Sharing Libs
    and Data
    #3
    Dealing with
    Version
    Mismatches
    #4
    Multiple
    Frameworks/
    Versions

    View Slide

  8. @ManfredSteyer
    Manfred Steyer

    View Slide

  9. @ManfredSteyer

    View Slide

  10. @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 Slide

  11. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    }
    exposes: {
    './Cmp': './my.cmp.ts'
    }
    import('mfe1/Cmp')

    View Slide

  12. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    }
    exposes: {
    './Cmp': './my.cmp.ts'
    }
    loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://…',
    exposedModule: './Cmp'
    })

    View Slide

  13. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    }
    exposes: {
    './Cmp': './my.cmp.ts'
    }
    loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://…',
    exposedModule: './Cmp'
    })
    Helper Function using
    the Webpack API

    View Slide

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

    View Slide

  15. @ManfredSteyer
    1) ng add @angular-architects/module-federation
    2) Adjust generated configuration
    3) ng serve

    View Slide

  16. @ManfredSteyer
    1) Adjust your webpack.config.js
    2) Start your application

    View Slide

  17. @ManfredSteyer

    View Slide

  18. @ManfredSteyer

    View Slide

  19. @ManfredSteyer
    Selecting the highest compatible version
    10.0 10.1

    View Slide

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

    View Slide

  21. @ManfredSteyer
    shared: {
    "my-lib": {
    singleton: true
    }
    }
    11.0 10.1

    View Slide

  22. @ManfredSteyer
    in general, however, …

    View Slide

  23. @ManfredSteyer
    • Framework with two libs a and b
    • a is using internal APIs of b
    • a could be an compiled app too
    (Don't use ^ or ~ in your package.json)

    View Slide

  24. @ManfredSteyer
    shared: {
    "my-lib": {
    singleton: true,
    strictVersion: true // Error instead of warning!
    }
    }
    11.0 10.1

    View Slide

  25. @ManfredSteyer
    shared: {
    "my-lib": {
    requiredVersion: ">=1.0.1 <11.1.1"
    }
    }

    View Slide

  26. @ManfredSteyer
    •Several options baked-in
    •However, best option: avoid conflicts upfront
    • Option 1: Monorepo
    • Option 2: Loading several SPAs + sharing nothing!

    View Slide

  27. @ManfredSteyer

    View Slide

  28. @ManfredSteyer
    const Component = await import('other-app/cmp');

    View Slide

  29. @ManfredSteyer
    await import('other-app/web-cmp');

    View Slide

  30. @ManfredSteyer
    const main = await import('other-app/web-cmp');
    const elm = document.createElement('my-web-cmp')
    document.body.appendChild(elm);

    View Slide

  31. @ManfredSteyer
    await import('other-app/web-cmp');
    const elm = document.createElement('my-web-cmp')
    document.body.appendChild(elm);
    WrapperComponent

    View Slide

  32. @ManfredSteyer

    View Slide

  33. @ManfredSteyer

    View Slide

  34. @ManfredSteyer

    View Slide

  35. @ManfredSteyer
    https://red-ocean-0fe4c4610.azurestaticapps.net

    View Slide

  36. @ManfredSteyer
    Free eBook (5th Edition)
    ANGULARarchitects.io/book

    View Slide

  37. @ManfredSteyer
    Conclusion
    Loading separately
    compiled code &
    sharing libs
    Baked-in Strategies
    for Version
    Mismatches
    Webpack Runtime
    API: Dynamic
    Federation
    Frankenstein:
    Bootstrapping
    Several SPAs

    View Slide

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

    View Slide