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
More Than Micro Frontends: 3 Further Use Cases ...
Search
Manfred Steyer
PRO
July 05, 2022
Programming
0
940
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
75
Other Decks in Programming
See All in Programming
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
150
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.3k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
RailsGirls IZUMO スポンサーLT
16bitidol
0
170
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
720
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
100
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
200
NPOでのDevinの活用
codeforeveryone
0
790
PicoRuby on Rails
makicamel
2
120
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Music & Morning Musume
bryan
46
6.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
A designer walks into a library…
pauljervisheath
207
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building an army of robots
kneath
306
45k
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