Architektura mikrofrontendowa z użyciem Web Components

W świecie frontendu od dawna szukamy sposobów jak podzielić duże projekty na mniejsze części.

Dlaczego tak się dzieje? Ogromne aplikacje zrealizowane jako monolit są trudne w utrzymaniu i mają wysoki próg wejścia dla nowych osób. Bardzo często wprowadzanie niewielkich zmian w takiej aplikacji wymaga sporej wiedzy o jej budowie.
Oczywiście nie są to problemy charakterystyczne tylko dla frontendu. Aplikacje backendowe napisane w Javie czy C# zmagają się z tym samym. Duży monolit staje się z czasem trudny w rozwoju i utrzymaniu. W świecie backendu w odpowiedzi na te niedogodności powstała koncepcja architektury mikroserwisowej. Temat już dobrze znany. W dużym skrócie pomysł polega na podziale aplikacji i wydzieleniu modułów odpowiedzialnych za konkretną funkcjonalność.
Wspomniane podejście oferuje wiele korzyści. Po pierwsze programista może pracować nad mniejszym wycinkiem całości, mając pewność, że nie zepsuje innej części systemu. W takiej sytuacji wystarczy mieć wiedzę na temat danego modułu. Dodatkowo awaria jednego komponentu nie powoduje zatrzymania pracy całej aplikacji, a także dalsza rozbudowa systemu o kolejne funkcjonalności jest uproszczona.
Takie podejście sprawdza się na backendzie. Czy można je wykorzystać w przypadku frontendowej warstwy aplikacji?
Zacznijmy od definicji.

Czym są mikrofrontendy (microfrontends)?

Mikrofrontendy są wykorzystaniem tego samego podejścia i podobnych założeń jakie przyjęto w architekturze mikroserwisowej. Polega to na podzieleniu aplikacji na mniejsze części, które można rozwijać niezależnie od pozostałych. Ostateczne rozwiązanie jest zatem kompozycją mniejszych komponentów, które tworzą całość. Ważne jest, aby podział aplikacji był dokonany domenowo, to znaczy, aby każdy komponent odpowiadał za konkretną funkcjonalność produktu.

Jak tworzyć mikrofrontendy?

Tu pojawiają się tzw. Web Components.  Stanowią zbiór standardów, które pozwalają definiować reużywalne i enkapsulowane komponenty dla aplikacji webowych: • Custom Elements – API dodane w przeglądarkach, dostępne z poziomu JavaScript, które pozwala na tworzenie obiektów realizujących założenia Web Components. Custom Element to komponent, który izoluje fragment widoku (HTML, CSS) oraz zachowania (JS) aplikacji. Korzystanie z Custom Elements nie wymaga użycia żadnej biblioteki, ponieważ są natywnie wspierane przez nowoczesne przeglądarki.
• Shadow DOM – pozwala na enkapsulowanie HTML i styli. Dzięki temu style Web Componentu nie wyciekają, a elementy zdefiniowane w HTML nie są widoczne z poziomu głównej strony. Ponadto uzyskujemy “izolację” i nie mamy ryzyka, że kod spoza komponentu będzie zmieniał jego wygląd bądź zachowanie.
• HTML Templates – pozwalają na zdefiniowanie fragmentu HTML, który następnie może zostać użyty w wielu miejscach.

Wsparcie dla Web Components w przeglądarkach

Jak wygląda sytuacja ze wsparciem Web Componentów? Po krótkim researchu okazuje się, że wszystkie nowoczesne przeglądarki obsługują opisane wyżej funkcjonalności. Poniżej przedstawiam screeny ze strony caniuse.com (stronę szczerze polecam).
Dodatkowo istnieją polyfille, które pozwalają dodać Web Componenty dla starych przeglądarek takich jak IE11. Jest to szczególnie pomocne w projektach, wymagających szerokiego wsparcia, gdzie jednocześnie nie chcemy rezygnować z nowoczesnych rozwiązań.

Czy użycie Web Components kłóci się z nowoczesnymi frameworkami takimi jak Vue, React czy Angular?

Tak jak wspomniałem, standardy składające się na Web Components są zaimplementowane na poziomie przeglądarki i nie wymagają do działania żadnych bibliotek. Oczywiście możemy ich używać razem z javascriptowymi frameworkami. Nic nie stoi na przeszkodzie, aby webcomponenty na stronie zostały zrealizowane w różnych technologiach.
Na jednym z projektów, które realizowałem, aplikacje angularowe zostały opakowane w webcomponenty, a następnie osadzone na stronie. Główna aplikacja miała zaimplementowany lazy loading, który pozwalał na ładowanie tylko tych komponentów, które były w danym momencie potrzebne. Z kolei każda mikroaplikacja miała własny webserwer, dzięki czemu mogła być deployowana niezależnie od innych.

Korzyści płynące z zastosowania Web Components

Podsumowując, dzięki wykorzystaniu Web Componentów możemy czerpać korzyści, jakie niesie ze sobą użycie architektury mikrofrontendów. Nasze mikroaplikacje pracują w izolacji i są od siebie niezależne, dzięki czemu nie będą interferować. Zmniejszy to ilość trudnych do wykrycia błędów. Awaria jednego elementu nie przekreśli działania reszty aplikacji. Ponadto nasze mikrofrontendy mogą być realizowane w różnych technologiach i byćrelease’owane niezależnie od siebie. Dzięki temu zyskujemy na wydajności i unikamy blockerów.

 Wpływ mikrofrontedów na organizację zespołów

W architekturze monolitycznej podział zespołów wg technologii (lub roli) wydaje się najbardziej oczywisty. Mamy team backendowy, frontendowy, a być może także zespół analityków, testerów i adminów. Dzięki zmianie podejścia i domenowym podziale projektu możliwe staje się stworzenie mikro zespołów, realizujących pojedynczą funkcjonalność. W takim zespole możemy mieć na przykład backendowca, frontendowca, analityka i testera, którzy razem pracują nad dostarczeniem wycinka systemu. Dzięki temu testowanie i wdrażanie zmian są szybsze i prostsze. Każdy zespół może pracować w swoim tempie i nie blokuje pozostałych. Również komunikacja jest ułatwiona, ponieważ potrzebne informacje są wymieniane w micro-teamie i nie są rozsiane po całym projekcie. Zespoły posiadają większą autonomię w wyborze technologii i narzędzi, a wybrane rozwiązania techniczne nie wpływają na pracę pozostałych teamów.

Podsumowanie

Architektura mikrofrontendowa niesie ze sobą wiele korzyści, które starałem się krótko omówić w tym artykule. Opisane podejście jest kolejnym krokiem ewolucji w kierunku coraz większej modularyzacji i decentralizacji aplikacji komputerowych. Trend rysuje się wyraźnie i wszystko wskazuje na to, że aplikacje działające po stronie przeglądarki będą coraz częściej realizowane w architekturze mikrofrontendowej. Jeśli chcesz dowiedzieć się więcej na temat Web Componentów koniecznie odwiedź stronę www.webcomponents.org. Znajdziesz tam wiele cennych informacji o tej technologii plus katalog komponentów open source, gotowych do użycia na twojej stronie.

Źródła:

• https://www.redhat.com/en/topics/microservices/what-are-microservices
• https://micro-frontends.org/
• https://developer.mozilla.org/en-US/docs/Web/API/Web_components
• https://caniuse.com/
• https://www.webcomponents.org/polyfills

---

Comments

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Komentarz *

Nazwa *

E-mail *

Witryna internetowa

Zapisz moje dane, adres e-mail i witrynę w przeglądarce aby wypełnić dane podczas pisania kolejnych komentarzy.