Architektura micro frontend\u00f3w brzmi kusz\u0105co: niezale\u017cne zespo\u0142y, szybsze wdro\u017cenia, \u0142atwiejsze skalowanie. W teorii \u2013 pi\u0119kne. W praktyce \u2013 wielu programist\u00f3w i CTO przekonuje si\u0119, \u017ce dzielenie frontendu na cz\u0119\u015bci to proszenie si\u0119 o problemy z wydajno\u015bci\u0105, kt\u00f3rych nikt si\u0119 nie spodziewa\u0142. Dlaczego? Bo zapominaj\u0105, \u017ce przegl\u0105darka to nie serwer, a u\u017cytkownik nie czeka na zgranie wszystkich klock\u00f3w.<\/p>\n
W JurskiTech widzieli\u015bmy ju\u017c projekty, w kt\u00f3rych mikro frontendy zamieni\u0142y szybk\u0105 aplikacj\u0119 w wolny, rozlaz\u0142y monolit \u2013 tyle \u017ce rozproszony. Oto 3 najcz\u0119stsze b\u0142\u0119dy, kt\u00f3re widz\u0119 u klient\u00f3w i w bran\u017cy.<\/p>\n
Zespo\u0142y cz\u0119sto decyduj\u0105 si\u0119 na mikro frontendy, \u017ceby odseparowa\u0107 logik\u0119. Ale potem potrzebuj\u0105, \u017ceby dwa niezale\u017cne komponenty wymienia\u0142y dane \u2013 np. koszyk zakupowy i lista produkt\u00f3w. I tu zaczynaj\u0105 si\u0119 schody.<\/p>\n
B\u0142\u0105d:<\/strong> U\u017cywanie globalnego event busa lub wsp\u00f3\u0142dzielonego obiektu Przyk\u0142ad z \u017cycia:<\/strong> Klient z bran\u017cy e-commerce mia\u0142 osobne mikro frontendy dla wyszukiwarki, filtracji i listy produkt\u00f3w. Ka\u017cdy z nich u\u017cywa\u0142 tego samego stanu koszyka przechowywanego w Rozwi\u0105zanie:<\/strong> Zamiast wsp\u00f3\u0142dzieli\u0107 stan, u\u017cyjcie wzorca \u201ecommand pattern\u201d z dedykowanym API do komunikacji. Albo \u2013 je\u015bli to mo\u017cliwe \u2013 trzymajcie stan w jednym mikro frontendzie, a reszcie udost\u0119pniajcie tylko zdarzenia. Jeszcze lepiej: rozwa\u017ccie, czy naprawd\u0119 potrzebujecie takiego poziomu wsp\u00f3\u0142dzielenia. Czasem lepiej przeprojektowa\u0107 interfejs, \u017ceby ka\u017cdy mikro frontend by\u0142 samowystarczalny.<\/p>\n Ka\u017cdy mikro frontend to osobny pakiet JavaScript i CSS. Je\u015bli wczytujesz je wszystkie na starcie, odwiedzaj\u0105cy Twoj\u0105 stron\u0119 czeka na \u015bci\u0105gni\u0119cie megabajt\u00f3w kodu, zanim zobaczy cokolwiek. To szczeg\u00f3lnie boli na pierwszych wizytach i na wolniejszych \u0142\u0105czach.<\/p>\n B\u0142\u0105d:<\/strong> Brak podzia\u0142u na route-based chunks. Wiele framework\u00f3w do mikro frontend\u00f3w domy\u015blnie \u0142aduje wszystkie komponenty od razu. Deweloperzy cz\u0119sto nie my\u015bl\u0105 o tym, \u017ce u\u017cytkownik mo\u017ce wej\u015b\u0107 tylko na stron\u0119 g\u0142\u00f3wn\u0105, a \u015bci\u0105ga kod do panelu administracyjnego.<\/p>\n Przyk\u0142ad z \u017cycia:<\/strong> Jeden z startup\u00f3w SaaSowych wdro\u017cy\u0142 mikro frontendy z u\u017cyciem Module Federation. Ka\u017cdy zesp\u00f3\u0142 doda\u0142 sw\u00f3j modu\u0142, ale nie skonfigurowa\u0142 lazy loadingu. W efekcie strona logowania wa\u017cy\u0142a ponad 3 MB JS. Czas do interakcji (TTI) si\u0119ga\u0142 8 sekund na \u015brednim sprz\u0119cie. Potencjalni klienci rezygnowali, zanim w og\u00f3le wpisali has\u0142o.<\/p>\n Rozwi\u0105zanie:<\/strong> Wdr\u00f3\u017ccie lazy loading na poziomie routingu \u2013 ka\u017cdy mikro frontend powinien \u0142adowa\u0107 si\u0119 tylko wtedy, gdy jest potrzebny. U\u017cyjcie mechanizm\u00f3w takich jak React.lazy, dynamic imports, czy wbudowane funkcje Webpack 5. Pami\u0119tajcie te\u017c o preloadowaniu tych modu\u0142\u00f3w, kt\u00f3re s\u0105 przewidywane \u2013 np. na podstawie zachowania u\u017cytkownika.<\/p>\n Ka\u017cdy mikro frontend ma swoje style. I ka\u017cdy zesp\u00f3\u0142 pisze je po swojemu. Gdy \u0142\u0105czysz je na jednej stronie, zaczyna si\u0119 chaos: globalne klasy koliduj\u0105, selektory nadpisuj\u0105 si\u0119 nawzajem, a responsywno\u015b\u0107 nagle przestaje dzia\u0142a\u0107.<\/p>\n B\u0142\u0105d:<\/strong> U\u017cywanie globalnych arkuszy CSS lub framework\u00f3w jak Bootstrap bez scoped styles. Nawet je\u015bli u\u017cyjemy CSS Modules w ka\u017cdym module, to konflikty mog\u0105 wyst\u0105pi\u0107 na poziomie klas generowanych przez toolchain \u2013 np. gdy dwa modu\u0142y u\u017cyj\u0105 tej samej nazwy komponentu.<\/p>\n Przyk\u0142ad z \u017cycia:<\/strong> Klient z platform\u0105 edukacyjn\u0105 po\u0142\u0105czy\u0142 trzy mikro frontendy: wideo, quizy i forum. Ka\u017cdy z nich korzysta\u0142 z tego samego zestawu ikon (Font Awesome), ale r\u00f3\u017cne wersje. W przegl\u0105darkach starszych typ\u00f3w (ale jeszcze u\u017cywanych) ikony wy\u015bwietla\u0142y si\u0119 jako kwadraciki. U\u017cytkownicy my\u015bleli, \u017ce strona jest zepsuta \u2013 wska\u017anik odrzuce\u0144 wzr\u00f3s\u0142 o 15%.<\/p>\n Rozwi\u0105zanie:<\/strong> U\u017cyjcie CSS-in-JS (np. styled-components) albo przynajmniej Shadow DOM do izolacji styl\u00f3w. Ustalcie wsp\u00f3lny system design (design system) z komponentami, kt\u00f3re s\u0105 udost\u0119pniane jako wsp\u00f3\u0142dzielona biblioteka \u2013 ka\u017cdy mikro frontend korzysta z tych samych wersji. Wprowad\u017acie automatyczne testy wizualne (np. Percy, Chromatic), \u017ceby wykrywa\u0107 regresje CSS.<\/p>\n Micro frontendy to pot\u0119\u017cne narz\u0119dzie, ale tylko je\u015bli pami\u0119tasz, \u017ce to przede wszystkim in\u017cynieria, a nie magiczny proszek. Unikaj wsp\u00f3\u0142dzielenia stanu na si\u0142\u0119, zawsze wdra\u017caj lazy loading na poziomie tras i zadbaj o izolacj\u0119 oraz sp\u00f3jno\u015b\u0107 styl\u00f3w. W JurskiTech widzieli\u015bmy, \u017ce te trzy punkty potrafi\u0105 uratowa\u0107 projekt przed pora\u017ck\u0105 \u2013 a czasem wystarczy jeden audyt, \u017ceby wy\u0142apa\u0107 b\u0142\u0119dy, kt\u00f3re spowalniaj\u0105 Tw\u00f3j biznes.<\/p>\n Je\u015bli zastanawiasz si\u0119, czy Twoja aplikacja nie ma problem\u00f3w z wydajno\u015bci\u0105 po wprowadzeniu mikro frontend\u00f3w \u2013 daj zna\u0107. Sprawdzimy to w kilka godzin i powiemy, co poprawi\u0107.<\/p>\n","protected":false},"excerpt":{"rendered":" Micro Frontend: 3 b\u0142\u0119dy, kt\u00f3re rujnuj\u0105 wydajno\u015b\u0107 Twojej aplikacji Architektura micro frontend\u00f3w brzmi kusz\u0105co: niezale\u017cne zespo\u0142y, szybsze wdro\u017cenia, \u0142atwiejsze skalowanie. W teorii \u2013 pi\u0119kne. W praktyce \u2013 wielu programist\u00f3w i CTO przekonuje si\u0119, \u017ce dzielenie frontendu na cz\u0119\u015bci to proszenie si\u0119 o problemy z wydajno\u015bci\u0105, kt\u00f3rych nikt si\u0119 nie spodziewa\u0142. Dlaczego? Bo zapominaj\u0105, \u017ce przegl\u0105darka<\/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,201,510,81],"class_list":["post-2622","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-architektura-frontendu","tag-bledy-wdrozeniowe","tag-micro-frontend-2","tag-wydajnosc-aplikacji"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2622","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=2622"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2622\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}window<\/code> do synchronizacji stanu. To dzia\u0142a lokalnie, ale przy wi\u0119kszej liczbie mikro frontend\u00f3w zamienia si\u0119 w labirynt zale\u017cno\u015bci. Ka\u017cda zmiana wymaga synchronizacji, co spowalnia renderowanie i utrudnia debugowanie. Poza tym tracisz izolacj\u0119 \u2013 g\u0142\u00f3wny atut mikro frontend\u00f3w.<\/p>\nwindow<\/code>. Po kilku miesi\u0105cach dodawania funkcji okaza\u0142o si\u0119, \u017ce przy szybkim prze\u0142\u0105czaniu filtr\u00f3w koszyk aktualizuje si\u0119 z op\u00f3\u017anieniem, a czasem zawiera nieaktualne dane. U\u017cytkownicy zg\u0142aszali \u201eznikaj\u0105ce\u201d produkty.<\/p>\n2. \u0141adowanie wszystkiego naraz \u2013 czyli kosztowny brak strategii lazy loading<\/h3>\n
3. Ignorowanie skalowania CSS \u2013 czyli wojna styl\u00f3w<\/h3>\n
Podsumowanie<\/h2>\n