Obsah[Skryť][Šou]
Myšlienka mikroslužieb si v poslednej dobe získala veľkú pozornosť a mnohé firmy ju využívajú na odstránenie veľkých, monolitických backendov.
Prejsť tou istou cestou s frontendom je pre mnohé podniky stále výzvou, aj keď tento distribuovaný spôsob vytvárania serverovej strany webových aplikácií je viac-menej spoľahlivý z hľadiska výskumu a vykonávania.
Vďaka svojej úzkej závislosti monolit na strane klienta zvyčajne sťažuje integráciu nových funkcií, prijímanie nových technológií a škálovanie jednotlivých komponentov.
Tieto a ďalšie výzvy podnietili vývojárov frontendu, aby preskúmali používanie mikroslužieb.
V dôsledku toho bola vyvinutá úplne nová architektonická stratégia známa ako mikro frontend na vytváranie front-end vrstvy webových stránok a webových aplikácií.
Tento výraz bol prvýkrát použitý v roku 2016 a odvtedy si získal veľkú pozornosť pre dobrú vec.
Tento článok poskytne všeobecný prehľad o tom, čo sú mikro frontendy a aké problémy riešia. funguje to, ako aj plusy a mínusy.
Úvod do mikro front-end architektúry
Súčasná metóda front-endového vývoja nazývaná mikro-frontendová architektúra rozdeľuje a webová aplikácia na malé, nezávislé časti.
Pre koncového užívateľa sa tieto časti javia ako jeden celok, aj keď boli skonštruované samostatne a potom zložené.
S rozdielom, že mikro frontendy sa týkajú klientskej strany, nie serverovej strany online riešení, ich základný princíp je rovnaký ako pri mikroslužbách.
Vytváranie sofistikovaných webových produktov má najväčší zmysel pri použití mikrofrontendového prístupu.
Mikro frontendy, na rozdiel od konvenčnejších front-end monolitov, umožňujú mnohým tímom samostatne spolupracovať na rôznych softvérových projektoch.
Pomocou tohto architektonického návrhu môžu programátori vytvárať webové aplikácie rýchlejšie a s väčšou škálovateľnosťou a udržiavateľnosťou.
Zjednodušene povedané, každý mikro frontend je len kúskom kódu pre odlišný komponent webovej stránky.
Tieto funkcie sú riadené samostatnými tímami, z ktorých každý sa špecializuje na určité odvetvie alebo cieľ.
Monolitická vs Microservices vs Micro frontendová architektúra
Myslite na presťahovanie. Bude pre vás jednoduchšie usporiadať všetko do niekoľkých malých, odborne označených škatúľ a premiestniť každú jednotlivo alebo zbaliť celý personál do jednej obrovskej škatule a previezť na nové miesto?
Jednoznačné riešenie existuje.
Táto analógia porovnáva dve odlišné architektúry webových aplikácií, monolity a mikroslužby (známe aj ako mikro frontendy).
Monolitická architektúra
Možno si budete môcť spomenúť na „staré dobré časy“, keď bola vytvorená kompletná aplikácia ako jeden súdržný celok. Takáto metóda sa nazýva monolit, čo je starý výraz pre veľký kamenný blok.
To dáva zmysel.
Monolitické systémy majú vzájomne závislé prvky. Preto, ak chcete niečo upraviť alebo pridať novú funkciu, je možné, že sa celý systém pokazí.
Aj keď je zastaraný, občas stále existuje. Áno, poznáme váš aktuálny výraz.
Koncepčné rozdelenie kódovej základne na dva rôzne komponenty – frontend (na strane klienta) a backend (na strane servera) – sa stalo nevyhnutným, keďže sa vyvíjali nové technológie a softvérové produkty sa skomplikovali.
Najpopulárnejším spôsobom prevádzky je teraz oddelenie záujmov medzi prezentačnou vrstvou, s ktorou koncový používateľ interaguje, a všetkým, čo sa deje na pozadí.
Potrebuje dva tímy softvérového inžinierstva, pričom front-endový tím vytvára vizuálne komponenty a back-endový tím vytvára webové služby, obchodnú logiku, prístup k údajom, integrácie atď.
Napriek tomuto oddeleniu však táto stratégia stále zostáva svojou povahou monolitická.
Hlavnou zmenou je, že teraz máme dva veľké bloky kódu – frontend a backend – namiesto jednej obrovskej aplikácie. Monolitické architektúry nemusia byť hrozné; majú niekoľko výhod, napr
- Jednoduchý a rýchly vývoj pre malé aplikácie s jednou zdrojovou kódovou základňou a veľmi jednoduchým dizajnom;
- Testovanie a ladenie sú veľmi jednoduché, pretože všetok kód je na jednom mieste, čo tímu uľahčuje sledovanie toku požiadaviek a identifikáciu chýb;
- Na začiatku vývoja aplikácie sú náklady lacnejšie, pretože nevznikajú ani náklady na infraštruktúru, ani náklady na vývoj, kým sa nepridajú nové funkcie.
Nevýhody tejto stratégie sa odrážajú v
- Obmedzená flexibilita nasadenia – tímy musia čakať, ak na projekte pracuje len hŕstka z nich a pri každej aktualizácii kódu sa vyžaduje nové nasadenie;
- Prijatie nových technológií je náročné, pretože si to vyžaduje prepísanie významnej časti, ak nie celého projektu.
- Keď sa počet vývojárov zvýši, systém kódu sa stane úzko prepojeným, komplikovaným a ťažko spravovateľným a pochopiteľným.
- Organizačné problémy – každý člen tímu musí používať rovnakú verziu knižníc a hlásiť všetky zmeny, ak veľa tímov pracuje na monolitickom projekte.
- Obavy so škálovateľnosťou – pretože komponenty projektu sú vzájomne prepojené, ich samostatné škálovanie predstavuje ťažkosti, ktoré vedú k výrazným prestojom a vyšším výdavkom.
- Zložitá logika projektu môže byť pre nových členov tímu ťažké pochopiť, najmä ak inžinieri, ktorí na ňom pôvodne pracovali, už nie sú zamestnaní.
Rozvoj mikroslužieb a ich blízkych príbuzných a mikrofrontendov riešili primárne problémy s monolitickými systémami.
Architektúra mikroslužieb
Architektonická metóda známa ako mikroslužby umožňuje vytváranie mnohých voľne prepojených a nezávisle nasaditeľných menších komponentov alebo služieb, ktoré tvoria backend aplikácie.
Každá služba má svoju vlastnú kódovú základňu, kanály CI/CD, procedúry DevOps a procesy na ich spustenie.
Na obrázku vyššie môžete vidieť, že monolitický backend tím je rozdelený na samostatné tímy.
Každý z nich sa zameriava individuálne na iný aspekt aplikácie (ako je produktová služba, vyhľadávacia služba a platobná služba).
Komunikácia medzi službami prebieha prostredníctvom zavedených protokolov známych ako API, ako je napríklad ľahký protokol REST API, ktorý používa synchrónne vzory požiadavka-odpoveď.
Ďalšou možnosťou je použiť asynchrónnu komunikáciu pomocou softvéru ako Kafka, ktorý ponúka komunikačné štruktúry a udalosti typu publikovať/prihlasovať.
Mikroslužby sa integrujú s frontendom cez backend pre frontendovú (BFF) službu alebo cez API bránu cez sieť. BFF ponúka prispôsobené API pre každého klienta, zatiaľ čo API brány poskytujú jediný prístupový bod pre kolekciu mikroslužieb.
Ale aj s autonómnymi komponentmi backendu a všetkými výhodami, ktoré poskytujú, je frontend stále monolit.
Preto sú mikro frontendy užitočné.
Architektúra mikro frontendov
Podobne ako v mikroslužbách, kde voľne prepojené komponenty spravuje niekoľko tímov, architektúra mikro frontendu aplikuje tento koncept na prehliadač.
Tieto používateľské rozhrania webových aplikácií sledujú túto štruktúru, ktorá pozostáva z do istej miery autonómnych komponentov.
Tímy sa tiež vytvárajú na základe potrieb klientov alebo prípadov použitia, a nie podľa konkrétnych odborných znalostí alebo technológií.
V dôsledku toho sú tímy zapojené do mikroslužieb a mikro frontend projektov.
- vertikálne rozdelené – keďže na rovnakom projekte pracujú aj frontendoví vývojári, dátoví experti, backendoví inžinieri, QA inžinieri atď., takže svoje funkcie vytvárajú z používateľské rozhranie do databáz; a
- medzifunkčné – každý člen tímu prispieva svojou odbornosťou do skupiny.
Tímy si tiež môžu vybrať technologický balík, ktorý najlepšie vyhovuje ich konkrétnej oblasti podnikania.
Jeden tím môže použiť React na naprogramovanie svojho fragmentu. Ďalší tím vytvára novú verziu Angular. Vue.js je jedným z takýchto príkladov.
Mikro rozhrania sa používajú v spojení so súvisiacimi mikroslužbami na riešenie problémov, ktoré majú vývojové tímy zvyčajne s monolitmi. Stratégia ponúka nasledujúce výhody.
- Technologická sloboda: Frontendoví inžinieri si môžu vybrať alternatívne rámce JavaScriptu, runtime prostredia a celé technologické balíky v závislosti od potrieb spoločnosti. Na vrchole zastaranej architektúry sa môže použiť nový rámec.
- Väčšia miera flexibility je možná, pretože každý mikrofrontend je samostatný a možno ho vyvíjať, testovať, nasadzovať a upgradovať samostatne. Výsledkom je, že ak jeden tím pracuje na funkcii a presadil opravu chyby a iný tím musí pridať svoju vlastnú funkciu, nemusí čakať, kým prvý tím dokončí svoju úlohu.
- Autonómne tímy a systémy: Každý produktový tím a následne každá funkcia môže fungovať s malou závislosťou od ostatných, čo mu umožňuje pokračovať v práci, aj keď sú blízke komponenty nedostupné.
- Viacnásobné menšie kódové základne: Každý z mikrofrontendov bude mať svoju vlastnú, lepšie spravovateľnú a menšiu kódovú základňu. Menej ľudí sa zameria na konkrétny komponent používateľského rozhrania, zjednoduší kontroly kódu a zlepší celkovú organizáciu.
- Jednoduché škálovanie aplikácií: Ďalšou výhodou mikro rozhraní je možnosť individuálne škálovať každú funkciu. Na rozdiel od monolitov, kde musí byť celý program škálovaný vždy, keď je pridaná nová funkcia, to robí celý proces efektívnejším z hľadiska času aj peňazí.
Ako funguje mikro frontend?
Ako sme už uviedli, tímy sú vertikálne organizované v mikrofrontendovej architektúre, čo znamená, že sú oddelené doménovými znalosťami alebo účelom a sú zodpovedné od začiatku až do konca za konkrétny produkt.
Môže mať jednu alebo dve backendové mikroslužby, ako aj malý frontend. Pozrime sa podrobnejšie na charakteristiky tohto vizuálneho prvku, interakcie s inými komponentmi používateľského rozhrania a začlenenie do domovskej stránky.
Mikro frontend môže byť
- celú stránku (napr. stránku s detailom produktu) alebo
- časti stránky, ktoré môžu používať iné tímy, ako sú hlavičky, päty a vyhľadávacie panely.
Veľkú webovú stránku môžete rozdeliť na niekoľko druhov stránok a každý typ dať konkrétnemu personálu, aby na ňom pracoval.
Na mnohých stránkach sa však často vyskytuje niekoľko komponentov, ako sú hlavičky, päty, bloky návrhov atď. Blok návrhov môže byť napríklad zahrnutý na domovskej stránke, stránke s podrobnosťami o produkte alebo dokonca na stránke pokladne.
V podstate môžu tímy vytvárať kúsky, ktoré môžu ostatné tímy použiť na svojich stránkach.
Mikro rozhrania však môžu byť nasadené samostatne ako rôzne projekty na rozdiel od opakovane použiteľných komponentov.
To všetko znie fantasticky, ale na vytvorenie jednotného rozhrania sa musia stránky a fragmenty nejako skombinovať.
Vyžaduje si to integráciu frontendu, ktorú možno dosiahnuť prostredníctvom rôznych stratégií vrátane smerovania, zloženia a komunikácie (pozri obrázok vyššie).
Smerovanie
Keď je na prístup na stránku vlastnenú iným tímom potrebná služba zo stránky ovládanej jedným tímom, smerovanie je užitočné pre integráciu na úrovni stránky.
Každý mikro frontend je riešený ako jednostránková aplikácia. Na zabezpečenie smerovania je možné použiť jednoduché odkazy HTML.
Používateľ môže prinútiť prehliadač, aby stiahol cieľové označenie zo servera a nahradil aktuálnu stránku novou kliknutím na hypertextové odkazy.
Prostredie aplikácie je úplné minimum HTML, CSS a JavaScriptu, ktoré poháňa používateľské rozhranie. Aj keď údaje o obsahu požadované zo servera stále čakajú, používateľovi sa okamžite zobrazí statická stránka. Centrálne prostredie aplikácie slúži ako nadradená aplikácia pre jednostránkové aplikácie vytvorené rôznymi tímami.
Bez ohľadu na knižnicu alebo rámec, ktorý sa používa, metarámce umožňujú zlúčenie rôznych stránok do jednej.
zloženie
Kompozícia je proces usporiadania častí tak, aby sa zmestili do príslušných priestorov na stránke. Vo väčšine prípadov tím, ktorý nasadzuje stránku, okamžite nenačíta obsah fragmentu.
Namiesto toho umiestni zástupný symbol alebo značku tam, kde by mal byť fragment v značke.
Použitím iného procesu skladania sa dosiahne konečná montáž. Zloženie možno rozdeliť do dvoch základných kategórií: na strane klienta a na strane servera.
Zloženie na strane klienta: Webový prehliadač sa používa na vytváranie a úpravu značiek HTML. Každé mikro rozhranie má možnosť zmeniť a zobraziť svoje označenie oddelene od zvyšku stránky.
Web Components vám napríklad umožňujú realizovať tento typ konštrukcie.
Plánom je zmeniť každý fragment na webový komponent, ktorý je možné nezávisle nainštalovať ako súbor a.js, po ktorom ich môžu aplikácie načítať a vykresliť v priestoroch, ktoré sú pre ne určené v rozložení témy.
Webové komponenty sú závislé na HTML a DOM API, ktoré môžu využívať iné frontendové rámce, ako aj na štandardnom spôsobe odosielania a prijímania údajov prostredníctvom rekvizít a udalostí.
Zloženie na strane servera: S týmto dizajnom sa časti používateľského rozhrania kombinujú na serveri, čo vedie k odoslaniu úplne vytvorenej stránky na stranu klienta, čo urýchľuje načítanie.
Zostavenie často vykonáva samostatná služba, ktorá je umiestnená medzi webovým prehliadačom a webovými servermi. CDN je jedna inštancia služby (sieť na doručovanie obsahu).
Môžete si vybrať jeden alebo ich kombináciu v závislosti od vašich potrieb.
Mikrofrontendové komunikačné vzory
Mikrofrontendová architektúra funguje najlepšie, keď medzi rôznymi komponentmi nie je žiadna alebo len malá interakcia. Mikrofrontendy občas potrebujú komunikovať a zdieľať informácie. Tu je niekoľko potenciálnych vzorcov, ktoré k tomu môžu viesť.
- Weboví pracovníci: Online pracovník je mechanizmus, ktorý umožňuje webovému obsahu spúšťať JavaScript na pozadí, nezávisle od iných skriptov a bez ovplyvnenia rýchlosti stránky. Pre každú mikroaplikáciu bude poskytnuté jedinečné pracovné rozhranie API. Táto výhoda spočíva v tom, že časovo náročnú prácu možno vykonať v inom vlákne, čo umožňuje vláknu používateľského rozhrania pokračovať bez spomalenia alebo zastavenia.
- Emitor udalostí: V tomto prípade mnohé komponenty navzájom komunikujú tak, že počúvajú a konajú na základe akýchkoľvek zmien stavu v komponentoch, ku ktorým sú prihlásené. Iné mikro rozhrania, ktoré sa prihlásili na odber tejto konkrétnej udalosti, reagujú, keď mikro klientske rozhranie spustí túto udalosť. Umožňuje to emitor udalostí, ktorý bol zavedený do každého mikrofrontendu.
- Spätné volania a rekvizity: V tejto časti definujete nadradený komponent a podriadené komponenty. Komunikácia je organizovaná do stromovej štruktúry. Nadradené komponenty využívajú rekvizity na prenos údajov ako funkcií nadol v strome komponentov k podradeným komponentom. Na druhej strane môže dieťa efektívne upozorniť rodiča, keď sa v jeho stave niečo stane, odpovedaním na spätné volanie. React využíva tento režim.
Výhody Micro frontendu
Vývoj v rýchlo autonómnych tímoch
Nezávislý tím môže vytvoriť každú časť webovej aplikácie alebo webovej stránky pri použití mikro frontendovej metódy.
Každý tím je úplne autonómny, čo znamená, že má na starosti celý vývojový cyklus komponentov, od koncepcie až po vydanie a postprodukciu.
Okrem toho to znamená, že rôzne tímy môžu hladko spolupracovať a súčasne pracovať na rovnakom projekte.
Preto sú uvoľňovacie cykly podstatne rýchlejšie, ako by boli pri predných monolitoch.
Menšie kódové základne jednotlivých mikrofrontendov vedú k čistejšiemu kódu
Monolitické frontendy majú veľké, nepraktické kódové základne, ktoré sa postupom času stávajú čoraz chaotickejšími a náročnejšími na správu.
Mikro frontendy riešia tento problém. Zdrojový kód každého mikro frontendu je lepšie spravovateľný, pretože je menší, jednoduchší a kompaktnejší.
Celkové webové riešenie v dôsledku toho ťaží z čistejšieho kódu.
Vylepšená stabilita aplikácie vďaka voľnej spojke
Webové riešenie možno len zriedkakedy rozdeliť na úplne nezávislé časti. V dôsledku toho sa mikrofrontendy navzájom rozprávajú.
Každé prepojenie medzi komponentmi je však významné aj napriek voľnej konektivite.
Porucha jedného komponentu má malý alebo žiadny vplyv na fungovanie všetkých ostatných komponentov, čo poskytuje zvýšenú stabilitu webového riešenia.
Testovanie jednotlivých funkcií je jednoduchšie
Táto výhoda vyplýva z charakteristík mikro frontendov. Na základe tohto architektonického návrhu je klientska strana webového riešenia modulárna a každý modul je autonómny.
Výsledkom je, že hodnotenie malej časti používateľského rozhrania samo o sebe je pre tím jednoduchšie ako testovanie masívneho monolitu.
Menšia veľkosť balíka vedie k rýchlejšiemu načítaniu stránky
Jednou z hlavných príčin oneskoreného načítania v monolitických webových systémoch s bohatými funkciami je veľkosť balíka JavaScript. Na druhej strane prístup mikro frontendu uľahčuje skrátenie času načítania stránky.
Prehliadač nemusí opakovane sťahovať nepotrebný kód, pretože webová stránka sa skladá z niekoľkých malých balíkov. V dôsledku toho sa zvyšuje výkon stránky a časy načítania.
Technologická nezávislosť
násobok front-end frameworky môžu vývojári použiť na vytvorenie jediného online riešenia s mikrofrontendovou architektúrou.
Keďže každý komponent je autonómny, môže byť skonštruovaný pomocou technológie, ktorá najlepšie vyhovuje úlohám tímu.
Prirodzene, programátori by mali byť opatrní pri výbere rámcov pre softvérový projekt, ktorý majú na starosti, a stále dôrazne odporúčame konzultácie s inými tímami.
Existuje však nulová šanca, že budete nútení používať starší rámec počas životnosti aplikácie.
Nevýhody Micro Frontendu
Komplexné testovanie webových riešení v celom rozsahu
Testovanie rôznych modulov webového riešenia je jednoduché, keď používa mikrofrontendovú architektúru. Líši sa však od hodnotenia webovej aplikácie ako celku.
Pred pokračovaním skontrolujte, či všetky diely fungujú tak, ako bolo zamýšľané. To môže byť zložité, pretože mikrofrontendy fungujú nezávisle a majú samostatné procesy doručovania.
Drahé počiatočné investície
Vývoj mikrofrontendov si zvyčajne vyžaduje značné finančné výdavky. Je nákladné zostaviť a udržiavať mnoho front-end tímov.
Okrem toho budete potrebovať riadiacich pracovníkov, ktorí budú organizovať prácu, zabezpečiť, aby bolo všetko koordinované a zaručiť vynikajúcu tímovú komunikáciu.
Zložitosť vývoja a nasadenia
Postupy vývoja a nasadenia sa môžu skomplikovať v dôsledku návrhu mikrofrontendu.
Nezávislé vývojové tímy pracujúce na rovnakom projekte by napríklad mohli zahltiť riešenie príliš veľkým počtom komponentov, čo by mohlo spôsobiť problémy vo fáze nasadenia.
Správna montáž všetkých modulov a ich hladká integrácia do celkovej schémy tiež nie je vždy jednoduchá; táto práca si zvyčajne vyžaduje dôkladné pochopenie všetkých závislostí.
Problémy so zachovaním koherencie v používateľskej skúsenosti
Udržiavanie konzistentného používateľského rozhrania je náročné, keď tímy pracujú oddelene na niekoľkých častiach softvéru.
Webové riešenie by mali zdieľať všetci vývojári projektu. V opačnom prípade môže byť na ceste veľa rozporov.
záver
Mikro frontendy, súčasný architektonický dizajn, môžu výrazne zvýšiť výkon rozsiahlych projektov vývoja webu založených na mikroslužbách.
Programátorom umožňuje rozdeliť kompletné riešenie na samostatné časti, ktoré môžu vytvárať viaceré autonómne tímy. Z toho vyplývajú mnohé výhody, vrátane rýchlejšieho zavádzania funkcií, jednoduchšieho testovania jednotlivých modulov a bezproblémovejších aktualizácií.
Existujú však určité problémy aj s mikro frontendmi.
Komplexné testovanie aplikácie môže byť napríklad náročné.
Navyše, keďže je potrebný veľký tím inžinierov a administrátorov, projekty mikro frontendov sú veľmi drahé.
Preto pred prijatím rozhodnutia musíte vziať do úvahy všetky zložky vášho obchodného prípadu.
Vladimír Čamaj
Nejako som nepochopil, na akom princípe funguje komunikácia medzi jednotlivými komponentmi na frontende. Nerozumiem, ako chcete spájať komponenty, ktoré sú vytvorené v rôznych frameworkoch. V článku o tom nič nie je. Systém podujatí a poslucháčov mi pripadá ako peklo na zemi. Ako si to máme predstaviť?