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, Challe...
Search
Manfred Steyer
PRO
November 07, 2024
Programming
0
250
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
Manfred Steyer
PRO
November 07, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
340
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
240
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
95
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
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
95
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
150
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
560
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
96
34k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.1k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
650
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.7k
ニーリーにおけるプロダクトエンジニア
nealle
0
890
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
940
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Thoughts on Productivity
jonyablonski
69
4.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
For a Future-Friendly Web
brad_frost
179
9.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Code Review Best Practice
trishagee
69
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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