Microfrontend - gdy React spotyka Angulara i Vue w jednej aplikacji

Microfrontend to podejście architektoniczne, w którym interfejs użytkownika dzielimy na mniejsze, niezależnie rozwijane części - zwane mikrofrontendami. Każdy mikrofrontend może być tworzony przez osobny zespół, a nawet w innym frameworku. Brzmi ciekawie? Zdecydowanie tak. Ale przyjrzyjmy się temu bliżej 👇

🧩 Czym jest Microfrontend?

Idea microfrontendów jest zbliżona do koncepcji mikroserwisów po stronie backendu. Zamiast jednej, monolitycznej aplikacji front-endowej, tworzymy wiele odseparowanych modułów - z których każdy odpowiada za konkretną funkcjonalność.

W przykładowej aplikacji CHRONOS połączyłem:

• dwie różne wersje Angulara,
• część napisaną w React,
• oraz komponent w Vue.

Wszystko działa razem, w jednej aplikacji - dzięki Single SPA.

Natomiast sam kod aplikacji można zobaczyć na moim Githubie

⚙️ Single SPA - klej łączący frameworki

Single SPA to narzędzie, które pozwala ładować, montować i odmontowywać wiele aplikacji front-endowych na jednej stronie. Zarządza cyklem życia mikrofrontendów i umożliwia płynne przełączanie się między nimi bez przeładowywania strony.

;<a href="/new-url" onclick="singleSpaNavigate(event)">
  Mój link
</a>

// lub programowo:
singleSpa.navigateToUrl('/new-url')

Routing definiujemy deklaratywnie:

<main>
  <route path="home">
    <application name="home-page"></application>
  </route>
  <route path="countdown-screen">
    <application name="countdown-screen"></application>
  </route>
  <route default>
    <application name="home-page"></application>
  </route>
</main>

💾 Zarządzanie stanem w architekturze Microfrontend

To jeden z trudniejszych aspektów. Kiedy łączymy kilka frameworków, zarządzanie stanem globalnym potrafi być naprawdę wymagające.

W moim projekcie demo postawiłem na prostotę - użyłem Local Storage. Dlaczego? Bo globalny stan jest potrzebny głównie przy przełączaniu ekranów, a nie do komunikacji w czasie rzeczywistym.

Ale co, jeśli kilka mikrofrontendów musi komunikować się równocześnie?

Tu z pomocą przychodzą zdarzenia JavaScriptowe.

// Mikrofrontend A - wysyła dane
const payload = { userId: 123, name: 'Piotr' }
const event = new CustomEvent('userUpdated', { detail: payload })
window.dispatchEvent(event)

// Mikrofrontend B - odbiera dane
window.addEventListener('userUpdated', (e) => {
  console.log('Dane użytkownika:', e.detail)
})

To proste, niezależne od frameworka rozwiązanie działa zarówno w React, Angularze, jak i Vue. Więcej o tym pisałem na LinkedIn 🇵🇱.

🧭 Routing i nawigacja

Do nawigacji możemy użyć klasycznych odnośników (a) z obsługą Single SPA lub zrobić to programowo:

document.querySelector('button').addEventListener('click', () => {
  singleSpa.navigateToUrl('/events-list')
})

Dzięki temu możemy płynnie przełączać się między mikrofrontendami bez przeładowywania strony.

Zalety i Wady

Zalety:

• Niezależny rozwój i wdrażanie modułów
• Możliwość pracy różnych zespołów równolegle
• Swoboda wyboru technologii (React, Vue, Angular itd.)

Wady:

• Więcej konfiguracji i pracy początkowej
• Ryzyko duplikacji bibliotek i problemów z wydajnością
• Trudniejsze testy, CI/CD i komunikacja między modułami

🧠 Podsumowanie

Microfrontendy to potężne rozwiązanie, ale nie dla każdego projektu. Sprawdzają się w dużych organizacjach i zespołach, które muszą rozwijać aplikacje równolegle. W mniejszych projektach mogą okazać się zbyt skomplikowane.

Jeśli chcesz spróbować, zacznij od Single SPA lub Module Federation (plugin do Webpacka). Ale pamiętaj - prostota często wygrywa 🧘