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
530
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
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
81
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
170
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
110
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
190
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
250
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
190
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
250
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
890
Other Decks in Programming
See All in Programming
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
190
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
130
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1.1k
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
160
PHP で学ぶ OAuth 入門
azuki
1
210
AI時代の開発者評価について
ayumuu
0
200
状態と共に暮らす:ステートフルへの挑戦
ypresto
3
820
The Evolution of the CRuby Build System
kateinoigakukun
0
720
趣味全開のAITuber開発
kokushin
0
200
Vibe Coding の話をしよう
schroneko
12
3k
RubyKaigi Dev Meeting 2025
tenderlove
1
390
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
870
Featured
See All Featured
For a Future-Friendly Web
brad_frost
177
9.7k
Visualization
eitanlees
146
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Rebuilding a faster, lazier Slack
samanthasiow
81
8.9k
Being A Developer After 40
akosma
91
590k
Raft: Consensus for Rubyists
vanstee
137
6.9k
GitHub's CSS Performance
jonrohan
1030
460k
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