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
6 Things You Should Know About MicroFrontends @...
Search
Manfred Steyer
PRO
June 23, 2020
Programming
1
930
6 Things You Should Know About MicroFrontends @ngCopenhagen, Juni 2020
Manfred Steyer
PRO
June 23, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
170
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
520
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
380
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
130
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
180
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
330
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
220
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
190
Other Decks in Programming
See All in Programming
kiroでゲームを作ってみた
iriikeita
0
150
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
820
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
400
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.5k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
440
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.7k
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
9
2k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
560
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
250
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
280
JetBrainsのAI機能の紹介 #jjug
yusuke
0
190
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
580
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
It's Worth the Effort
3n
185
28k
Balancing Empowerment & Direction
lara
1
540
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Writing Fast Ruby
sferik
628
62k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Transcript
@ManfredSteyer ManfredSteyer 6 Things You Should Know About Micro Frontends
Manfred Steyer, ANGULARarchitects.io Angular Copenhagen
@ManfredSteyer Do you remember her? Bonnie Barstow, PhD
@ManfredSteyer Software Engineering is a Team Sport
@ManfredSteyer Coordination b/w Teams
@ManfredSteyer Monolith Flight System
@ManfredSteyer Booking Service Check-in Service Boarding Service Luggage Service Microservices
Sub-Domains (DDD)
@ManfredSteyer Booking App Check-in App Boarding App Luggage App Microfrontends
@ManfredSteyer Lots of Questions …
@ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io (Remote) Angular Workshops and
Consulting Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
@ManfredSteyer How to implement Microfrontends? ?
@ManfredSteyer Several Options • Hyperlink-Integration • Loading Web Components into
your index.html • Loading separate SPAs into your index.html • Loading separately compiled Angular Modules • Webpack 5 Module Federation
@ManfredSteyer DEMO: Webpack 5 Module Federation
@ManfredSteyer How To Identify Good Sub-Domains and hence Microfrontends?
@ManfredSteyer Request Product Specify Order Approve Order Send Order Budget
Hierarchy Employee IT-Expert Manager Buying Agent Product Organizational boundaries like departments or different domain experts Different models or same entities w/ different meaning
@ManfredSteyer "Right" Domain Size Should mirror a real-world domain Large
enough: Most use cases don't overlap domains Small enough: One team per domain
@ManfredSteyer Domain Driven Design gives a lot of advice! Also
see blog at: http://angulararchitects.io
@ManfredSteyer Monorepo or Polyrepo?
@ManfredSteyer Catalog Approval Shared Feature Feature Feature Feature Feature …
… … … … … … … … @ManfredSteyer Catalog App Approval App Option 1: One Monorepo w/ several Domains
@ManfredSteyer Consequences Easy to share code Decoupling b/w domains: Conventions
or Tools (Linting) Easy to enforce one version policy Different technologies: possible
@ManfredSteyer Catalog Approval Shared Feature Feature Feature Feature Feature …
… … … … … … … … @ManfredSteyer Catalog App Approval App Option 2: One Repo per Domains Publish shared libs seperately via npm
@ManfredSteyer Consequences Enforces decoupling b/w domains Allows different versions (good
or bad?) Allows different technologies Needs lots of automation Sharing Code via npm and versioning might be a pain
@ManfredSteyer Recommentation, if you are not sure Start with a
monorepo Enforce decoupling via linting Reconsider splitting into several repos later
@ManfredSteyer Pro Tip: Tooling for Monorepos https://nrwl.io/nx
@ManfredSteyer Communication
@ManfredSteyer Communication is a Trade-Off Decoupled Sub-Domains Communication b/w Sub-Domains
@ManfredSteyer Ideas As little as possible! Messaging/ Eventing: Loosly Coupling
Trigger a (Domain) Event Don't expect an answer!
@ManfredSteyer Very Simple Message Bus @Injectable({ providedIn: 'root' }) export
class MessageBus { events$ = new ReplaySubject<DomainEvent>(1); }
@ManfredSteyer Also Consider: Server-Side Messaging µService µFrontend µService µFrontend µService
µFrontend
@ManfredSteyer Redux for Communication?
@ManfredSteyer Well … Don't directly share state b/w sub-domains (coupling!)
You might use Redux for eventing (like a Message Bus)
@ManfredSteyer Sharing Widgets
@ManfredSteyer Sharing Widgets is a Trade-Off too Decoupled Sub-Domains Shared
Widgets Prevent duplicate code (DRY) Separate Ways
@ManfredSteyer Recommentation Technical Widgets (e. g. Design System): Sharing ok
Use Case-specific widgets: Try to avoid (coupling!)
@ManfredSteyer You can't have both: Decoupling and DRY ! Know
your Architecture Goals!
@ManfredSteyer Good Message: Very often, Separate Ways DOES NOT mean
duplicate code!
@ManfredSteyer Catalog Approval Bounded Context Ubiquitous Language
@ManfredSteyer Bounded Context per Sub-Domain Also see blog at: http://angulararchitects.io
@ManfredSteyer Web Components
@ManfredSteyer Web Components can be useful, esp. if you have
to mix several technologies
@ManfredSteyer Shadow DOM helps to isolate styles (emulated by default
in Angular)
@ManfredSteyer Also, lazy loading separately deployed web components is easy
@ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Macro-Architecture
Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
@ManfredSteyer Authentication and Authorization
@ManfredSteyer Possibilities HTTP Only Cookie: Tunnel through one origin (+XSRF
Token) Token via Header: Different origins (consider OAuth2/OIDC) • Share token via message bus or session storage
@ManfredSteyer Microservice per Microfrontend?
@ManfredSteyer Recommendation: Verticals µService µFrontend µService µFrontend µService µFrontend
@ManfredSteyer Backend for Frontend (BFF) BFF µFrontend BFF µFrontend BFF
µFrontend µServices µServices µServices µServices
@ManfredSteyer Nevertheless, try this approach if possible! µService µFrontend µService
µFrontend µService µFrontend
@ManfredSteyer Dashboards
@ManfredSteyer Dashboard: Special Forces Decoupled Sub-Domains Dashboard Data and widgets
from each subdomain
@ManfredSteyer Approaches Dashboard loads widgets from each sub-domain • Flexibility
• Needs stable contracts • Agreements on common look and feel • Lots HTTP Calls Dashboard as a own sub-domain • Pros and Cons are inversed
@ManfredSteyer Backend for Frontend (BFF) Dashboard µBFF Dashboard µFrontend BFF
µFrontend BFF µFrontend µServices µServices µServices µServices Messaging
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Challenge
@ManfredSteyer ngx-Snake MIT License Credits: Samir Hodzic
@ManfredSteyer DEMO
@ManfredSteyer Conclusion Main Purpose of µFrontends: Scaling Teams Decoupling Federation:
Import From Other App Know Your Domain! Communication & Sharing → Trade-off Monorepo vs. Polyrepo
@ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides
& Examples Remote Company Workshops and Consulting