Micro Frontends mit Module Federation: Der Beginn einer neuen Ära? @WDC2021

@ManfredSteyer ManfredSteyer Micro Frontends mit Module Federation: Der Beginn einer
neuen Ära? Manfred Steyer, ANGULARarchitects.io

@ManfredSteyer

@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App Micro Frontends

@ManfredSteyer

@ManfredSteyer Micro Frontends

@ManfredSteyer

@ManfredSteyer Contents #1: Module Federation #2 Version Mismatch #3: Federated
Angular #4: Dynamic Module Federation #5: Possible Roadmap

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Even lazy parts must be known at compile time!

@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntry.js <script src="…"></script>

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

@ManfredSteyer

@ManfredSteyer Default Behavior Selecting the highest compatible version 10.0 10.1

@ManfredSteyer Default Behavior Conflict: No highest compatible version 11.0 10.1

@ManfredSteyer Example • Shell: my-lib: ^10.0 • MFE1: my-lib: ^10.1
• MFE2: my-lib: ^9.0 • MFE3: my-lib: ^9.1 Result: • Shell and MFE1 share ^10.1 • MFE2 and MFE3 share ^9.1

@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true }
} 11.0 10.1

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

@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }

@ManfredSteyer

@ManfredSteyer ?

@ManfredSteyer Custom Builder

@ManfredSteyer

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

@ManfredSteyer

@ManfredSteyer Well … Webpack 5: final @angular-architects/module-federation: final CLI 11:
Experimental webpack 5 support CLI 12: Official webpack 5 support (May 2021)

@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Scaling Teams!
Version Mismatches Federated Angular Dynamic Federation

@ManfredSteyer

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

Micro Frontends mit Module Federation: Der Begi...

Micro Frontends mit Module Federation: Der Beginn einer neuen Ära? @WDC2021

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript