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
The Price of Micro Frontends… and Your Alterna...
Search
Manfred Steyer
PRO
March 03, 2025
Programming
0
590
The Price of Micro Frontends … and Your Alternatives @bastacon 2025 in Frankfurt
Manfred Steyer
PRO
March 03, 2025
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
130
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
71
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
89
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
96
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
5つのアンチパターンから学ぶLT設計
narihara
1
120
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
480
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
700
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
C++20 射影変換
faithandbrave
0
540
Select API from Kotlin Coroutine
jmatsu
1
190
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
540
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
The World Runs on Bad Software
bkeepers
PRO
69
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Become a Pro
speakerdeck
PRO
28
5.4k
Producing Creativity
orderedlist
PRO
346
40k
Designing Experiences People Love
moore
142
24k
Docker and Python
trallard
44
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Transcript
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer The
Price of Micro Frontends … and Your Alternatives Manfred Steyer, ANGULARarchitects.io
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2
Good Fences Make Good Neighbors!
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 3
Verticals for Autonomous Teams Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 4
Verticals A Vertical represents a business domain (ideally!) Verticals as Micro Frontends: Maximizes Independence
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 5
Benefits Team Autonomy Easier Onboarding Shorter Release Cycles Different Technology Stacks
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 6
Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer How
to deal with these challenges and what does it “cost“?
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 8
1) Strategies for Dealing with Challenges 2) Costs of Strategies 3) Alternatives Agenda
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 9
About me … Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 10
Strategies for Dealing With Challanges
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 11
Strategies for Addressing Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts Design System Federation & Sharing Libs DDD SSR Starter Kits and Libs Conventions Inner Sourcing Web Components Eventing
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 12
Strategies for Addressing Challenges Diverging (UI/UX, …) Initial Loading Times Coupling Complexity & Conflicts Design System Federation & Sharing Libs DDD SSR Starter Kits and Libs Conventions Inner Sourcing Separate Ways Eventing
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 13
Domain-Driven Design
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 14
Domain-Driven Design Strategic Design Tactical Design Decomposing a System Design Patterns & Practices
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 This
is what Strategic Design Prevents
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 16
Example Flight System
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 17
Example Booking Check-in Boarding Luggage Sub-Domains
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 18
Finding Sub-Domains Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage Passenger Travel Agency Check-in Agent Boarding Agent
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Event
Storming
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 21
Module Federation
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 22
Idea const Component = import('other-app/xyz')
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 23
Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 24
Providing Metadata Shell (Host) Micro Frontend (Remote) RemoteEntrypoint.js import('…'); <script src="…"></script>
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 25
Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 2
6 Alternatives Getting Popular TURBOPACK
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 27
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 28
Your Bundler Native Federation Adapter
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 29
Characteristics Mindset: Module Federation EcmaScript Modules Import Maps Simple config, sharing libs
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 1)
npm i @angular-architects/native-federation -D 2) nx g @angular-architects/native-federation:init 3) Adjust generated configuration 4) nx serve Native Federation
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 31
DEMO
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer Costs
of Micro Frontends
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 33
Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 34
Evaluating Options Facilitating Decisions Communicating Decisions
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 35
Alternative: Frontend Modulith
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 36
Verticals in One Monolith Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 37
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 38
Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in Builds
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 39
DEMO
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 40
6th edition 20 chapters http://angularArchitects.io/ebook Free eBook
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 41
Conclusion It‘s all about verticals! Strategic Design (DDD) Platform Team Alternative: Modulith You need to evaluate!
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @ManfredSteyer 42
Good Fences Make Good Neighbors!
• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 43 [Social
Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io