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
Architektura MikroFrontendowa
- Lekcje z Produkcji
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)
soon: Developer Jutra (.pl)
Warsaw, PL
Agenda
-
cele architektury
-
technikalia
-
client-side composition
-
server-side composition
-
niuanse architektoniczne
-
-
jak zepsuć: nieudane wdrożenia
-
jak NIE zepsuć: udane wdrożenia
-
jak, co i po co mierzyć
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
Implementations:
-
Strangler Pattern
-
Web Components
-
Webpack Module Federation
-
iFrames
-
Custom Frameworks
Approach: Strangler Pattern
Implementation: Web Components
Implementation: iFrame
// (HOST)
new ModuleFederationPlugin({
name: "shell",
remotes: {
mfe1: "mfe1@http://host1/remoteEntry.js",
mfe2: "mfe2@http://host2/remoteEntry.js",
},
}),// (REMOTE)
new ModuleFederationPlugin({
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
"./MyComp": "./src/components/MyComp",
},
}),// (HOST)
new ModuleFederationPlugin({
name: "shell",
remotes: {
mfe1: "mfe1@http://host1/remoteEntry.js",
mfe2: "mfe2@http://host2/remoteEntry.js",
},
}),// (REMOTE)
new ModuleFederationPlugin({
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
"./MyComp": "./src/components/MyComp",
},
}),// (HOST)
new ModuleFederationPlugin({
name: "shell",
remotes: {
mfe1: "mfe1@http://host1/remoteEntry.js",
mfe2: "mfe2@http://host2/remoteEntry.js",
},
}),// (REMOTE)
new ModuleFederationPlugin({
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
"./MyComp": "./src/components/MyComp",
},
}),// (HOST)
new ModuleFederationPlugin({
name: "shell",
remotes: {
mfe1: "mfe1@http://host1/remoteEntry.js",
mfe2: "mfe2@http://host2/remoteEntry.js",
},
}),// (REMOTE)
new ModuleFederationPlugin({
name: "mfe1",
filename: "remoteEntry.js",
exposes: {
"./MyComp": "./src/components/MyComp",
},
}),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
Thank you
Tomasz Ducin • ducin.dev
Copy of When MicroFrontends Architecture Goes Wrong
By Tomasz Ducin
