Platforma Vue z około 28 aplikacjami, rozwijana od 2021 roku
Kontekst
To platforma B2B2C zbudowana dla firmy cateringowej w Niemczech. Od 2021 roku prowadzę zespół frontendowy pracujący nad tym produktem. Platforma rozrosła się do ekosystemu około 28 aplikacji Vue uruchamianych pod single-spa, wykorzystujących w różnych miejscach GraphQL, REST i SignalR.
Najciekawsza nie jest sama liczba aplikacji. Ważniejsze jest to, że ta sama platforma rozwija się już od ponad pięciu lat. Decyzje architektoniczne, które miały sens na początku, musiały nadal działać, gdy rosły produkt, zespół i liczba aplikacji.
Jak aplikacje współpracują ze sobą
Mikrofrontendy komunikują się przez szynę zdarzeń zbudowaną na
window.dispatchEvent. Jest ona opakowana w dedykowany pakiet SDK,
z którego korzystają wszystkie aplikacje. Dzięki temu cała platforma ma jeden
spójny interfejs komunikacji pomiędzy mikrofrontendami.
System łączy również kilka sposobów komunikacji z backendem i wymiany danych: GraphQL przez Apollo, API REST oraz SignalR do aktualizacji w czasie rzeczywistym. Przy około 28 aplikacjach utrzymanie tych mechanizmów w sposób przewidywalny jest jednym z ciągłych wyzwań architektonicznych.
Co zbudowałem i czym kierowałem
- Zespół frontendowy. Prowadzę zespół odpowiedzialny za mikrofrontendy Vue i otaczającą je architekturę frontendową. Obejmuje to zarówno codzienne decyzje techniczne, jak i mentoring developerów oraz dbanie o to, żeby architektura była zrozumiała dla całego zespołu.
- Wspólna biblioteka komponentów. Zaprojektowałem i wdrożyłem bibliotekę komponentów Vue w Storybooku. Daje ona aplikacjom wspólną implementację powtarzalnych wzorców UI, ogranicza duplikowanie pracy i pomaga utrzymać spójny interfejs całej platformy.
- Izolowane środowiska developerskie. Za pomocą Dockera i Kubernetesa przygotowywałem odizolowane środowiska dla developerów zamiast zmuszać ich do pracy na jednym wspólnym środowisku. Dzięki temu można było pracować nad zmianami niezależnie, bez wzajemnego blokowania.
- CI/CD. Wspólnie z zespołem DevOps pracowałem nad pipeline'ami CI/CD w Azure dla ekosystemu mikrofrontendów, tak aby niezależne wdrażanie aplikacji było praktyczne również przy tej skali.
Co zaczyna być trudne przy tej skali
Jedna aplikacja frontendowa jest przede wszystkim problemem programistycznym. Około 28 aplikacji, które razem tworzą jeden produkt, to również problem koordynacji. Drobne niespójności w nazewnictwie, komunikacji, zależnościach czy wzorcach UI potrafią bardzo szybko rozprzestrzenić się po całym systemie.
Dlatego platforma opiera się na wspólnych kontraktach, współdzielonej infrastrukturze i zasadach, które ułatwiają podążanie wspólną ścieżką. Celem nie jest centralizowanie każdej decyzji. Chodzi o to, żeby decyzje wpływające na wszystkie aplikacje były jawne, a zespoły nadal miały swobodę w codziennej pracy.
Jest to szczególnie ważne, gdy platforma rozwija się przez wiele lat. Architektura musi być zrozumiała również dla developerów, którzy nie byli obecni przy jej początkowym projektowaniu.
Co wydarzyło się na tej platformie poza samą architekturą
Przez lata pracy nad tym systemem pojawiły się również problemy, które wykraczały poza samą architekturę mikrofrontendów.
Jedno duże przepisanie aplikacji na Vue 3 okazało się problemem wydajnościowym, jeszcze zanim trafiło na produkcję. Prześledziłem kaskady requestów, zduplikowaną pracę i nieefektywny przepływ danych, a następnie przebudowałem warstwę danych oraz mechanizm inwalidacji przy aktualizacjach real-time. Całą historię opisuję w case study o ratowaniu wydajności.
W innym przypadku nietypowo wysoki przewidywany koszt usługi tłumaczeniowej w chmurze doprowadził mnie do prześledzenia tysięcy niepotrzebnych requestów w środowisku developerskim. Wprowadzona na tej podstawie zmiana ograniczyła liczbę płatnych wywołań API o 99,9%. Ten przypadek opisuję w case study o kosztach tłumaczeń.
Czego nauczyła mnie ta platforma
Mikrofrontendy łatwo pokazać na proof of concept. Ciekawsza część zaczyna się później, kiedy system musi działać przez kolejne lata i rosnąć razem z liczbą aplikacji, developerów i zmian.
Praca nad tą samą platformą od 2021 roku dała mi doświadczenie właśnie w tej części: wyznaczaniu granic, utrzymywaniu wspólnej infrastruktury, wspieraniu niezależnego wdrażania oraz rozwiązywaniu problemów wydajnościowych i operacyjnych, które pojawiają się wraz ze skalą systemu.
Dlatego pracę nad mikrofrontendami zaczynam od problemu, który ta architektura ma rozwiązać. Mój sposób podejścia do takich projektów opisuję na stronie usługi mikrofrontendy.
Stack
Vue 3, single-spa, TypeScript, GraphQL (Apollo), SignalR, Tailwind CSS, Storybook, Docker, Kubernetes, Azure CI/CD.