Czym jest MicroFrontend? Jedna aplikacja wykorzystująca jednocześnie Angulara, Reacta i Vue

Żyjemy w czasach, gdzie rozbudowane projekty często wymagają pracy wielu zespołów, a elastyczność i skalowalność to klucz do sukcesu – Microfrontend staje się coraz popularniejszym podejściem w architekturze front-endu. Ale czym dokładnie jest microfrontend oraz jakie ma wady i zalety?

Czym są MicroFrontendy?

Microfrontend to podejście w tworzeniu aplikacji webowych, które przenosi koncepcję mikroserwisów na front-end. Umożliwia budowanie interfejsów użytkownika z niezależnych modułów. Każdy mikrofrontend może być tworzony i zarządzany przez różne zespoły, a nawet z wykorzystaniem różnych frameworków. Do dobrego zrozumienia jak wygląda techniczna strona tworzenia architektury dobrze jest zajrzeć do jednego z naszych repozytoriów na githubie: Przejdź do przykładowego projektu na GitHubie

Przykład aplikacji - CHRONOS

Nasza aplikacja demonstacyjna CHRONOS to prosta i elegancka aplikacja do odliczania czasu do różnych wydarzeń, wykorzystująca cyfrowy zegar. Została stworzona w celu dobrego zagłębienia się w temat.

Do tworzenia tego typu aplikacji można wykorzystać kilka frameworków w naszej aplikacji CHRONOS użyliśmy

• dwóch różnych wersji Angulara,
• Reacta,
• Vue.

Oczywiście przydało się tu również narzędzie które to wszystko "poskleja", aby wszystko działało. W naszym wypadku było to narzędzie Single SPA które oferuje bardzo dobrą dokumentację w celu wdrożenia Microfrontendu

Zarządzanie stanem

Pomimo że architektura microfrontendów daje ogromną elastyczność i niezależność, zarządzanie stanem globalnym w takim środowisku potrafi być… trudne. Dlaczego? Bo mamy do czynienia z wieloma aplikacjami, często tworzonymi w różnych frameworkach, działającymi równolegle w jednej przestrzeni.

W naszym projekcie postawiliśmy na proste, ale skuteczne rozwiązanie – Local Storage. Dlaczego?

• Bo główny stan aplikacji jest potrzebny głównie podczas przełączania między ekranami.
• Nie ma potrzeby budowania skomplikowanej infrastruktury, jeśli aplikacje nie komunikują się ze sobą jednocześnie na jednym ekranie.

Ale co jeśli kilka mikrofrontendów działa w tym samym czasie i muszą się ze sobą komunikować?

👉 Wtedy świetnie sprawdzają się zdarzenia JavaScriptowe!

DispatchEvent W JavaScripcie

Jeśli potrzebujesz dynamicznej komunikacji między mikrofrontendami – możesz wykorzystać CustomEvent i dispatchEvent. To proste, framework-agnostyczne rozwiązanie, które działa w każdej aplikacji, niezależnie czy to Vue, React czy Angular.

📦 Wysłanie zdarzenia:

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

📬 Odbieranie zdarzenia:

// Mikrofrontend B – nasłuchuje na zmiany
window.addEventListener("userUpdated", (e) => {
  const user = e.detail;
  console.log("Dane użytkownika:", user);
});

Oczywiście istnieją inne sposoby na komunikację pomiędzy pomniejszymi aplikacjami. Jest to dobrze opisane na przykładzie Single SPA pod tym linkiem: https://single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications

Jest tam m.in. przykład jak możemy użyć do komunikacji RxJS'a

Nawigacja i routing

Do przejścia na inny ekran/podstronę możemy skorzystać z kilku sposobów (w przypadku Single SPA)

Możemy użyć klasycznego elementu 'a', ale obsłużyć kliknięcie za pomocą singleSpaNavigate(event):

<a href="/new-url" onclick="singleSpaNavigate(event)">My link</a>

Dla bardziej dynamicznych przypadków (np. kliknięcia przycisku) możemy użyć singleSpa.navigateToUrl():

// Bezpośrednia nawigacja do ścieżki
singleSpa.navigateToUrl('/new-url');
 
// Lub pobierając element linku
singleSpa.navigateToUrl(document.querySelector('a'));
 
// Możemy też podpiąć handler do dowolnego elementu
document.querySelector('a').addEventListener('click', singleSpa.navigateToUrl);

A jak wygląda definicja ścieżek? Definiujemy je w jednym z pliku do poprawnego skonfigurowania całej architektury.

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

✅ Zalety Microfrontendów

• Można rozwijać i wdrażać moduły niezależnie

• Zespoły pracują równolegle bez przeszkadzania sobie

• Możliwość użycia różnych technologii (np. React i Vue razem)

❌ Wady Microfrontendów

• Więcej konfiguracji jak i pracy szczególnie na początku

• Możliwe problemy z wydajnością (np. duplikacja bibliotek)

• Trudniejsza komunikacja między modułami

• Bardziej złożone testowanie i CI/CD

Czy więc MicroFrontend to dobry wybór? Niestety w większosci przypadków będzie to zły wybór - MicroFrontend to dosyć zaawansowana architektura i może przysporzyć dużo problemów z konfiguracją. Ponadto często zwyczajnie aplikację nie potrzebują aby były dzielone na mniejsze moduły z różnymi frameworkami.

Inne narzędzia - module federation i... iframe?

Oczywiście Single SPA to nie jedyne narzędzie do budowy architektury mikrofrontendowej. Najprostrzym (choć nie najwydajniejszym) sposobem na implementację tego rozwiązania są iframy. Używamy tam postMessage() do komunikacji. Inne ciekawe narzędzia to m.in. Frint lub module federation - plugin do webpacka.

Jesteś zaciekawiony tematem? Napisz do nas! Lubimy dzielić się pasją do tworzenia nowoczesnych aplikacji!