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 Module Federation: Beyond the Basics
Manfred Steyer
PRO
November 17, 2022
Programming
0
570
Micro Frontends with Module Federation: Beyond the Basics
Manfred Steyer
PRO
November 17, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
420
Angular Architecture Workshop: Modulith to Micro Frontends
manfredsteyer
PRO
0
700
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
280
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
180
Import Maps: The Next Evolution Step for Micro Frontends? @w-jax 2022
manfredsteyer
PRO
1
230
Angular's Future without NgModules: Architectures with Standalone Components
manfredsteyer
PRO
0
280
Reusable Components & Directives: Deep Dive
manfredsteyer
PRO
0
290
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
540
Keynote: The Future of WebDevManfred Steyer
manfredsteyer
PRO
0
150
Other Decks in Programming
See All in Programming
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
690
Quarto Tips for Academic Presentation
nicetak
0
890
Above All, Make It Fun! #fjordbootcamp / make it fun
kakutani
6
550
Swift Observation
shiz
3
240
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.2k
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
370
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
530
kakutanitalk2022_opening_act
shirotamaki
0
100
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
200
様々なWebアプリをAzureにデプロイする
tomokusaba
0
110
eBPF와 함께 이해하는 Cilium 네트워킹
hadaney
3
830
Featured
See All Featured
The Cult of Friendly URLs
andyhume
68
5.1k
Documentation Writing (for coders)
carmenintech
51
2.9k
The Pragmatic Product Professional
lauravandoore
21
3.4k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
GitHub's CSS Performance
jonrohan
1020
430k
Optimizing for Happiness
mojombo
365
64k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Agile that works and the tools we love
rasmusluckow
320
20k
Adopting Sorbet at Scale
ufuk
65
7.8k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation: Beyond the Basics
Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer #1 Version Mismatches #2 Mono vs. Multirepo #3 Dynamic
Federation #4 Multiple Frameworks/ Versions
@ManfredSteyer #1 Version Mismatches #2 Mono vs. Multirepo #3 Dynamic
Federation #4 Multiple Frameworks/ Versions #0 Module Federation 101
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@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')
@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]
@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Selecting the highest compatible version 10.0 10.1
@ManfredSteyer Conflict: No highest compatible version 11.0 10.1
@ManfredSteyer shared: { "my-lib": { singleton: true } } 11.0
10.1
@ManfredSteyer shared: { "my-lib": { singleton: true, strictVersion: true //
Error instead of warning! } } 11.0 10.1
@ManfredSteyer shared: { "my-lib": { requiredVersion: ">=1.0.1 <11.1.1" } }
@ManfredSteyer •Several options baked-in •However, best option: avoid conflicts upfront
@ManfredSteyer
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App Publish shared libs seperately via npm Repository n Repository 2 Repository 1 Version Mismatches? Strict Borders
@ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature …
… … … … … … … … Booking App Boarding App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://nrwl.io/nx
@ManfredSteyer
@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "http://..." } 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({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@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
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer const main = await import('other-app/main'); main.bootstrap();
@ManfredSteyer const main = await import('other-app/main'); main.bootstrap(); const rootElm =
document.createElement('app-root') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/main'); // Self-Bootstrapping const rootElm = document.createElement('app-root') document.body.appendChild(rootElm);
@ManfredSteyer await import('other-app/main'); const rootElm = document.createElement('app-root') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Conclusion Baked-in Strategies for Version Mismatches Monorepo vs. Multirepo:
Self-restriction vs. (Costly) Freedom Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io