Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Micro Frontends with Angular: Module Federation Deep Dive @ngBe
Manfred Steyer
PRO
December 15, 2020
Programming
0
470
Micro Frontends with Angular: Module Federation Deep Dive @ngBe
Manfred Steyer
PRO
December 15, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
manfredsteyer
PRO
1
110
manfredsteyer
PRO
1
320
manfredsteyer
PRO
2
260
manfredsteyer
PRO
0
160
manfredsteyer
PRO
0
560
manfredsteyer
PRO
0
310
manfredsteyer
PRO
0
160
manfredsteyer
PRO
0
360
manfredsteyer
PRO
0
190
Other Decks in Programming
See All in Programming
patorash
0
140
kidokidofire
1
110
kaz29
2
130
ajstarks
2
760
kubode
2
190
dunglas
5
5.5k
devinjeon
2
870
yasuakiomokawa
0
600
sh_akira
3
120
rockname
1
330
chimerast
0
340
kulkarniankita09
0
270
Featured
See All Featured
kneath
220
15k
tanoku
86
8.6k
garrettdimon
289
110k
reverentgeek
167
7.3k
addyosmani
312
21k
colly
66
3k
62gerente
586
200k
lauravandoore
11
1.7k
maggiecrowley
10
550
samlambert
237
10k
roundedbygravity
242
21k
bkeepers
PRO
408
58k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Angular: Module Federation Deep Dive
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 Micro Frontends
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Dynamic
Module Federation #4: Communication b/w MF #5 Version Mismatch #6: Multi Framework/ Version MF #7: Possible Roadmap
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@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 ?
@ManfredSteyer Custom Builder
@ManfredSteyer
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "mfe1" } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' })
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' }) Helper Function using the Webpack API
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Dealing with Version Mismatches SemVer by Default: Highest compatible
version Fallback: Use own version Relaxing: Configure a range of accepted versions Singleton: Warning or error
@ManfredSteyer Example for SemVer and Fallback • Shell: my-lib: ^10.0.0
• MFE1: my-lib: ^10.1.1 • MFE2: my-lib: ^9.0.0 Result: • Shell and MFE1 share ^10.1.1 • MFE2 falls back to its own version ^9.0.0
@ManfredSteyer However … • Shell: my-lib: ^10.0.0 • MFE1: my-lib:
^10.1.1 + MFE1: Dynamic Federation + Loading metadata too late Result: • Shell uses ^10.0.0 • MFE1 falls back to its own version ^10.1.1
@ManfredSteyer However … • Shell: my-lib: ^10.1.1 • MFE1: my-lib:
^10.0.0 + MFE1: Dynamic Federation + Loading metadata too late Result: • Shell and MFE1 share ^10.1.1
@ManfredSteyer Recommentation for Dynamic Federation Make sure, shell has highest
versions Or: Load metadata upfront!
@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } }
@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }
@ManfredSteyer
@ManfredSteyer Key Idea Share a Lib with a Communication Service
Message Passing? Separate Lib or Monorepo
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Key Idea Expose Web Components via Module Federation However:
Bundle Size & Workarounds
@ManfredSteyer Example
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Well … Webpack 5 is final! CLI is final
However: webpack5/CLI integration is experimental! https://github.com/angular/angular-cli/pull/18873 See Pitfalls: https://tinyurl.com/y8e57ol9
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Federated Angular
Dynamic Federation Version Mismatches Multi Framework/ Version ?
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io