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
180
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
290
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
90
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
99
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
VS Code Update for GitHub Copilot
74th
2
590
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Team operations that are not burdened by SRE
kazatohiei
1
300
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
RailsGirls IZUMO スポンサーLT
16bitidol
0
150
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
180
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Porting a visionOS App to Android XR
akkeylab
0
220
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
240
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Cult of Friendly URLs
andyhume
79
6.5k
Embracing the Ebb and Flow
colly
86
4.7k
GitHub's CSS Performance
jonrohan
1031
460k
Designing for humans not robots
tammielis
253
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A designer walks into a library…
pauljervisheath
207
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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