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 @MicroFrontend Summit 2023
Search
Manfred Steyer
PRO
January 11, 2023
Programming
0
1.1k
Micro Frontends with Module Federation @MicroFrontend Summit 2023
Manfred Steyer
PRO
January 11, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Web Standards
manfredsteyer
PRO
0
190
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
160
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
140
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
92
NGRX Signal Store
manfredsteyer
PRO
0
180
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
470
Angular Architectures with Signals
manfredsteyer
PRO
2
600
Other Decks in Programming
See All in Programming
Laravel標準バリデーションでできること
hmb_ok
1
330
Apple Vision Pro購入RTA 1泊3日弾丸ハワイツアー / RTA: Purchase Apple Vision Pro in Hawaii
yutailang0119
0
480
私がエッジを使う理由
chimame
9
3.6k
見せ算をScalaで実装してみた / Scalaわいわい勉強会 #2
arthur1
0
1.1k
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
シェルの履歴とイクンリメンタル検索を使う
naoya
7
2.3k
Learning Ruby
okuramasafumi
5
370
ログラスの継続的なプロンプト改善のためのLLMOpsの今 / LLMOps at loglass now
rkaga
PRO
1
330
Honoとhtmx
yusukebe
6
1.1k
GitHub Copilot Tips and Tricks
yuichielectric
2
240
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
4
820
メール認証とRuby
uvb_76
0
110
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Docker and Python
trallard
33
2.6k
Building Adaptive Systems
keathley
29
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
We Have a Design System, Now What?
morganepeng
42
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Writing Fast Ruby
sferik
619
59k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Module Federation 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 #1a Module Federation #1b Sharing Libs and Data #3
Dealing with Version Mismatches #4 Multiple Frameworks/ Versions
@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 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 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 1) Adjust your webpack.config.js 2) Start your application
@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 in general, however, …
@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)
@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
• Option 1: Monorepo • Option 2: Loading several SPAs + sharing nothing!
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/cmp');
@ManfredSteyer await import('other-app/web-cmp');
@ManfredSteyer const main = await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp')
document.body.appendChild(elm);
@ManfredSteyer await import('other-app/web-cmp'); const elm = document.createElement('my-web-cmp') document.body.appendChild(elm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book
@ManfredSteyer Conclusion Loading separately compiled code & sharing libs Baked-in
Strategies for Version Mismatches Webpack Runtime API: Dynamic Federation Frankenstein: Bootstrapping Several SPAs
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io