Mikrofrontendy: Kompleksowy przewodnik po Module Federation

W stale ewoluującym świecie tworzenia stron internetowych, budowanie i utrzymywanie dużych, złożonych aplikacji frontendowych może stać się znaczącym wyzwaniem. Monolityczne frontendy, w których cała aplikacja to pojedyncza, ściśle powiązana baza kodu, często prowadzą do wolniejszych cykli rozwojowych, zwiększonego ryzyka wdrożeniowego i trudności w skalowaniu poszczególnych funkcji.

Mikrofrontendy oferują rozwiązanie, dzieląc frontend na mniejsze, niezależne i łatwe do zarządzania jednostki. To podejście architektoniczne umożliwia zespołom autonomiczną pracę, niezależne wdrożenia i wybór technologii najlepiej dopasowanych do ich specyficznych potrzeb. Jedną z najbardziej obiecujących technologii do implementacji mikrofrontendów jest Module Federation.

Czym są mikrofrontendy?

Mikrofrontendy to styl architektoniczny, w którym aplikacja frontendowa składa się z wielu mniejszych, niezależnych aplikacji frontendowych. Aplikacje te mogą być rozwijane, wdrażane i utrzymywane przez różne zespoły, przy użyciu różnych technologii i bez konieczności koordynacji w czasie budowania. Każdy mikrofrontend jest odpowiedzialny za określoną funkcję lub domenę całej aplikacji.

Kluczowe zasady mikrofrontendów:

• Niezależność technologiczna: Zespoły mogą wybrać najlepszy stos technologiczny dla swojego mikrofrontendu.
• Izolowane bazy kodu zespołów: Każdy mikrofrontend ma własną, niezależną bazę kodu, co pozwala na niezależny rozwój i wdrożenia.
• Niezależne wdrożenia: Zmiany w jednym mikrofrontendzie nie wymagają ponownego wdrożenia całej aplikacji.
• Autonomiczne zespoły: Zespoły są odpowiedzialne za swój mikrofrontend i mogą pracować niezależnie.
• Stopniowa aktualizacja: Poszczególne mikrofrontendy mogą być aktualizowane lub zastępowane bez wpływu na resztę aplikacji.

Wprowadzenie do Module Federation

Module Federation to architektura JavaScript wprowadzona w Webpack 5, która pozwala aplikacji JavaScript dynamicznie ładować kod z innej aplikacji w czasie rzeczywistym. Oznacza to, że różne aplikacje mogą udostępniać i konsumować moduły między sobą, nawet jeśli są zbudowane przy użyciu różnych technologii lub wdrożone na różnych serwerach.

Module Federation zapewnia potężny mechanizm do implementacji mikrofrontendów, umożliwiając różnym aplikacjom frontendowym udostępnianie i konsumowanie modułów między sobą. Pozwala to na płynną integrację różnych mikrofrontendów w jedno, spójne doświadczenie użytkownika.

Kluczowe korzyści z Module Federation:

• Współdzielenie kodu: Mikrofrontendy mogą współdzielić kod i komponenty, redukując duplikację i poprawiając spójność.
• Integracja w czasie rzeczywistym: Mikrofrontendy mogą być integrowane w czasie rzeczywistym, co pozwala na dynamiczną kompozycję i aktualizacje.
• Niezależne wdrożenia: Mikrofrontendy mogą być wdrażane niezależnie, bez konieczności koordynacji lub ponownego wdrażania innych aplikacji.
• Niezależność technologiczna: Mikrofrontendy mogą być budowane przy użyciu różnych technologii i nadal integrowane za pomocą Module Federation.
• Skrócony czas budowania: Dzięki współdzieleniu kodu i zależności, Module Federation może skrócić czas budowania i poprawić wydajność deweloperską.

Jak działa Module Federation

Module Federation działa poprzez zdefiniowanie dwóch typów aplikacji: host i remote. Aplikacja host to główna aplikacja, która konsumuje moduły z innych aplikacji. Aplikacja remote to aplikacja, która udostępnia moduły do konsumpcji przez inne aplikacje.

Gdy aplikacja host napotyka instrukcję importu dla modułu, który jest udostępniany przez aplikację remote, Webpack dynamicznie ładuje aplikację remote i rozwiązuje import w czasie rzeczywistym. Pozwala to aplikacji host na używanie modułu z aplikacji remote tak, jakby był częścią jej własnej bazy kodu.

Kluczowe pojęcia w Module Federation:

• Host: Aplikacja, która konsumuje moduły z aplikacji zdalnych (remote).
• Remote: Aplikacja, która udostępnia moduły do konsumpcji przez inne aplikacje.
• Udostępnione moduły (Exposed Modules): Moduły, które aplikacja remote udostępnia do konsumpcji przez inne aplikacje.
• Współdzielone moduły (Shared Modules): Moduły, które są współdzielone między aplikacjami host i remote, redukując duplikację i poprawiając wydajność.

Implementacja mikrofrontendów z Module Federation: Praktyczny przykład

Rozważmy prostą aplikację e-commerce z trzema mikrofrontendami: katalog produktów, koszyk na zakupy i profil użytkownika.

Każdy mikrofrontend jest rozwijany przez osobny zespół i wdrażany niezależnie. Katalog produktów jest zbudowany w React, koszyk w Vue.js, a profil użytkownika w Angular. Główna aplikacja działa jako host i integruje te trzy mikrofrontendy w jeden interfejs użytkownika.

Krok 1: Konfiguracja aplikacji zdalnych (Remote)

Najpierw musimy skonfigurować każdy mikrofrontend jako aplikację zdalną. Obejmuje to zdefiniowanie modułów, które będą udostępniane, oraz modułów współdzielonych, które będą używane.

Katalog produktów (React)

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'productCatalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

W tej konfiguracji udostępniamy komponent ProductList z pliku ./src/components/ProductList. Współdzielimy również moduły react i react-dom z aplikacją hosta.

Koszyk na zakupy (Vue.js)

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'shoppingCart',
      filename: 'remoteEntry.js',
      exposes: {
        './ShoppingCart': './src/components/ShoppingCart',
      },
      shared: ['vue'],
    }),
  ],
};

Tutaj udostępniamy komponent ShoppingCart i współdzielimy moduł vue.

Profil użytkownika (Angular)

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'userProfile',
      filename: 'remoteEntry.js',
      exposes: {
        './UserProfile': './src/components/UserProfile',
      },
      shared: ['@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

Udostępniamy komponent UserProfile i współdzielimy niezbędne moduły Angulara.

Krok 2: Konfiguracja aplikacji hosta

Następnie musimy skonfigurować aplikację hosta, aby konsumowała moduły udostępniane przez aplikacje zdalne. Obejmuje to zdefiniowanie aplikacji zdalnych (remotes) i zmapowanie ich do odpowiednich adresów URL.

webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'mainApp',
      remotes: {
        productCatalog: 'productCatalog@http://localhost:3001/remoteEntry.js',
        shoppingCart: 'shoppingCart@http://localhost:3002/remoteEntry.js',
        userProfile: 'userProfile@http://localhost:3003/remoteEntry.js',
      },
      shared: ['react', 'react-dom', 'vue', '@angular/core', '@angular/common', '@angular/router'],
    }),
  ],
};

W tej konfiguracji definiujemy trzy aplikacje zdalne: productCatalog, shoppingCart i userProfile. Każda z nich jest zmapowana do adresu URL swojego pliku remoteEntry.js. Współdzielimy również wspólne zależności między wszystkimi mikrofrontendami.

Krok 3: Konsumowanie modułów w aplikacji hosta

Na koniec możemy konsumować moduły udostępniane przez aplikacje zdalne w aplikacji hosta. Obejmuje to importowanie modułów za pomocą dynamicznych importów i renderowanie ich w odpowiednich miejscach.

import React, { Suspense } from 'react';
const ProductList = React.lazy(() => import('productCatalog/ProductList'));
const ShoppingCart = React.lazy(() => import('shoppingCart/ShoppingCart'));
const UserProfile = React.lazy(() => import('userProfile/UserProfile'));

function App() {
  return (
    <div>
      <h1>Aplikacja e-commerce</h1>
      <Suspense fallback={<div>Ładowanie katalogu produktów...</div>}>
        <ProductList />
      </Suspense>
      <Suspense fallback={<div>Ładowanie koszyka...</div>}>
        <ShoppingCart />
      </Suspense>
      <Suspense fallback={<div>Ładowanie profilu użytkownika...</div>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

export default App;

Używamy React.lazy i Suspense do dynamicznego ładowania modułów z aplikacji zdalnych. Zapewnia to, że moduły są ładowane tylko wtedy, gdy są potrzebne, co poprawia wydajność aplikacji.

Zaawansowane zagadnienia i najlepsze praktyki

Chociaż Module Federation dostarcza potężny mechanizm do implementacji mikrofrontendów, istnieje kilka zaawansowanych zagadnień i najlepszych praktyk, o których należy pamiętać.

Zarządzanie wersjami i kompatybilność

Podczas współdzielenia modułów między mikrofrontendami kluczowe jest zarządzanie wersjami i zapewnienie kompatybilności. Różne mikrofrontendy mogą mieć różne zależności lub wymagać różnych wersji współdzielonych modułów. Używanie wersjonowania semantycznego i staranne zarządzanie współdzielonymi zależnościami może pomóc uniknąć konfliktów i zapewnić, że mikrofrontendy będą ze sobą płynnie współpracować.

Rozważ narzędzia takie jak `@module-federation/automatic-vendor-federation`, aby pomóc zautomatyzować proces zarządzania współdzielonymi zależnościami.

Zarządzanie stanem

Współdzielenie stanu między mikrofrontendami może być wyzwaniem. Różne mikrofrontendy mogą mieć różne rozwiązania do zarządzania stanem lub wymagać różnego dostępu do współdzielonego stanu. Istnieje kilka podejść do zarządzania stanem w architekturze mikrofrontendowej, w tym:

• Biblioteki do współdzielonego stanu: Używanie biblioteki do współdzielonego stanu, takiej jak Redux czy Zustand, do zarządzania globalnym stanem.
• Niestandardowe zdarzenia (Custom Events): Używanie niestandardowych zdarzeń do komunikowania zmian stanu między mikrofrontendami.
• Stan oparty na URL: Kodowanie stanu w adresie URL i współdzielenie go między mikrofrontendami.

Najlepsze podejście zależy od specyficznych potrzeb aplikacji i poziomu powiązania między mikrofrontendami.

Komunikacja między mikrofrontendami

Mikrofrontendy często muszą się ze sobą komunikować, aby wymieniać dane lub wywoływać akcje. Istnieje kilka sposobów na osiągnięcie tego, w tym:

• Niestandardowe zdarzenia (Custom Events): Używanie niestandardowych zdarzeń do rozgłaszania wiadomości między mikrofrontendami.
• Współdzielone serwisy: Tworzenie współdzielonych serwisów, do których mają dostęp wszystkie mikrofrontendy.
• Kolejki wiadomości: Używanie kolejki wiadomości do asynchronicznej komunikacji między mikrofrontendami.

Wybór odpowiedniego mechanizmu komunikacji zależy od złożoności interakcji i pożądanego poziomu oddzielenia między mikrofrontendami.

Kwestie bezpieczeństwa

Przy implementacji mikrofrontendów ważne jest, aby wziąć pod uwagę implikacje bezpieczeństwa. Każdy mikrofrontend powinien być odpowiedzialny za swoje własne bezpieczeństwo, w tym uwierzytelnianie, autoryzację i walidację danych. Współdzielenie kodu i danych między mikrofrontendami powinno odbywać się w sposób bezpieczny i z odpowiednimi kontrolami dostępu.

Zapewnij odpowiednią walidację i sanityzację danych wejściowych, aby zapobiegać podatnościom na ataki typu cross-site scripting (XSS). Regularnie aktualizuj zależności, aby łatać luki w zabezpieczeniach.

Testowanie i monitorowanie

Testowanie i monitorowanie mikrofrontendów może być bardziej złożone niż testowanie i monitorowanie aplikacji monolitycznych. Każdy mikrofrontend powinien być testowany niezależnie, a testy integracyjne powinny być przeprowadzane, aby upewnić się, że mikrofrontendy działają razem poprawnie. Monitorowanie powinno być wdrożone w celu śledzenia wydajności i stanu każdego mikrofrontendu.

Zaimplementuj testy end-to-end, które obejmują wiele mikrofrontendów, aby zapewnić płynne doświadczenie użytkownika. Monitoruj metryki wydajności aplikacji, aby zidentyfikować wąskie gardła i obszary do poprawy.

Module Federation a inne podejścia do mikrofrontendów

Chociaż Module Federation jest potężnym narzędziem do budowania mikrofrontendów, nie jest to jedyne dostępne podejście. Inne popularne podejścia do mikrofrontendów obejmują:

• Integracja w czasie budowania: Integracja mikrofrontendów w czasie budowania za pomocą narzędzi takich jak Webpack czy Parcel.
• Integracja w czasie rzeczywistym z iframe'ami: Osadzanie mikrofrontendów w elementach iframe.
• Web Components: Używanie Web Components do tworzenia reużywalnych elementów UI, które mogą być współdzielone między mikrofrontendami.
• Single-SPA: Używanie frameworka takiego jak Single-SPA do zarządzania routingiem i orkiestracją mikrofrontendów.

Każde podejście ma swoje zalety i wady, a najlepsze zależy od specyficznych potrzeb aplikacji.

Module Federation a iframes

Iframes zapewniają silną izolację, ale mogą być kłopotliwe w zarządzaniu i negatywnie wpływać na wydajność z powodu narzutu każdego iframe'a. Komunikacja między iframe'ami również może być złożona.

Module Federation oferuje bardziej płynną integrację z lepszą wydajnością i łatwiejszą komunikacją między mikrofrontendami. Wymaga jednak starannego zarządzania współdzielonymi zależnościami i wersjami.

Module Federation a Single-SPA

Single-SPA to meta-framework, który zapewnia zunifikowane podejście do zarządzania i orkiestracji mikrofrontendów. Oferuje funkcje takie jak współdzielony kontekst, routing i zarządzanie stanem.

Module Federation może być używane w połączeniu z Single-SPA, aby zapewnić elastyczną i skalowalną architekturę do budowania złożonych aplikacji mikrofrontendowych.

Przypadki użycia Module Federation

Module Federation jest dobrze dopasowane do różnych przypadków użycia, w tym:

• Duże aplikacje korporacyjne: Budowanie i utrzymywanie dużych, złożonych aplikacji korporacyjnych z wieloma zespołami.
• Platformy e-commerce: Tworzenie modułowych i skalowalnych platform e-commerce z niezależnymi funkcjami, takimi jak katalogi produktów, koszyki na zakupy i procesy płatności.
• Systemy zarządzania treścią (CMS): Rozwijanie elastycznych i rozszerzalnych platform CMS z konfigurowalnymi modułami treści.
• Pulpity nawigacyjne i platformy analityczne: Budowanie interaktywnych pulpitów nawigacyjnych i platform analitycznych z niezależnymi widżetami i wizualizacjami.

Na przykład, rozważmy globalną firmę e-commerce taką jak Amazon. Mogliby użyć Module Federation do podziału swojej strony internetowej na mniejsze, niezależne mikrofrontendy, takie jak strony produktów, koszyk, proces płatności i sekcja zarządzania kontem użytkownika. Każdy z tych mikrofrontendów mógłby być rozwijany i wdrażany przez osobne zespoły, co pozwoliłoby na szybsze cykle rozwojowe i zwiększoną zwinność. Mogliby używać różnych technologii dla każdego mikrofrontendu, na przykład Reacta dla stron produktów, Vue.js dla koszyka i Angulara dla procesu płatności. Pozwala im to wykorzystać mocne strony każdej technologii i wybrać najlepsze narzędzie do zadania.

Innym przykładem jest międzynarodowy bank. Mógłby on użyć Module Federation do zbudowania platformy bankowej dostosowanej do specyficznych potrzeb każdego regionu. Mógłby mieć różne mikrofrontendy dla każdego regionu, z funkcjami specyficznymi dla regulacji bankowych i preferencji klientów danego regionu. Pozwala im to zapewnić bardziej spersonalizowane i adekwatne doświadczenie dla swoich klientów.

Podsumowanie

Module Federation oferuje potężne i elastyczne podejście do budowania mikrofrontendów. Umożliwia zespołom niezależną pracę, niezależne wdrożenia i wybór technologii najlepiej dopasowanych do ich potrzeb. Dzięki współdzieleniu kodu i zależności, Module Federation może skrócić czas budowania, poprawić wydajność i uprościć proces deweloperski.

Chociaż Module Federation ma swoje wyzwania, takie jak zarządzanie wersjami i stanem, można im sprostać dzięki starannemu planowaniu i użyciu odpowiednich narzędzi i technik. Postępując zgodnie z najlepszymi praktykami i biorąc pod uwagę zaawansowane zagadnienia omówione w tym przewodniku, można z powodzeniem wdrożyć mikrofrontendy z Module Federation i budować skalowalne, łatwe w utrzymaniu i niezależne aplikacje frontendowe.

W miarę jak krajobraz tworzenia stron internetowych wciąż ewoluuje, mikrofrontendy stają się coraz ważniejszym wzorcem architektonicznym. Module Federation stanowi solidną podstawę do budowania mikrofrontendów i jest cennym narzędziem dla każdego dewelopera frontendowego, który chce tworzyć nowoczesne, skalowalne aplikacje internetowe.