Należymy do Grupy Orange Polska

Raiffeisen Bank

Unified Frontend – Mikro frontend framework dla Raiffeisen Bank Croatia

Architektura mikroserwisów jest obecnie dobrze znanym wzorcem dość szeroko stosowanym przez wiele firm z wielu branż. Nieczęsto jednak można spotkać skalowalną i wydajną aplikację frontendową, wykorzystującą taki wzorzec, szczególnie jeśli chodzi o aplikację wewnętrzną, z której nie korzysta klient, a pracownik. Zobaczmy, jakie korzyści można odnieść z wdrożenia tego typu rozwiązań i jakie wyzwania trzeba pokonać, aby odnieść sukces.

Unified Frontend – Mikro frontend framework dla Raiffeisen Bank Croatia

Wyzwanie

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.

Główne korzyści

  • 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.

Rozwiązanie

20+

20+

odseparowanych mikroaplikacji frontendowych wdrażanych w środowisku produkcyjnym

5+

5+

różnych komórek organizacyjnych, wykorzystujących system do realizacji swoich zadań

5+

5+

zespołów pracujące równolegle

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.

Technologie, z których korzystamy

Dzięki naszej szerokiej wiedzy, bogatemu doświadczeniu i 800 wysoko wykwalifikowanym inżynierom jesteśmy Twoim punktem kompleksowej obsługi dla wszystkich Twoich potrzeb informatycznych. Wybierając BlueSoft czerpiesz korzyści z najnowszych technologii dostosowanych do Twojego biznesu, dając Twojej firmie szansę na prześcignięcie konkurencji.

React
AngularJS
Vue.js
single -spa

Wyniki

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.

Inne projekty

Raiffeisen Bank International
API Management & Governance dla Raiffeisen Bank International AG
Usługi bankowe i finansowe

API Management & Governance dla Raiffeisen Bank International AG

Wizją Raiffeisen Bank International jest propagowanie kultury wewnętrznej otwartości za pośrednictwem interfejsów API, aby zapewnić najwyższą jakość doświadczeń klienta, możliwość ponownego wykorzystania i innowacji. BlueSoft wspólnie z RBI ustalił praktyki zarządzania API, standardy techniczne i zbudował platformę do zarządzania opartą na KONG API Gateway. Nasz zespół zaprojektował interfejsy API dla kluczowych domen branży bankowej wdrożonych przez spółki znajdujące się w grupie Raiffeisen Bank International Group.
Raiffeisen Bank
Rozwiązanie kredytowe dla konsumentów Raiffeisen Bank Croatia
Usługi bankowe i finansowe

Rozwiązanie kredytowe dla konsumentów Raiffeisen Bank Croatia

Obecnie wiele banków na świecie wprowadza nowe rozwiązania w trosce o doświadczenia klienta. Cyfrowa transformacja sektora bankowego jest powszechna i wynika z niezwykle wymagającego tempa nadążania za najbardziej wyrafinowanymi aplikacjami dostosowanymi do konkretnych potrzeb biznesowych. W tym wyścigu dużą rolę odgrywają rozwiązania pożyczkowe, a nowoczesne aplikacje umożliwiają klientom przejście przez proces pożyczkowy i uzyskanie pożądanej kwoty pieniędzy w ciągu zaledwie kilku minut. Aby przybliżyć spojrzenie, zobaczmy, jak to zostało zrobione w Chorwacji w sposób bardziej szczegółowy.
Raiffeisen Bank
Raiffeisen Bank Hrvatska przekształca swoją architekturę danych w kierunku podejścia Data-Driven
Usługi bankowe i finansowe

Raiffeisen Bank Hrvatska przekształca swoją architekturę danych w kierunku podejścia Data-Driven

Zmniejszony wpływ zmian wprowadzonych w systemach źródłowych na konsumentów danych Automatycznie generowany kod ETL ogranicza czynnik błędu ludzkiego w przepływach danych Agregacja kilku źródeł danych tworzy jedno źródło prawdy dla konsumentów danych

Co możemy zrobić Dla Twojego biznesu?

Skontaktuj się z nami!
×