Termin Micro Frontends pojawił się po raz pierwszy w ThinkWorks Technology Radar pod koniec 2016 roku. Rozszerza on koncepcje mikrousług o programowanie frontendu.
Obecny trend polega na tworzeniu bogatej w funkcje i wydajnej aplikacji przeglądarkowej, czyli aplikacji jednostronicowej, która znajduje się na szczycie architektury mikrousług. Z biegiem czasu warstwa frontendowa, często tworzona przez osobny zespół, rośnie i staje się coraz trudniejsza w utrzymaniu. To właśnie nazywamy frontendowym monolitem .
Ideą Micro Frontends jest myślenie o witrynie lub aplikacji internetowej jako zestawieniu funkcji, które są własnością niezależnych zespołów. Każdy zespół ma odrębną dziedzinę działalności lub misję, na której mu zależy i w której się specjalizuje. Zespół jest wielofunkcyjny i rozwija swoje funkcje od początku do końca , od bazy danych po interfejs użytkownika.
Micro frontend jest bardziej przyjazny i mniej nieporęczny. Ten typ architektury dzieli całą aplikację według domeny biznesowej na cały stos. Zapewnia to zespołom frontendu ten sam poziom elastyczności, testowalności i szybkości, jaki zespoły backendu uzyskują dzięki mikrousługom.
W architekturze micro frontend
integrujemy aplikację webową w moduły, gdzie każdy moduł ma określoną
funkcjonalność. Każdy moduł jest własnością oddzielnego zespołu, który
opracowuje cały moduł od interfejsu użytkownika do wszystkich, aż do
bazy danych i zaplecza. W ten sposób proces tworzenia jest prosty, a
funkcjonalności pozostają od siebie niezależne.
Mikro frontend rozszerza koncepcję mikrousług na zapleczu na warstwę frontendu, dzieląc monolit frontendu na mniejsze, zdefiniowane i niezależne usługi frontendowe (aplikacje internetowe), które można pisać w wielu frameworkach i są łatwe w zarządzaniu. Zastosowanie tego podejścia architektonicznego zapewnia wydajność i skalowalny rozwój frontendu, szczególnie w wielu zespołach.
Podejście mikro-frontendowe w połączeniu z architekturą mikrousług zapewnia kompleksową funkcjonalność, umożliwiając jednocześnie pionowy podział poszczególnych systemów. Każda taka pion może wówczas reprezentować określony kontekst domeny ograniczonej (lub problem biznesowy).
Ewolucja rozwoju frontendu
Jednym z trendów rozwojowych,
który pomaga dużym organizacjom zachować elastyczność i szybciej
dostarczać lepszy UX, są mikro frontendy. Mikro frontendy to coś więcej
niż tylko nowy wybór technologii dla programistów frontendu, mikro
frontendy pozwalają całemu przedsiębiorstwu zmienić sposób
funkcjonowania jego zespołów, rozszerzając procesy DevOps na frontend.
Przed pojawieniem się mikrousług architektury aplikacji często były zorganizowane w strukturę monolityczną - jako pojedynczy monolit lub jako oddzielone monolity backendu i frontendu.
Działa to dobrze w przypadku prostszych aplikacji, ale wraz ze wzrostem rozmiaru monolit staje się zbyt uciążliwy, aby zespoły programistów mogły efektywnie zarządzać. To jest problem, który miał rozwiązać mikroserwisy.
Dzięki mikroserwisom niezależne zespoły mogą pracować nad funkcjonalnością backendu w oderwaniu od różnych części witryny. Usprawnia to proces rozwoju i przyspiesza harmonogram wdrożenia dowolnej aktualizacji. Jednak w wielu organizacjach monolit frontendu pozostaje. Tak więc mikro frontendy służą jako kolejny naturalny postęp w kierunku oddzielania funkcjonalności w celu poprawy zwinności zespołu.
Rozszerzając to oddzielenie od backendu do frontendu, przedsiębiorstwa mogą organizować zespoły pionowo wokół określonego celu biznesowego lub wyniku, a nie poziomo wokół określonego zestawu umiejętności technicznych. Pozwala to zespołowi skupić się nie tylko na osiągnięciu celu technicznego, ale także na holistycznej pracy nad funkcją biznesową.
---------------------------------------------------------------------------------------------------------------------------
Bądź niezależny od technologii
Każda drużyna powinna wybrać i ulepszyć stos bez koordynowania z innymi zespołami. Elementy niestandardowe pomagają ukryć szczegóły implementacji, zapewniając jednocześnie neutralny interfejs innym.Izoluj kod zespołu
Nigdy nie udostępniaj środowiska wykonawczego, nawet jeśli zespoły korzystają z tej samej platformy. Zbuduj niezależną, samodzielną aplikację. Nie polegaj na współdzielonych zmiennych stanowych lub zmiennych globalnych.Twórz przedrostki zespołu
Używaj konwencji nazewnictwa tam, gdzie izolacja nie jest jeszcze możliwa. CSS przestrzeni nazw, pamięć lokalna, zdarzenia i pliki cookie w celu uniknięcia kolizji i wyjaśnienia własności.Preferuj natywne funkcje przeglądarki zamiast niestandardowych interfejsów API
Jednym z głównych powodów wynalezienia zarówno mikro frontendów, jak i mikrousług jest umożliwienie pionowego posiadania domeny.
Podobnie jak w przypadku mikroserwisów, mikro frontendy są zasadniczo mniejszymi, wyizolowanymi fragmentami frontendu, podzielonymi tak, aby zawierały fragment zachowania, wyglądu i stylu.
Jednym z głównych podobieństw między mikrousługami a mikro frontendami jest to, że są one znacznie łatwiejsze w utrzymaniu niż ich monolityczne reprezentacje.
Budując te mniejsze komponenty o określonym zakresie, inżynierowie są w stanie znaleźć wszystkie informacje związane z tym komponentem w jednym miejscu (HTML, CSS, Javascript, zdarzenia, programy obsługi itp.). Dzięki temu aktualizowanie, refaktoryzacja lub ulepszanie różnych obszarów produktu jest o wiele łatwiejsze w miarę upływu czasu i powiększania się bazy kodu.
Pozwala również na lepsze ponowne użycie, ponieważ te komponenty muszą być raz zaprojektowane i skonstruowane i mogą być używane wielokrotnie w tym samym projekcie, a nawet w wielu projektach (jeśli są dobrze zbudowane).
Zespoły mogą również pracować autonomicznie na różnych komponentach, bez konieczności ingerowania w swoją pracę lub wąskich gardeł z powodu zależności i/lub wymagań wstępnych. Przepływ pracy jest znacznie płynniejszy i niezależny, co doskonale nadaje się do programowania zwinnego.
Konflikty frameworków i bibliotek
Kompatybilność z przeglądarką
W
zależności od sposobu implementacji mikro-frontendów mogą polegać na
standardach internetowych, które nie są zaimplementowane w starszych
przeglądarkach, takich jak Web Components, jednak często w przypadku
starszych przeglądarek dostępne są wypełniacze w celu zwiększenia
zasięgu.
Wydajność
Konsekwencją
posiadania wielu mniejszych aplikacji typu micro frontend w porównaniu z
jednym dużym frontendem monolitowym jest to, że prawdopodobnie istnieje
znacznie więcej plików (JavaScript, CSS, zasoby), które muszą być
załadowane przez przeglądarkę, aby wyświetlić stronę. Potencjalnie
zwiększa to opóźnienie i czas ładowania strony, ale będzie zależeć od
przyjętego podejścia do grupowania stron; Aby zminimalizować koszty
wczytywania strony, możesz wstępnie łączyć w locie wszystkie
indywidualne skrypty mikro frontendowe i udostępniać je za jednym razem
do frontendu obudowy, co zapewni podobną wydajność ładowania strony jak w
przypadku tradycyjnych podejść.
Dodatkowo pojawi się więcej frameworków SPA, które trzeba będzie zainicjować, gdy wszystkie mikro frontendy uruchomią się w DOM jednej przeglądarki. Chociaż jest to ogólnie uważane za stosunkowo szybkie, opóźnia czas ładowania pierwszej strony.
Najlepsze frameworki do budowania mikro frontendów
Mikrousługi i mikro frontendy wraz z technologiami bezserwerowymi łączą się, tworząc filary inżynierii oprogramowania w 2020 r. i najbliższej przyszłości.
Dzięki tym fantastycznym bibliotekom i frameworkom jest znacznie więcej programistów, którzy są w stanie tworzyć złożone aplikacje oparte na chmurze, które wcześniej wydawały się być poza zasięgiem.
Rozbijając problemy na mniejsze izolowane komponenty i zapewniając szybki i łatwy sposób komunikacji między komponentami, zniechęcająca architektura aplikacji monolitycznych nie stanowi już bariery wejścia.
Zack Jackson wypuścił „ ” jako wtyczkę w Webpack 5. Wtyczka zmieniła świat mikrofrontendów na zupełnie nowy poziom. Teraz możesz dołączyć zdalny składnik do swojego projektu, tak jak został opracowany lokalnie, bez uzależnienia od kompilacji lub wdrożenia, a nawet mieć serwer WWW do jego uruchomienia. To jest przyszłość Microfontneds. Firmy zaczęły stosować podejście federacji Module do migracji z aplikacji monolitycznej do Microfrontends.
Branża e-commerce nieprzypadkowo przoduje w stosowaniu tego typu rozwiązań.
Główne
funkcjonalności w każdym z portali są znane i dobrze zdefiniowane:
wyszukiwarka, koszyk, wybór kategorii, rekomendacje, promowane
ogłoszenia, reklamy. Dzięki temu nie zmieniają się dynamicznie, przez co
dużo łatwiej można wdrożyć podejście Micro Frontends. Za każdą z
wymienionych funkcjonalności może odpowiadać oddzielny komponent
napisany z wykorzystaniem innego frameworka.
Materiały:
https://www.sundbladsoftware.com/articles/the-micro-frontend-revolution.html
https://www.xenonstack.com/insights/micro-frontend-architecture
https://micro-frontends.org/
https://speakerdeck.com/naltatis/micro-frontends-building-a-modern-webapp-with-multiple-teams?slide=43
https://www.veriday.com/blog/build-apps-micro-frontend-platform/
https://www.cygnismedia.com/blog/micro-frontends-development/
https://www.gravity9.co/post/microfrontends-what-you-need-to-know
https://levelup.gitconnected.com/micro-frontends-what-why-and-how-bf61f1f0a729
https://linagora.vn/2021/04/13/a-different-approach-to-frontend-architecture/
https://devblogs.microsoft.com/premier-developer/scaling-user-experiences-with-micro-frontends/
https://altkomsoftware.pl/blog/micro-frontends-web-components/
https://github.com/naltatis/micro-frontends-in-action-code
Brak komentarzy:
Prześlij komentarz