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
90
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
900
Other Decks in Programming
See All in Programming
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
300
Vibe Coding の話をしよう
schroneko
12
3.1k
Exit 8 for SwiftUI
ojun9
0
140
State of Namespace
tagomoris
4
2.1k
VitestのIn-Source Testingが便利
taro28
8
2.2k
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
75
18k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
690
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.2k
KANNA Android の技術的課題と取り組み
watabee
0
130
実践Webフロントパフォーマンスチューニング
cp20
36
8.6k
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
1.4k
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
140
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cult of Friendly URLs
andyhume
78
6.3k
Building an army of robots
kneath
305
45k
Gamification - CAS2011
davidbonilla
81
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
33
6.6k
Docker and Python
trallard
44
3.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
680
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
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