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
890
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
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
24
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
98
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
190
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
460
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
870
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
520
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
30
Other Decks in Programming
See All in Programming
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
220
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
420
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
120
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
540
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
200
体得しよう!RSA暗号の原理と解読
laysakura
3
510
プログラミング教育のコスパの話
superkinoko
0
110
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
510
Functional APIから再考するLangGraphを使う理由
os1ma
5
640
requirements with math
moony
0
510
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
11
3.4k
JavaOne 2025: Advancing Java Profiling
jbachorik
1
300
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
How to Ace a Technical Interview
jacobian
276
23k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
How GitHub (no longer) Works
holman
314
140k
Building Applications with DynamoDB
mza
94
6.3k
Designing Experiences People Love
moore
140
23k
Docker and Python
trallard
44
3.3k
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