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

January 11, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer #1a Module Federation #1b Sharing Libs and Data #3

    Dealing with Version Mismatches #4 Multiple Frameworks/ Versions
  2. @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')
  3. @ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {

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

    } exposes: { './Cmp': './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
  5. @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
  6. @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)
  7. @ManfredSteyer •Several options baked-in •However, best option: avoid conflicts upfront

    • Option 1: Monorepo • Option 2: Loading several SPAs + sharing nothing!
  8. @ManfredSteyer Conclusion Loading separately compiled code & sharing libs Baked-in

    Strategies for Version Mismatches Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs