Wielu z nas zna to uczucie: aplikacja ro\u015bnie, zesp\u00f3\u0142 si\u0119 powi\u0119ksza, a pojedynczy repozytorium frontendu staje si\u0119 polem bitwy. Ka\u017cda zmiana w jednym module wymaga synchronizacji ca\u0142ego zespo\u0142u, testy regresyjne trwaj\u0105 wieczno\u015b\u0107, a deployment potrafi zablokowa\u0107 prac\u0119 kilku osobom. Brzmi znajomo? Wtedy w naturalny spos\u00f3b pojawia si\u0119 my\u015bl: „A gdyby tak podzieli\u0107 frontend na mniejsze, niezale\u017cne cz\u0119\u015bci?” Tak narodzi\u0142a si\u0119 koncepcja micro frontend\u00f3w.<\/p>\n
W ostatnich latach micro frontend sta\u0142 si\u0119 jednym z gor\u0119tszych temat\u00f3w w architekturze frontendowej. Podobnie jak mikroserwisy po stronie backendu, micro frontend obiecuje niezale\u017cno\u015b\u0107 zespo\u0142\u00f3w, szybsze wdro\u017cenia i \u0142atwiejsze skalowanie. Ale czy to rozwi\u0105zanie rzeczywi\u015bcie jest dla ka\u017cdego? A mo\u017ce w wielu przypadkach przynosi wi\u0119cej problem\u00f3w ni\u017c korzy\u015bci?<\/p>\n
W tym artykule przyjrz\u0119 si\u0119 trzem typowym b\u0142\u0119dom, kt\u00f3re pope\u0142niaj\u0105 firmy wdra\u017caj\u0105ce micro frontend, i opowiem, kiedy warto po niego si\u0119gn\u0105\u0107, a kiedy lepiej trzyma\u0107 si\u0119 sprawdzonego monoliutu.<\/p>\n
Jedn\u0105 z najwi\u0119kszych pu\u0142apek micro frontend\u00f3w jest zbyt agresywny podzia\u0142 aplikacji. Znam firm\u0119, kt\u00f3ra podzieli\u0142a swoj\u0105 platform\u0119 e-commerce na 15 niezale\u017cnych frontend\u00f3w: osobny dla koszyka, osobny dla listy produkt\u00f3w, osobny dla p\u0142atno\u015bci, a nawet osobny dla nag\u0142\u00f3wka. Brzmi ambitnie, ale w praktyce ka\u017cdy z tych komponent\u00f3w wymaga\u0142 w\u0142asnego zestawu narz\u0119dzi, w\u0142asnego pipeline\u2019a CI\/CD i w\u0142asnego sposobu komunikacji. Zamiast przyspieszy\u0107, procesy zwolni\u0142y \u2013 programi\u015bci sp\u0119dzali wi\u0119cej czasu na konfiguracji ni\u017c na pisaniu kodu.<\/p>\n
Zasada jest prosta: mikroserwisy i micro frontend maj\u0105 sens, gdy granice biznesowe s\u0105 jasno okre\u015blone. Je\u015bli nie potrafisz narysowa\u0107 granic swoich modu\u0142\u00f3w na serwetce, prawdopodobnie nie s\u0105 one gotowe na separacj\u0119. Lepiej zacz\u0105\u0107 od jednego, dw\u00f3ch wyra\u017anie odseparowanych fragment\u00f3w (np. panel administracyjny jako osobny micro frontend) i stopniowo rozszerza\u0107.<\/p>\n
Co wi\u0119cej, nadmiar niezale\u017cnych frontend\u00f3w mo\u017ce prowadzi\u0107 do problem\u00f3w z UX. Ka\u017cdy micro frontend mo\u017ce mie\u0107 w\u0142asny system projektowy, w\u0142asne biblioteki UI i w\u0142asne zachowania \u2013 u\u017cytkownik ko\u0144cowy odczuje to jako niesp\u00f3jno\u015b\u0107. W ekstremalnych przypadkach przej\u015bcie mi\u0119dzy sekcjami aplikacji mo\u017ce sprawia\u0107 wra\u017cenie przeskakiwania mi\u0119dzy r\u00f3\u017cnymi stronami. Dlatego wa\u017cne jest zachowanie sp\u00f3jno\u015bci wizualnej i behawioralnej, co cz\u0119sto wymaga dodatkowej pracy nad Design Systemem.<\/p>\n
Drugim cz\u0119stym b\u0142\u0119dem jest \u017ale zaprojektowana komunikacja pomi\u0119dzy micro frontendami. Czy to przez zdarzenia globalne, wsp\u00f3\u0142dzielony stan czy bezpo\u015brednie importy \u2013 ka\u017cda z tych metod niesie ryzyko. Opowiem o przypadku z w\u0142asnej praktyki.<\/p>\n
Klient zdecydowa\u0142 si\u0119 na podzia\u0142 aplikacji SaaS na trzy micro frontendy: dashboard, raporty i ustawienia. Ka\u017cdy z nich by\u0142 niezale\u017cny, ale wszystkie wymaga\u0142y dost\u0119pu do danych u\u017cytkownika. Zesp\u00f3\u0142 postanowi\u0142, \u017ce dane b\u0119d\u0105 przekazywane przez wsp\u00f3\u0142dzielony globalny obiekt (window). Pocz\u0105tkowo dzia\u0142a\u0142o dobrze, ale gdy aplikacja zacz\u0119\u0142a si\u0119 rozrasta\u0107, pojawi\u0142y si\u0119 problemy z synchronizacj\u0105 \u2013 r\u00f3\u017cne komponenty modyfikowa\u0142y ten sam stan w nieprzewidywalnej kolejno\u015bci. Debugowanie zamieni\u0142o si\u0119 w koszmar.<\/p>\n
Lepszym rozwi\u0105zaniem jest korzystanie z dedykowanego systemu event\u00f3w lub wzorca \u201eshell application\u201d, kt\u00f3ra po\u015bredniczy w komunikacji. Mo\u017cna te\u017c u\u017cy\u0107 bibliotek typu Single SPA, kt\u00f3re dostarczaj\u0105 sprawdzone mechanizmy. Ale najwa\u017cniejsze: ka\u017cdy micro frontend powinien by\u0107 mo\u017cliwie samodzielny i komunikowa\u0107 si\u0119 z innymi tylko wtedy, gdy to absolutnie konieczne. Im mniej zale\u017cno\u015bci, tym \u0142atwiej.<\/p>\n
Dodatkowo, pami\u0119taj o wydajno\u015bci. Ka\u017cdy micro frontend cz\u0119sto \u0142aduje osobny bundle z JavaScriptem, co mo\u017ce prowadzi\u0107 do wi\u0119kszego rozmiaru strony i wolniejszego czasu \u0142adowania. Optymalizacja wsp\u00f3\u0142dzielonych bibliotek i lazy loading to podstawa.<\/p>\n
Trzeci b\u0142\u0105d to niedoszacowanie koszt\u00f3w infrastruktury i utrzymania. Micro frontend to nie tylko zmiana w kodzie, to zmiana w ca\u0142ym procesie wytwarzania. Ka\u017cdy niezale\u017cny frontend potrzebuje w\u0142asnego pipeline\u2019a CI\/CD, monitoringu, logowania, zarz\u0105dzania wersjami i cz\u0119sto osobnego \u015brodowiska. W jednej z firm, kt\u00f3re wspiera\u0142em, zesp\u00f3\u0142 DevOps sp\u0119dza\u0142 30% czasu na utrzymaniu infrastruktury pod micro frontendy \u2013 zamiast pracowa\u0107 nad rozwojem.<\/p>\n
Dla ma\u0142ego zespo\u0142u (np. 2-3 programist\u00f3w) micro frontend jest zwykle przerostem formy nad tre\u015bci\u0105. Koszt narz\u0119dzi, konfiguracji i utrzymania przewy\u017csza korzy\u015bci z niezale\u017cnych wdro\u017ce\u0144. W takich przypadkach lepiej postawi\u0107 na modu\u0142ow\u0105 struktur\u0119 w ramach jednego repozytorium (monorepo) z dobrze zaprojektowanymi granicami modu\u0142\u00f3w i narz\u0119dziami do zarz\u0105dzania zale\u017cno\u015bciami.<\/p>\n
Co wi\u0119cej, micro frontend cz\u0119sto wymaga zmiany kultury pracy. Zespo\u0142y musz\u0105 by\u0107 samoorganizuj\u0105ce si\u0119, odpowiedzialne za sw\u00f3j komponent od A do Z, i gotowe do cz\u0119stej komunikacji mi\u0119dzy sob\u0105. Je\u015bli w firmie brakuje dojrza\u0142o\u015bci w zakresie DevOps i CI\/CD, najpierw warto zainwestowa\u0107 w te obszary, zanim p\u00f3jdzie si\u0119 w kierunku dekompozycji frontendu.<\/p>\n
Micro frontend to pot\u0119\u017cne narz\u0119dzie, ale nie jest srebrn\u0105 kul\u0105. Sprawdza si\u0119 w du\u017cych, rozproszonych zespo\u0142ach, gdzie ka\u017cdy zesp\u00f3\u0142 odpowiada za odr\u0119bny fragment biznesowy i ma autonomi\u0119 w wyborze technologii. Dla mniejszych firm mo\u017ce by\u0107 \u017ar\u00f3d\u0142em dodatkowego chaosu i koszt\u00f3w.<\/p>\n
Zanim zdecydujesz si\u0119 na podzia\u0142 frontendu:<\/p>\n
Pami\u0119taj, \u017ce dobrze zaprojektowany monolit z modu\u0142ow\u0105 struktur\u0105 cz\u0119sto wystarczy na d\u0142ugo i jest prostszy w utrzymaniu. Kluczem nie jest technologia, ale \u015bwiadomy wyb\u00f3r dopasowany do potrzeb Twojej firmy.<\/p>\n
Potrzebujesz pomocy w ocenie, czy micro frontend ma sens w Twoim projekcie? Ch\u0119tnie podyskutujemy.<\/p>\n","protected":false},"excerpt":{"rendered":"
Wprowadzenie Wielu z nas zna to uczucie: aplikacja ro\u015bnie, zesp\u00f3\u0142 si\u0119 powi\u0119ksza, a pojedynczy repozytorium frontendu staje si\u0119 polem bitwy. Ka\u017cda zmiana w jednym module wymaga synchronizacji ca\u0142ego zespo\u0142u, testy regresyjne trwaj\u0105 wieczno\u015b\u0107, a deployment potrafi zablokowa\u0107 prac\u0119 kilku osobom. Brzmi znajomo? Wtedy w naturalny spos\u00f3b pojawia si\u0119 my\u015bl: „A gdyby tak podzieli\u0107 frontend na<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[265,379,9,510,336],"class_list":["post-1725","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-architektura-frontendu","tag-globalne-skalowanie","tag-jurskitech","tag-micro-frontend-2","tag-modern-web-development"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1725"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1725\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}