Unified Frontend – Mikro frontend framework dla Raiffeisen Bank Croatia

Wprowadzenie poprawnie wykonanej aplikacji micro-frontendowej wiąże się z wyzwaniami podobnymi do tych związanych z backendową aplikacją mikroserwisową, jednak do gry wchodzi kilka nowych.

Pierwszym z nich jest zapewnienie bezproblemowego interfejsu użytkownika, dzięki czemu użytkownicy czują, że korzystają z dobrze zaprojektowanej aplikacji, a nie ze zlepka wielu małych aplikacji. Przeoczenie tych czynników skutkuje niskim poziomem doświadczenia użytkownika i negatywnymi opiniami użytkowników. Pytanie o to, jak sprostać temu wyzwaniu, powinno być zadawane od samego początku projektu, a ostateczne rozwiązanie bardzo często obejmuje zarówno aspekty techniczne, jak i organizacyjne.

Jeśli chodzi o uwierzytelnianie, częstym wymogiem jest zapewnienie, że użytkownik musi uwierzytelnić się tylko raz. Wszystkie komponenty muszą współdzielić kontekst i reguły autoryzacji zarówno we frontendzie, jak i w backendzie.

Kolejnym wyzwaniem jest stworzenie takiego środowiska organizacyjnego i technicznego, które umożliwi zespołom niezależną od siebie pracę W tym podejściu zespoły są odpowiedzialne za dostarczenie wszystkich funkcjonalności zgodnych z architekturą i wytycznymi. Dobry projekt musi być przestrzegany przez zapewnienie, że każda aplikacja może być wydana i wdrożona bez koordynacji z innymi zespołami i aplikacjami.

• Elastyczna i otwarta architektura, pozwalająca na szybkie wdrażanie rozwiązań biznesowych w wybranej przez zespół technologii,
• Skalowalność rozwiązania i zespołów, pracujących nad funkcjami biznesowymi bez uszczerbku dla doświadczenia użytkownika i jakości kodu,
• Oszczędność kosztów, ponieważ mikro aplikacje frontendowe są łatwiejsze do zbudowania i utrzymania dzięki stale rosnącemu repozytorium kodu,
• Dobrze zdefiniowana odpowiedzialność i kompleksowa własność potrzebują mniej wysiłku w zarządzaniu zależnościami pomiędzy różnymi zespołami,
• Wiele różnych funkcjonalności i procesów biznesowych przedstawionych i działających w spójnym interfejsie użytkownika.

Proponując „Unified Frontend” chcieliśmy odpowiedzieć na wszystkie wyzwania wynikające z mikro architektury frontendowej, ale także zaoferować rozwiązanie, w którym rozwój i utrzymanie są opłacalne w długim okresie czasu. Po rozpoznaniu kilku głównych podejść, które są powszechnie stosowane do implementacji architektury micro frontend, zdecydowaliśmy się na wykorzystanie jednego z frameworków open source (single-spa), wykorzystującego technikę integracji po stronie klienta, w której aplikacja jest dostarczana do przeglądarki internetowej użytkownika w częściach, a następnie jest z nią integrowana.

Unified Frontend jest frameworkiem JavaScript przeznaczonym do budowania interfejsu użytkownika składającego się z wielu pojedynczych stron. Z założenia umożliwia on aplikacjom składającym się z jednej strony korzystanie z różnych frameworków frontendowych, a nawet innych wersji jednego frameworka. Jednak w praktyce większość aplikacji pisana jest przy użyciu React, niektórzy używają też Preact lub Angular.

Architektura wszystkich aplikacji single-spa składa się z dwóch koncepcji:

• Aplikacje – same mikrofrontendy. Każda aplikacja może odpowiadać na zdarzenia routingu URL i musi wiedzieć, jak uruchomić, zamontować i zdemontować z DOM. Główną różnicą pomiędzy tradycyjnym SPA a aplikacjami single-spa jest to, że te ostatnie muszą być w stanie współistnieć z innymi aplikacjami oraz to, że nie każdy ma swoją stronę HTML.
• Konfiguracja single-spa​ – strona HTML i JavaScript, które rejestrują aplikacje z single-spa.

Wszystkie aplikacje można wdrażać niezależnie, co daje Bankowi swobodę wyboru, kiedy aplikacja ma być promowana do środowiska produkcyjnego, bez wpływu na inne części systemu.

Kolejną dobrą cechą frameworka jest leniwe ładowanie kodu, co poprawia szybkość ładowania aplikacji, ponieważ konkretny pakiet mikrofrontendowy jest ładowany tylko wtedy, gdy jest potrzebny.

Wprowadzenie Unified Frontend pozwoliło Bankowi osiągnąć wymierne korzyści, jakie obiecuje architektura mikroserwisów w obszarze aplikacji frontendowej.

Dzięki niezależności zgłoszeń uzyskano skalowalność zespołu – w ciągu roku liczba zespołów, dostarczających zgłoszenia, wzrosła z 1 do 5. Skrócił się również czas wprowadzenia produktu na rynek dzięki oddzieleniu aplikacji od siebie i wprowadzeniu niezależnych wdrożeń.

Mimo, że rozwiązanie składa się z wielu aplikacji napisanych w różnych frameworkach frontendowych, użytkownik zyskał spójny interfejs użytkownika. Jest to tym ważniejsze, że naszymi użytkownikami są pracownicy back-office i front-office, zazwyczaj przeciążeni kilkoma aplikacjami, służącymi do realizacji ich zadań.

Wydaje się, że wzorzec micro frontend był tym brakującym elementem układanki, który pozwolił Bankowi w pełni wykorzystać zasoby architektury mikroserwisów wprowadzonej w ramach programu digitalizacji.

Zastanawiasz się, czy i jak podobne rozwiązanie może pomóc Twojej organizacji? Daj nam znać, chętnie pomożemy.