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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
280
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
600
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
470
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
150
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
230
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2025
yui_knk
1
230
OSS開発者という働き方
andpad
5
1.5k
tool ディレクティブを導入してみた感想
sgash708
1
160
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.7k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.4k
個人軟體時代
ethanhuang13
0
250
TanStack DB ~状態管理の新しい考え方~
bmthd
2
360
🔨 小さなビルドシステムを作る
momeemt
2
620
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
令和最新版手のひらコンピュータ
koba789
14
8.2k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
17
9.3k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Visualization
eitanlees
147
16k
RailsConf 2023
tenderlove
30
1.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Documentation Writing (for coders)
carmenintech
73
5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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