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
23
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
Manfred Steyer
PRO
November 13, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
81
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
11
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
94
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
78
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
91
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
52
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
350
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
280
Other Decks in Programming
See All in Programming
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
2.4k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
受け取る人から提供する人になるということ
little_rubyist
0
180
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
Tauriでネイティブアプリを作りたい
tsucchinoko
0
350
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.1k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.6k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
600
Ethereum_.pdf
nekomatu
0
370
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
280
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Side Projects
sachag
452
42k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
360
Code Reviewing Like a Champion
maltzj
520
39k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
Optimizing for Happiness
mojombo
376
69k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
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