Tomasz Ducin
independent consultant, architect, developer, trainer, speaker #architecture #performance #javascript #typescript #react #angular
When MicroFrontends Architecture Goes Wrong
Tomasz Ducin • ducin.dev • Bottega IT Minds
When MicroFrontends Architecture Goes Wrong
Tomasz Ducin • ducin.dev • Bottega IT Minds
Hi, I'm Tomasz
Independent Consultant & Software Architect
Trainer, Speaker, Frontend & Backend
Bottega IT Minds, ArchitekturaNaFroncie.pl (ANF)
Developer Jutra (.pl)
Warsaw, PL
Agenda
-
PO CO?
-
Conway, TT, DORA
-
-
podobieństwa/różnice z mikro usługami
-
client-side vs server-side compositio
-
jak, co i po co mierzyć
-
jak zepsuć MFE: nieudane wdrożenia
Jak zepsuć? 📸
- niepewne zyski
- dużo współdzielenia
- rozrośnięta biblioteka komponentów UI
- granularne paczki (wydłużenie buildów)
- brak pomiarów liczby/częstotliwości wdrożeń
- brak pomiartów CWV (szczególnie: LCP)
Disclaimer
NIE JESTEM SPRZEDAWCĄ TECHNOLOGII 😉
Architektura - czyli CO?
Architektura - czyli PO CO?
👉 PO CO > CO & JAK 👈
MikroSerwisy
-
niezależność wdrożeń / awarii
-
skalowalność / wydajność
MikroFrontendy
-
niezależność wdrożeń / awarii
-
i tyle... :)
Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure.
- Melvin Conway
MicroServices and MicroFrontends are technical solutions to people problems.
- someone
🤨
Sociotechnical Systems:
Socio: people, work culture, roles, relations
Tech: infrastructure, software, processes
MFE case study
BRANŻA: ITIL
- akwizycje firm z podobnym portfolio
- potrzeba połączenia produktów w 1
- różne kultury pracy, masa zespołów
- różne frameworki
Stream-aligned Team
Platform Team
Enabling Team
Complicated SubSystem Team
Stream-aligned:
-
cele BIZNESOWE
-
ownership
-
autonomia
MFE case study: jak zepsuć?
BRANŻA: KSIĘGOWOŚĆ
- 1 zespół ogarnia pewną całość
- dzielenie jest nieuzasadnione
MFE case study: jak NIE zepsuć?
BRANŻA: E-COMMERCE
- zrównoleglanie prac
- zależności między zespołami
- osobne priorytety biznesowe zespołów
- to wszystko bardzo realne problemy
Mierzyć: co i po co?
DF: Deployment Frequency
CLT: Change Lead Time
MFE: Kiedy?
PRZED MFE
- zmierz liczbę wdrożeń (DF)
- analiza procesu wdrożeniowego:
- ile ma kroków?
- ile stron zaangażowanych?
- jak się ww. zmieni po przejściu na MFE?
- cel MFE:
- skrócić proces wdrożeniowy (1 modułu/apki) i/lub
- mniej kroków
- przyspieszenie TTM
- (autonomia zespołów)
Czy moja organizacja jest gotowa na powierzenie zespołom ownershipu? 🤔
MFE: Architektura
MFE: Client-Side Composition
Lazy Loading + Separate Builds
Tradeoffy i ryzyka
- 1 framework, czy wiele?
- 1 framework: 1 wersja, czy wiele?
- Rozmiary bundli vs współdzielenie kodu
- LCP: Largest Contentful Paint (metryka)
- Złożoność
MFE: jak zepsuć
CZĘSTO ZMIENIAĆ/WDRAŻAĆ HOSTA
SSR: Server-Side Rendering
SSR: Server-Side Composition
MFE: Island Architecture
MFE case study
BRANŻA: E-COMMERCE
jaki problem rozwiązujemy? 🤔
MFE: jak zepsuć?
Monolith-First
MFE: jak zepsuć?
-
współdziel stan między mikrofrontendami
- globalny store, np. redux
- współdzielony przez referencję
- BRAK autonomii zmian
- BRAK autonomii technologii
- autonomia zmian
- autonomia technologii
- autonomia zmian
- BRAK autonomii technologii
Decoupling?
Decoupling? Eventy!
interface MessageBroker {
publish(topic, event): void;
subscribe(topic, subscribeFn): void;
unsubscribe(topic, subscribeFn): void;
}MFE: jak zepsuć?
-
stwórz ogromną bibliotekę komponentów
-
a czym jest w ogóle "biblioteka komponentów"?
🤔 Jak często WDRAŻASZ: bibliotekę komp. vs brokera?
MFE: jak zepsuć?
-
współdziel ile się da, jak najwięcej!
MFE: jak zepsuć?
-
często wdrażaj HOST APP
MFE: jak zepsuć?
-
wydłuż pipeline, np. dużo granularnych pakietów
📦
📦
📦
📦
📦
📦
📦
📦
📦
📦
📦
📦
Jak zepsuć?
- niepewne zyski
- dużo współdzielenia
- rozrośnięta biblioteka komponentów UI
- granularne paczki (wydłużenie buildów)
- brak pomiarów liczby/częstotliwości wdrożeń
- brak pomiartów CWV (szczególnie: LCP)
👉 PO CO > CO + JAK 👈
Thank you
Tomasz Ducin • ducin.dev
Copy of Copy of When MicroFrontends Architecture Goes Wrong
By Tomasz Ducin
