Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
Manfred Steyer
PRO
July 05, 2022
Programming
0
420
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
Manfred Steyer
PRO
July 05, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Better Angular Architectures: Architectures with Standalone Components @DWX2022
manfredsteyer
PRO
1
480
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
300
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
380
Angular-basierte Micro Frontends mit Module Federation @API Summit
manfredsteyer
PRO
0
150
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
180
Sustainable SPAs with Strategic Design: A Wonderful Friendship?
manfredsteyer
PRO
0
150
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
300
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
manfredsteyer
PRO
0
210
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
370
Other Decks in Programming
See All in Programming
Git操作編
smt7174
2
260
ベストプラクティス・ドリフト
sssssssssssshhhhhhhhhh
1
220
Pluggable Storage in PostgreSQL
sira
1
200
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
180
Agile Tech EXPO_2022/カケハシ
kakehashi
0
120
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
77web
1
160
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
310
Another 40 years of Commodore 64
mehowte
0
120
FullStack eXchange, July 2022
brucel
0
200
There's an API for that!
mariatta
PRO
0
110
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
440
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Support Driven Design
roundedbygravity
87
8.6k
4 Signs Your Business is Dying
shpigford
169
20k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
15
3.9k
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
Designing Experiences People Love
moore
130
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Transcript
@ManfredSteyer ManfredSteyer More Than Micro Frontends: 3 Further Use Cases
for Module Federation Manfred Steyer, ANGULARarchitects.io
@ManfredSteyer
@ManfredSteyer On Youtube
@ManfredSteyer On Youtube
@ManfredSteyer Consuming an Interface Implementing an Interfacae
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Contents #1: Module Federation 101 #2: Plugin Systems #3:
A/B Testing #4: Build Performance
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Does not work with webpack/ Angular CLI
@ManfredSteyer Webpack 5 Module Federation 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 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 1) npm i @angular-architects/module-federation -D 2) ng g @angular-architects/module-federation:init
3) Adjust generated configuration 4) ng serve
@ManfredSteyer Great Deal for Micro Frontends!
@ManfredSteyer
@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
@ManfredSteyer
@ManfredSteyer Setting Micro Frontend Shell 10 Micro Frontends á 20
Features Separately buildable 200 Features in total!
@ManfredSteyer https://nrwl.io/nx Smart, Fast and Extensible Build System
@ManfredSteyer Angular CLI npm install -g @angular/cli ng new workspace
cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app
@ManfredSteyer Nx npm install -g @angular/cli npm init nx-workspace workspace
cd workspace ng generate app my-app ng generate lib my-lib ng serve my-app ng build my-app
@ManfredSteyer Results Cold Cache: 58.8 sec Warm Nx Cache: 0.6
sec Changed One App: 9.71 sec
@ManfredSteyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Conclusion Loading Separately Deployed Code Micro Frontends Plugin Systems
A/B Testing Build Performance
@ManfredSteyer
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io