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
September 19, 2024
Programming
0
52
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
Manfred Steyer
PRO
September 19, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA 2024 in Mainz
manfredsteyer
PRO
0
12
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
Successful with Signals: 3 Patterns for Your Architecture
manfredsteyer
PRO
0
74
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
320
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
260
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
1
260
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
200
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
120
Other Decks in Programming
See All in Programming
Some more adventure of Happy Eyeballs
coe401_
2
190
Patched fetch did not work
quramy
4
380
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Featured
See All Featured
Designing for Performance
lara
604
68k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Statistics for Hackers
jakevdp
794
220k
Six Lessons from altMBA
skipperchong
26
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The Mythical Team-Month
searls
218
43k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
GraphQLとの向き合い方2022年版
quramy
43
13k
Raft: Consensus for Rubyists
vanstee
135
6.5k
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