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
910
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
73
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
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
89
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
97
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
150
Team operations that are not burdened by SRE
kazatohiei
1
270
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
580
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
520
C++20 射影変換
faithandbrave
0
550
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
XP, Testing and ninja testing
m_seki
3
210
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A Tale of Four Properties
chriscoyier
160
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Scaling GitHub
holman
459
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Done Done
chrislema
184
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Code Reviewing Like a Champion
maltzj
524
40k
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