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 @ngCopenhagen, Juni 2020
Search
Manfred Steyer
PRO
June 23, 2020
Programming
1
800
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
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
5
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
80
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
78
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
410
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110
Other Decks in Programming
See All in Programming
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
300
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
Ruby Function Composition
bkuhlmann
1
330
Git Lint
bkuhlmann
4
750
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
470
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
PHPはいつから死んでいるかの調査
chiroruxx
1
390
Git Rebase
bkuhlmann
11
1.6k
Hanami and htmx
bkuhlmann
0
210
Rethinking UI building strategies @ SFI 2024
letelete
0
270
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
A better future with KSS
kneath
231
16k
Statistics for Hackers
jakevdp
789
220k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Producing Creativity
orderedlist
PRO
337
39k
Docker and Python
trallard
34
2.7k
Unsuck your backbone
ammeep
663
57k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Embracing the Ebb and Flow
colly
80
4.1k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
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