0Pricing
React Academy · Lekcja

Koncepcje mikrofrontendów i kompromisy

Poznanie powodów, dla których zespoły wybierają mikrofrontendy, oraz podejść do podziału w czasie działania i budowania.

Koncepcje mikrofrontendów i kompromisy to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym są mikrofrontendy

Mikrofrontendy przenoszą koncepcję mikrousług na warstwę interfejsu użytkownika. Pojedyncza aplikacja internetowa jest dzielona na niezależnie zarządzane, rozwijane i wdrażane części frontendu, za które odpowiadają odrębne zespoły.

Strategie integracji

Istnieją trzy główne strategie integracji: podczas budowania (pakiety npm), po stronie serwera (kompozycja na brzegu sieci) oraz w czasie działania (Module Federation, iframe’y i web components).

Integracja podczas budowania

Współdzielone komponenty należy publikować jako pakiety npm. To proste rozwiązanie, ale każda zmiana wymaga ponownego wydania i wdrożenia wszystkich użytkowników — nie zapewnia więc prawdziwie niezależnego wdrażania.

// Team A publishes:
npm publish @company/design-system

// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independent

Integracja w czasie działania za pomocą Module Federation

Webpack 5 Module Federation pozwala jednej aplikacji (host) ładować komponenty z innej aplikacji (remote) w czasie działania — zapewniając prawdziwie niezależne wdrażanie.

Integracja za pomocą iframe

Mikrofrontendy można osadzać w elementach iframe, aby zapewnić maksymalną izolację. Zalety: brak konfliktów CSS/JS. Wady: słabe wrażenia użytkownika (przewijanie, fokus, rozmiary), trudne współdzielenie stanu i niekorzystny wpływ na SEO.

Web Components

Każdy mikrofrontend można opakować we własny element niestandardowy. Rozwiązanie działa z dowolnym frameworkiem i zapewnia natywną izolację, ale nie oferuje funkcji specyficznych dla Reacta, takich jak współdzielenie kontekstu.

// Remote team builds:
customElements.define('product-detail', ProductDetailElement);

// Host team embeds:
<product-detail product-id="123" />

Kompromisy: zalety

Niezależne wdrażanie (wdrażanie interfejsu jednego zespołu bez ingerowania w pracę innych), autonomia zespołów (możliwość wyboru własnego stosu technologicznego i zależności) oraz skalowalność (zespoły mogą pracować równolegle bez konfliktów w kodzie).

Kompromisy: koszty

Złożoność operacyjna (więcej repozytoriów, potoków CI i wdrożeń), duplikowanie pakietów (wielokrotne ładowanie Reacta bez współdzielenia), narzut wydajnościowy oraz trudniejsze debugowanie na granicach aplikacji.

Kiedy wybrać mikrofrontendy

Mikrofrontendy są najbardziej wartościowe w przypadku wielu dużych zespołów pracujących nad tym samym produktem, różnych stosów technologicznych dla różnych sekcji lub potrzeby całkowicie niezależnego wdrażania poszczególnych sekcji.

Kiedy NIE wybierać mikrofrontendów

Należy ich unikać w małych zespołach (narzut przewyższa korzyści), w prostych aplikacjach lub wtedy, gdy mają Państwo pełną kontrolę nad całym frontendem — monorepozytoria z Nx/Turborepo zwykle w zupełności wystarczają.

Współdzielony system projektowy

Niezależnie od strategii integracji współdzielony system projektowy (opublikowany jako pakiet lub udostępniony przez Module Federation) zapewnia spójność wizualną mikrofrontendów.

Szybki test

Jakie podejście do integracji umożliwia prawdziwie niezależne wdrażanie mikrofrontendów w czasie działania?

Podsumowanie

Mikrofrontendy dzielą interfejs użytkownika, zapewniając autonomię zespołów i niezależne wdrażanie. Dostępne opcje integracji obejmują pakiety npm (proste, ale niezależne wdrażanie nie jest możliwe) oraz Module Federation (integracja w czasie działania, zapewniająca prawdziwą niezależność). Należy uwzględnić koszty operacyjne — mikrofrontendy sprawdzają się w dużych produktach rozwijanych przez wiele zespołów, ale zwiększają złożoność mniejszych projektów.

Często zadawane pytania

Czy lekcja „Koncepcje mikrofrontendów i kompromisy” jest bezpłatna?

Tak — pełny tekst „Koncepcje mikrofrontendów i kompromisy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Koncepcje mikrofrontendów i kompromisy”?

Poznanie powodów, dla których zespoły wybierają mikrofrontendy, oraz podejść do podziału w czasie działania i budowania. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Koncepcje mikrofrontendów i kompromisy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Koncepcje mikrofrontendów i kompromisy
  2. Module Federation z Webpack 5
  3. Współdzielony stan i routing między MFE
  4. Niezależne wdrażanie i potoki CI dla MFE
← Powrót do React Academy