Czym jest i jak wykorzystać mikrofrontend

Czym właściwie jest mikrofrontend? Podejście to polega na dzieleniu złożonych aplikacji webowych na mniejsze projekty i umieszczaniu ich na stronie w elementach iframe. Iframe’y nie są jednak jedynym sposobem. Pokażemy tutaj najczęściej stosowane rozwiązania, ale na razie zbadajmy, dlaczego powinniśmy w ogóle używać mikrofrontendu.

Dlaczego używają tego firmy?

Łatwiej jest zarządzać 10 projektami po 10 osób niż jednym dużym projektem na 100 osób. Kluczową koncepcją jest tutaj skalowalność. Rozbijając duże projekty, otrzymujemy:

• Podzielone repozytoria
• Niezależny deployment
• Szybsze budowanie i wydawanie kolejnych wersji
• Autonomiczne zespoły
• Łatwiejsze debugowanie i utrzymanie

Rozbij aplikację na domeny

Wyobraź sobie, że tworzysz złożoną aplikację React do streamingu filmów. Zarządzanie nią byłoby bardzo trudne, nawet w przypadku, gdy masz wielu programistów w zespole. Z tego powodu możesz podzielić aplikację na cztery główne domeny:

• Katalog z filmami
• Odtwarzacz video
• Profil użytkownika
• Płatności za konto

Tworzysz teraz oddzielną aplikację React dla każdej domeny i używasz pewnych zasobów (takich jak iframe) do stworzenia strony, która pokazuje użytkownikowi cztery aplikacje jako jedną. Jeśli dodasz nową metodę płatności do płatności na koncie, to dokonasz re-deploymentu jedynie jej aplikacji, a nie całej witryny.

Jak to zrobić?

Iframe

Najprostszy sposób, aby zacząć: możemy użyć okna postMessage() do komunikacji między aplikacjami. Wykorzystamy to w naszym przykładzie.

Single SPA

Jest to framework do komponowania ze sobą aplikacji frontendowych. Jeśli chcesz rozpocząć prawdziwy projekt, wybierz ten poniżej:

single-spa.js.org

Frint

To kolejny framework do komponowania ze sobą aplikacji frontendowych. Bardziej elastyczny niż Single SPA, ale nowszy i mniej popularny:

frint.js.org

Komponenty webowe

Nie jest to framework, ale funkcja przeglądarki i być może przyszłość Internetu. Oto artykuł na ten temat:

https://www.webcomponents.org/introduction

Taylor

Framework ten wykorzystuje inne podejście, tworząc stronę routingu na backendzie za pomocą node.js. Jeśli pomysł Ci się podoba, warto zobaczyć:

https://github.com/zalando/tailor

Tworzenie mikrofrontendów przy użyciu 3 plików

Chcemy teraz stworzyć minimalistyczną integrację mikrofrontendu używając 3 plików:

• Product Catalog— mikrofrontend wykonany przy użyciu zwykłego JavaScript.
• Shopping Cart— kolejny mikrofrontend stworzony za pomocą Vue.js.
• Composition— plik HTML, który wyświetla obie aplikacje jako jedną stronę.

Głównym pomysłem jest umieszczenie owoców w katalogu produktów, dzięki czemu użytkownik może dodać je do koszyka. PostMessage() to zasób przeglądarki, który pozwoli nam na komunikację parent/child.

Ok, pokażę teraz trochę kodu.

composition.html

<style>
  body {
    display: flex;
  }
  iframe {
    flex: 1;
    border: none;
  }
</style>
<iframe src="./catalog/index.html" id="catalog"></iframe>
<iframe src="./cart/index.html" id="cart"></iframe>
<script>
  const cart = document.querySelector("#cart");
  window.addEventListener("message", event => {
    cart.contentWindow.postMessage(event.data, "*");
  });
</script>

W linii 13 łączymy element iframe cart ze stałą. W linii 14 strony kompozycji dodaliśmy kod, który sprawi, że będziemy nasłuchiwali wiadomości, a następnie przekierowujemy tę samą wiadomość do iframe'u`cart`.

catalog/index.html

<h1>Products catalog</h1>
<h2>Apple <button value="apple">Add to cart</button></h2>
<h2>Banana <button value="banana">Add to cart</button></h2>
<h2>Orange <button value="orange">Add to cart</button></h2>

<script>
  const addToCart = e => window.parent.postMessage(e.target.value, "*");
  document
    .querySelectorAll("button")
    .forEach(button => button.addEventListener("click", addToCart));
</script>

Tutaj połączyliśmy kliknięcie wszystkich przycisków z funkcją addToCart. Spowoduje to wysłanie wiadomości do okna nadrzędnego, czyli strony kompozycji, z nazwą wybranego owocu.

cart/index.html

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="main">
  <h1>Shopping cart</h1>
  <p>Apples: {{ products.apple }}</p>
  <p>Bananas: {{ products.banana }}</p>
  <p>Oranges: {{ products.orange }}</p>
</div>

<script>
  new Vue({
    el: "#main",
    data: {
      products: {
        apple: 0,
        banana: 0,
        orange: 0
      }
    },
    methods: {
      add: function(event) {
        this.products[event.data]++;
      }
    },
    beforeMount() {
      window.addEventListener("message", this.add);
    },
    beforeDestroy() {
      window.removeEventListener("message", this.add);
    }
  });
</script>

I wreszcie doszliśmy do naszego koszyka w Vue.js. W beforeMount() ustawiliśmy okno koszyka na nasłuchiwanie wiadomości od rodzica. Metoda add() dodaje 1 do wybranych produktów, zgodnie z nazwą owocu.

Repozytorium

Powyższy projekt jest na GitHubie. Poprawiliśmy obsługę wiadomości i dodaliśmy trochę stylu dzięki bootstrapowi.

https://github.com/andregardi/micro-frontends-iframe

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.