W 2024 roku nie ma chyba tematu, kt\u00f3ry wywo\u0142ywa\u0142by tyle emocji w\u015br\u00f3d architekt\u00f3w frontendu co micro-frontend<\/strong>. Z jednej strony obietnica niezale\u017cnych zespo\u0142\u00f3w, skalowania i szybszych release’\u00f3w. Z drugiej \u2013 koszmar integracji, spadki wydajno\u015bci i frustracja developer\u00f3w. Wiele firm rzuca si\u0119 na t\u0119 architektur\u0119 jak na wybawienie, nie zdaj\u0105c sobie sprawy, \u017ce to nie srebrna kula, tylko komplet r\u00f3\u017cnych narz\u0119dzi, kt\u00f3re trzeba umiej\u0119tnie posk\u0142ada\u0107.<\/p>\n W JurskiTech widzieli\u015bmy projekty, kt\u00f3re dzi\u0119ki micro-frontendom rozkwit\u0142y \u2013 i takie, kt\u00f3re wdro\u017cy\u0142y je na si\u0142\u0119 i wyl\u0105dowa\u0142y na mieli\u017anie. Dzisiaj opowiem o trzech b\u0142\u0119dach, kt\u00f3re najcz\u0119\u015bciej dziel\u0105 zespo\u0142y i powoduj\u0105, \u017ce zamiast przyspieszenia, wdro\u017cenia staj\u0105 si\u0119 koszmarem. Je\u015bli my\u015blisz o micro-frontendach lub ju\u017c je wdra\u017casz, ten tekst mo\u017ce uratowa\u0107 Tw\u00f3j zesp\u00f3\u0142 przed wieloma tygodniami frustracji.<\/p>\n Zanim przejdziemy do b\u0142\u0119d\u00f3w, warto przypomnie\u0107, o czym m\u00f3wimy. Micro-frontend to architektura, w kt\u00f3rej interfejs u\u017cytkownika dzielony jest na niezale\u017cne cz\u0119\u015bci, rozwijane i wdra\u017cane oddzielnie \u2013 cz\u0119sto przez r\u00f3\u017cne zespo\u0142y. Ka\u017cda \u201emikro-aplikacja\u201d mo\u017ce mie\u0107 w\u0142asny framework, w\u0142asny cykl \u017cycia i w\u0142asny spos\u00f3b deployu. Ca\u0142o\u015b\u0107 scalana jest na poziomie przegl\u0105darki, zazwyczaj za pomoc\u0105 technik takich jak Module Federation, single-spa czy po prostu przez iframe’y.<\/p>\n Na papierze brzmi kusz\u0105co: zesp\u00f3\u0142 A robi koszyk, zesp\u00f3\u0142 B robi stron\u0119 produktu, zesp\u00f3\u0142 C odpowiada za p\u0142atno\u015bci. Ka\u017cdy pracuje w swoim rytmie, wdra\u017ca niezale\u017cnie i nie musi czeka\u0107 na innych. Brzmi jak marzenie ka\u017cdego CTO. Ale rzeczywisto\u015b\u0107 bywa inna \u2013 g\u0142\u00f3wnie dlatego, \u017ce techniki te s\u0105 stosunkowo m\u0142ode i cz\u0119sto u\u017cywane s\u0105 bez g\u0142\u0119bszego zrozumienia konsekwencji.<\/p>\n Z naszego do\u015bwiadczenia wynika, \u017ce mikro-frontendy nie s\u0105 rozwi\u0105zaniem dla ka\u017cdego<\/strong>, a ich wdro\u017cenie wymaga dojrza\u0142o\u015bci organizacyjnej i technicznej. Cz\u0119sto widzimy firmy, kt\u00f3re zaimplementowa\u0142y mikro-frontendy, bo \u201etak robi\u0105 w du\u017cych korporacjach\u201d, a potem borykaj\u0105 si\u0119 z problemami, kt\u00f3rych wcze\u015bniej nie mia\u0142y.<\/p>\n Pierwszy kardynalny b\u0142\u0105d to za\u0142o\u017cenie, \u017ce micro-frontendy rozwi\u0105\u017c\u0105 wszystkie problemy ze skalowaniem i organizacj\u0105 pracy. To nie jest technologia, kt\u00f3r\u0105 mo\u017cna wdro\u017cy\u0107 \u201ebo si\u0119 nale\u017cy\u201d. To decyzja architektoniczna, kt\u00f3ra wymaga analizy koszt\u00f3w i korzy\u015bci w konkretnym kontek\u015bcie biznesowym.<\/p>\n Zauwa\u017cyli\u015bmy, \u017ce mikro-frontendy naprawd\u0119 sprawdzaj\u0105 si\u0119 w firmach, kt\u00f3re maj\u0105:<\/p>\n W takim scenariuszu mikro-frontendy pozwalaj\u0105 na realn\u0105 niezale\u017cno\u015b\u0107. Widzieli\u015bmy firmy, w kt\u00f3rych koszyk mo\u017cna wdra\u017ca\u0107 kilka razy dziennie, a strona g\u0142\u00f3wna tylko raz w tygodniu \u2013 i to dzia\u0142a.<\/p>\n Problem zaczyna si\u0119, gdy mikro-frontendy wdra\u017ca si\u0119 w projekcie, kt\u00f3ry jest \u015bredniej wielko\u015bci, a zesp\u00f3\u0142 nie ma do\u015bwiadczenia w zarz\u0105dzaniu z\u0142o\u017cono\u015bci\u0105. Nagle okazuje si\u0119, \u017ce trzeba utrzymywa\u0107 kilka repozytori\u00f3w, konfigurowa\u0107 integracj\u0119 i dba\u0107 o sp\u00f3jno\u015b\u0107 UX. To generuje ogromny narzut, kt\u00f3rego wcze\u015bniej nie by\u0142o.<\/p>\n Przyk\u0142ad z naszego podw\u00f3rka: klient przyszed\u0142 do nas z pro\u015bb\u0105 o pomoc w \u201eusprawnieniu\u201d ich monolitu, kt\u00f3ry dzia\u0142a\u0142 poprawnie, ale powoli si\u0119 rozwija\u0142. Zesp\u00f3\u0142 (8 os\u00f3b) my\u015bla\u0142, \u017ce micro-frontendy to naturalny krok. Po analizie okaza\u0142o si\u0119, \u017ce ich problemem nie by\u0142a architektura, ale brak test\u00f3w i d\u0142ug technologiczny. Ostatecznie zrezygnowali\u015bmy z micro-frontend\u00f3w, bo koszty wdro\u017cenia przewy\u017csza\u0142y korzy\u015bci. Zamiast tego uporz\u0105dkowali\u015bmy monolit i dodali\u015bmy testy \u2013 i to rozwi\u0105za\u0142o 80% problem\u00f3w.<\/p>\n Wniosek<\/strong>: zanim zdecydujesz si\u0119 na micro-frontendy, zr\u00f3b audyt swojego projektu. Je\u015bli masz jeden zesp\u00f3\u0142 i niezbyt skomplikowany produkt \u2013 nie potrzebujesz tej architektury. Je\u015bli masz wiele zespo\u0142\u00f3w i skomplikowany system \u2013 to dopiero wtedy warto rozwa\u017cy\u0107.<\/p>\n Drugi, cz\u0119sty b\u0142\u0105d to wdro\u017cenie mikro-frontend\u00f3w bez ustanowienia platformy wsp\u00f3\u0142dzielonej. Gdy ka\u017cdy zesp\u00f3\u0142 rozwija w\u0142asne komponenty, style i biblioteki, szybko powstaje chaos. U\u017cytkownicy widz\u0105 r\u00f3\u017cne przyciski, r\u00f3\u017cne czcionki i niesp\u00f3jne zachowania. Deweloperzy musz\u0105 konfigurowa\u0107 integracje, kt\u00f3re z ka\u017cd\u0105 zmian\u0105 staj\u0105 si\u0119 coraz trudniejsze.<\/p>\n W JurskiTech zawsze podkre\u015blamy, \u017ce mikro-frontend nie oznacza \u201ewolnej amerykanki\u201d. Aby to dzia\u0142a\u0142o, potrzebny jest wsp\u00f3lny design system i biblioteka komponent\u00f3w. Ka\u017cdy zesp\u00f3\u0142 powinien korzysta\u0107 z tych samych element\u00f3w UI, a r\u00f3\u017cnice powinny dotyczy\u0107 wy\u0142\u0105cznie logiki biznesowej.<\/p>\n Przyk\u0142ad z \u017cycia: w jednym z projekt\u00f3w, nad kt\u00f3rym pracowali\u015bmy, zespo\u0142y u\u017cywa\u0142y r\u00f3\u017cnych wersji biblioteki do styl\u00f3w. Jeden zesp\u00f3\u0142 u\u017cywa\u0142 Bootstrapa, inny Tailwinda, a trzeci pisa\u0142 w\u0142asny CSS. Efekt? Strona wygl\u0105da\u0142a jak zlepka r\u00f3\u017cnych epok, a u\u017cytkownicy zg\u0142aszali problemy z u\u017cyteczno\u015bci\u0105. Dopiero wprowadzenie wsp\u00f3lnego design systemu (opartego na naszych komponentach) uporz\u0105dkowa\u0142o sytuacj\u0119.<\/p>\n Kolejny aspekt to komunikacja mi\u0119dzy aplikacjami. Bez dobrze zdefiniowanych interfejs\u00f3w (na przyk\u0142ad za pomoc\u0105 Custom Events lub wsp\u00f3lnego store’a) zespo\u0142y albo dubluj\u0105 logik\u0119, albo uzale\u017cniaj\u0105 si\u0119 od siebie. Wtedy mikro-frontendy przestaj\u0105 by\u0107 niezale\u017cne i staj\u0105 si\u0119 r\u00f3wnie powi\u0105zane jak monolit \u2013 tylko trudniejsze w utrzymaniu.<\/p>\n Wniosek<\/strong>: zdefiniuj wsp\u00f3lny standard: design system, bibliotek\u0119 komponent\u00f3w, spos\u00f3b komunikacji. To fundament, na kt\u00f3rym dopiero mo\u017cesz budowa\u0107 niezale\u017cno\u015b\u0107.<\/p>\n Trzeci b\u0142\u0105d to bagatelizowanie wp\u0142ywu mikro-frontend\u00f3w na wydajno\u015b\u0107 i do\u015bwiadczenie u\u017cytkownika. Cz\u0119sto zespo\u0142y skupiaj\u0105 si\u0119 na aspektach technicznych, a zapominaj\u0105, \u017ce klient ko\u0144cowy widzi tylko efekt: jak szybko \u0142aduje si\u0119 strona i jak sp\u00f3jnie dzia\u0142a.<\/p>\n Wszystkie mikro-frontendy musz\u0105 zosta\u0107 pobrane i wykonane. Je\u015bli nie zadbasz o odpowiednie dzielenie kodu i lazy loading, mo\u017cesz sko\u0144czy\u0107 z ogromnym polifilem, kt\u00f3ry spowolni pierwsz\u0105 wizyt\u0119. Przyk\u0142ad: jeden z naszych klient\u00f3w narzeka\u0142 na spadek konwersji po wdro\u017ceniu mikro-frontend\u00f3w. Analiza pokaza\u0142a, \u017ce ich strona \u0142adowa\u0142a si\u0119 o 3 sekundy d\u0142u\u017cej, bo ka\u017cdy modu\u0142 pobiera\u0142 w\u0142asn\u0105 wersj\u0119 biblioteki jQuery. Wsp\u00f3\u0142dzielenie zale\u017cno\u015bci rozwi\u0105za\u0142o problem.<\/p>\n U\u017cytkownicy nie wiedz\u0105, \u017ce strona sk\u0142ada si\u0119 z wielu niezale\u017cnych cz\u0119\u015bci \u2013 oni widz\u0105 ca\u0142o\u015b\u0107. Je\u015bli w jednym module przycisk \u201eDodaj do koszyka\u201d jest zielony, a w innym niebieski, to wygl\u0105da to jak b\u0142\u0105d. Je\u015bli po zalogowaniu w module koszyka wy\u015bwietla si\u0119 inna nazwa u\u017cytkownika ni\u017c w module produktu, to u\u017cytkownik traci zaufanie.<\/p>\n Wniosek<\/strong>: projektuj\u0105c mikro-frontendy, zawsze my\u015bl o UX ca\u0142o\u015bciowo. Regularnie testuj na poziomie integracji, a nie tylko poszczeg\u00f3lnych modu\u0142\u00f3w. Zadbaj o performance \u2013 mierz Core Web Vitals i optymalizuj wsp\u00f3\u0142dzielone zale\u017cno\u015bci.<\/p>\n Mimo tych pu\u0142apek, mikro-frontendy mog\u0105 by\u0107 \u015bwietnym rozwi\u0105zaniem, je\u015bli podejdzie si\u0119 do nich z g\u0142ow\u0105. Oto nasze sprawdzone podej\u015bcie:<\/p>\n Odpowiedz sobie na pytania: czy mamy wiele zespo\u0142\u00f3w? Czy modu\u0142y s\u0105 faktycznie niezale\u017cne? Czy wdro\u017cenie przyniesie wymierne korzy\u015bci (szybsze release’y, lepsze skalowanie)? Je\u015bli nie ma jasnych odpowiedzi \u2013 nie warto ryzykowa\u0107.<\/p>\n Zadbaj o wsp\u00f3lny design system, bibliotek\u0119 komponent\u00f3w i standardy komunikacji. To nie jest opcjonalne \u2013 to konieczno\u015b\u0107. Je\u015bli nie masz na to zasob\u00f3w, to kolejny argument przeciwko mikro-frontendom.<\/p>\n Zdecyduj, kt\u00f3re biblioteki b\u0119d\u0105 wsp\u00f3lne, a kt\u00f3re mog\u0105 by\u0107 niezale\u017cne. U\u017cywaj narz\u0119dzi takich jak Module Federation do efektywnego wsp\u00f3\u0142dzielenia kodu. Monitoruj rozmiar bundla i dbaj o lazy loading.<\/p>\n Nie wystarczy testowa\u0107 poszczeg\u00f3lnych mikro-aplikacji. Musisz mie\u0107 testy, kt\u00f3re sprawdzaj\u0105, czy ca\u0142o\u015b\u0107 dzia\u0142a razem, czy nie ma konflikt\u00f3w styl\u00f3w i czy API komunikuj\u0105 si\u0119 poprawnie.<\/p>\n Mikro-frontendy to rozproszony system. Musisz wiedzie\u0107, gdzie s\u0105 b\u0142\u0119dy, jak d\u0142ugo \u0142aduj\u0105 si\u0119 poszczeg\u00f3lne modu\u0142y i czy nie ma spadk\u00f3w wydajno\u015bci. U\u017cywaj narz\u0119dzi do monitorowania frontendu, np. Sentry, LogRocket, czy RUM (Real User Monitoring).<\/p>\n Micro-frontendy to pot\u0119\u017cne narz\u0119dzie, ale nie rozwi\u0105zanie uniwersalne. W JurskiTech wdra\u017camy je tylko wtedy, gdy widzimy realn\u0105 potrzeb\u0119 \u2013 gdy organizacja jest na to gotowa. Cz\u0119sto powtarzamy naszym klientom: architektura ma s\u0142u\u017cy\u0107 biznesowi, a nie odwrotnie<\/strong>. Je\u015bli wdro\u017cysz mikro-frontendy bez przemy\u015blenia, mo\u017cesz dosta\u0107 dok\u0142adnie odwrotny efekt: podzielony zesp\u00f3\u0142, wolniejsze wdro\u017cenia i pogorszenie UX.<\/p>\n Zanim podejmiesz decyzj\u0119, porozmawiaj ze swoim zespo\u0142em, zr\u00f3b research i rozwa\u017c alternatywy. Je\u015bli potrzebujesz wsparcia w ocenie, czy mikro-frontendy to dobry kierunek dla Twojej firmy \u2013 ch\u0119tnie pomo\u017cemy. Znamy si\u0119 na tym nie tylko od strony teoretycznej, ale i praktycznej.<\/p>\n A je\u015bli ju\u017c jeste\u015b w trakcie wdro\u017cenia i widzisz te b\u0142\u0119dy u siebie \u2013 nie panikuj. Wiele z nich da si\u0119 naprawi\u0107. Najwa\u017cniejsze to zda\u0107 sobie spraw\u0119, \u017ce mikro-frontend to nie wy\u015bcig, tylko podr\u00f3\u017c. Warto w ni\u0105 wyruszy\u0107 z planem, a nie z nadziej\u0105.<\/p>\n Masz pytania? Podziel si\u0119 w komentarzu \u2013 ch\u0119tnie poznam Twoje do\u015bwiadczenia z mikro-frontendami.<\/p>\n","protected":false},"excerpt":{"rendered":" Micro-frontend: 3 b\u0142\u0119dy, kt\u00f3re dziel\u0105 Tw\u00f3j zesp\u00f3\u0142 i spowalniaj\u0105 wdro\u017cenia W 2024 roku nie ma chyba tematu, kt\u00f3ry wywo\u0142ywa\u0142by tyle emocji w\u015br\u00f3d architekt\u00f3w frontendu co micro-frontend. Z jednej strony obietnica niezale\u017cnych zespo\u0142\u00f3w, skalowania i szybszych release’\u00f3w. Z drugiej \u2013 koszmar integracji, spadki wydajno\u015bci i frustracja developer\u00f3w. Wiele firm rzuca si\u0119 na t\u0119 architektur\u0119 jak 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,510,417,1115,1071],"class_list":["post-2946","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-architektura-frontendu","tag-micro-frontend-2","tag-skalowanie-aplikacji","tag-wydajnosc-wdrozen","tag-zespol-developerski"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2946","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=2946"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2946\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Czym w\u0142a\u015bciwie s\u0105 micro-frontendy? (i dlaczego wci\u0105\u017c budz\u0105 kontrowersje?)<\/h2>\n
B\u0142\u0105d 1: Traktowanie micro-frontend\u00f3w jak \u201ez\u0142otego \u015brodka\u201d na wszystko<\/h2>\n
Kiedy micro-frontendy maj\u0105 sens?<\/h3>\n
\n
Kiedy to pu\u0142apka?<\/h3>\n
B\u0142\u0105d 2: Brak wsp\u00f3lnych standard\u00f3w i wsp\u00f3\u0142dzielonych komponent\u00f3w<\/h2>\n
Rola design systemu i biblioteki komponent\u00f3w<\/h3>\n
Komunikacja mi\u0119dzy mikro-frontendami<\/h3>\n
B\u0142\u0105d 3: Ignorowanie wydajno\u015bci i UX \u2013 sp\u00f3jno\u015b\u0107 ponad wszystko<\/h2>\n
Problemy z \u0142adowaniem wielu bundle’\u00f3w<\/h3>\n
Sp\u00f3jno\u015b\u0107 wizualna i funkcjonalna<\/h3>\n
Jak wdro\u017cy\u0107 mikro-frontendy dobrze? Praktyczne wskaz\u00f3wki<\/h2>\n
1. Zacznij od analizy potrzeb biznesowych<\/h3>\n
2. Zainwestuj w fundamenty<\/h3>\n
3. Ustal jasne zasady wsp\u00f3\u0142dzielenia zale\u017cno\u015bci<\/h3>\n
4. Zaplanuj testy na poziomie integracji<\/h3>\n
5. Zadbaj o obserwowalno\u015b\u0107<\/h3>\n
Podsumowanie: mikro-frontendy tak, ale z g\u0142ow\u0105<\/h2>\n