Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Micro Frontends with Module Federation: Beyond the Basics
Search
Manfred Steyer
PRO
May 03, 2023
Programming
0
270
Micro Frontends with Module Federation: Beyond the Basics
Manfred Steyer
PRO
May 03, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
22
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
28
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
83
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
SIMD Parallel Programming with the Vector API
josepaumard
0
170
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
140
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
今、知っておきたい! 生成AIエージェントの世界
elith
3
360
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
Elm Form Validation
bkuhlmann
0
510
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
780
Netty Chicago Java User Group 2024-04-17
sullis
0
170
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
360
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Practical Orchestrator
shlominoach
182
9.7k
Done Done
chrislema
178
15k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
How STYLIGHT went responsive
nonsquared
92
4.8k
Visualization
eitanlees
136
14k
A Philosophy of Restraint
colly
197
16k
A Tale of Four Properties
chriscoyier
151
22k
The Invisible Side of Design
smashingmag
294
49k
Code Review Best Practice
trishagee
55
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Transcript
@ManfredSteyer ManfredSteyer Make Module Federation Work 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 Make sure, your Angular-based code sees exactly the same
Angular version at runtime it was built with! (Don't use ^ or ~ in your package.json)
@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 Smart, Fast and Extensible Build System
@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