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
920
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
64
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
420
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
290
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
110
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
160
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
310
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
200
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
100
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
280
ソフトウェア設計とAI技術の活用
masuda220
PRO
23
6.4k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
Porting a visionOS App to Android XR
akkeylab
0
890
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
620
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
840
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
130
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
230
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.3k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
340
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Adaptive Systems
keathley
43
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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