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
Micro Frontends Unmasked Opportunities, Challen...
Search
Manfred Steyer
PRO
November 13, 2024
Programming
0
480
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
Manfred Steyer
PRO
November 13, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
46
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
120
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
200
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
470
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
200
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
870
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
530
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
31
Other Decks in Programming
See All in Programming
AI時代のプログラミング教育 / programming education in ai era
kishida
22
20k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
420
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
WordPress Playground for Developers
iambherulal
0
120
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
PsySHから紐解くREPLの仕組み
muno92
PRO
1
510
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
350
Return of the Full-Stack Developer
simas
PRO
1
310
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
150
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
280
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
220
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
320
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
BBQ
matthewcrist
88
9.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
15
1.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Transcript
AngularArchitects.io | @ManfredSteyer Micro Frontends Unmasked Opportunities, Challenges, Alternatives
Good Fences Make Good Neighbors!
Verticals: Basis for Autonomous Teams Minimal Dependencies Vertical 1 Vertical
2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
Verticals Verticals represent a business domain (ideally!) Verticals as Micro
Frontends: Maximizes Independence
Opportunities Team Autonomy Adding new Teams & Members Shorter Release
Cycles Testability Fault Isolation Runtime Performance Different Technology Stacks
Challanges UI/UX Initial Loading Times Coupling Technical Conflicts Complexity Diverging
Micro Frontends
@ManfredSteyer How to deal with these challenges?
@ManfredSteyer Agenda 1. Strategies for Dealing with Challenges 2. Costs
of Strategies 3. Alternatives
@ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and
Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer
@ManfredSteyer Strategies for Dealing With Challanges
@ManfredSteyer Design Systems Sharing Styles Sharing Libs Shadow DOM UI/UX
@ManfredSteyer SSR Automated Performance Checks Sharing Code Initial Loading Times
@ManfredSteyer 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 Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ type: 'module', remoteEntry: 'http://…', exposedModule: './Cmp' })
@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntrypoint.js import('…'); <script src="…"></script>
@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
@ManfredSteyer
@ManfredSteyer Your Bundler Native Federation
@ManfredSteyer Demo
@ManfredSteyer Strategic Design (DDD) Eventing Separate Ways Inner Sourcing Coupling
@ManfredSteyer Event Storming
@ManfredSteyer Naming Conventions iframes Import Maps Script Loaders (SystemJS) Federation
Separate Ways Technical Conflicts
@ManfredSteyer Starterkits Utility Libs Meta Frameworks Automated Tests Developer Survey
Complexity
@ManfredSteyer However, … Many of these Strategies make sense even
without Micro Frontends! Strategic Design (DDD) Design Systems Starterkits and Libs Getting Dev Feedback …
@ManfredSteyer Costs of Micro Frontends
@ManfredSteyer Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team
2 Stream-aligned team … XaaS Flow of change
@ManfredSteyer Evaluating Options Facilitating Decisions Communicating Decisions
@ManfredSteyer Alternative
@ManfredSteyer Verticals in a Modulith Minimal Dependencies Vertical 1 Vertical
2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
@ManfredSteyer
@ManfredSteyer Nx Libs: Modularization Incremental CI/CD Build Cache Parallelization in
Builds
@ManfredSteyer Demo
@ManfredSteyer Free eBook (6th Edition) angularArchitects.io/ebook
@ManfredSteyer Conclusion It's all about Verticals! Strategic Design (DDD) Challenges
& Solutions Platform Team Alternative: Modulith You need to evaluate!
Good Fences Make Good Neighbors!
ManfredSteyer AngularArchitects.io Slides & Examples