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
75
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
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
46
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
4
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
89
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
86
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
50
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
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
160
Other Decks in Programming
See All in Programming
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Realtime API 入門
riofujimon
0
130
macOS でできる リアルタイム動画像処理
biacco42
8
2.2k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
260
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
役立つログに取り組もう
irof
28
9.2k
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
330
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
1.9k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
380
色々なIaCツールを実際に触って比較してみる
iriikeita
0
310
C#/.NETのこれまでのふりかえり
tomokusaba
1
180
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
420
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Code Reviewing Like a Champion
maltzj
520
39k
Navigating Team Friction
lara
183
14k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
BBQ
matthewcrist
85
9.3k
Designing for Performance
lara
604
68k
Ruby is Unlike a Banana
tanoku
96
11k
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