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
510
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
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
100
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
88
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
160
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
180
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
230
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
230
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
890
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
550
Other Decks in Programming
See All in Programming
Ruby's Line Breaks
yui_knk
2
480
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.4k
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
180
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.1k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
630
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.8k
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.8k
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
160
AHC 044 混合整数計画ソルバー解法
kiri8128
0
330
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.5k
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
1
240
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
520
We Have a Design System, Now What?
morganepeng
52
7.5k
RailsConf 2023
tenderlove
30
1.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
69
4.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Git: the NoSQL Database
bkeepers
PRO
430
65k
Music & Morning Musume
bryan
47
6.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
How STYLIGHT went responsive
nonsquared
99
5.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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