Sadržaj[Sakrij][Prikaži]
Ideja mikrousluga je nedavno privukla veliku pažnju i mnoge firme je koriste da bi uklonile velike, monolitne pozadine.
Ići istim putem s frontendom i dalje je izazov za mnoge kompanije, čak i ako je ovaj distribuirani način izgradnje web aplikacija na strani servera manje-više pouzdan u smislu istraživanja i izvršenja.
Zbog svoje bliske zavisnosti, monolit na strani klijenta obično otežava integraciju novih karakteristika, usvajanje novih tehnologija i skaliranje pojedinačnih komponenti.
Ovi i drugi izazovi naveli su frontend programere da istraže korištenje mikroservisa.
Kao rezultat toga, razvijena je potpuno nova arhitektonska strategija poznata kao mikro frontend za kreiranje front-end sloja web stranica i web aplikacija.
Termin je prvi put upotrijebljen 2016. godine i od tada je zadobio veliku pažnju u dobroj svrsi.
Ovaj članak će dati opće razumijevanje o tome šta su mikro frontendovi i probleme kojima se bave. radi, kao i prednosti i mane.
Uvod u mikro front-end arhitekturu
Savremeni metod front-end razvoja nazvan mikro-frontend arhitektura dijeli a web aplikacija na male, nezavisne dijelove.
Za krajnjeg korisnika, ovi dijelovi izgledaju kao jedna cjelina čak i ako su konstruirani nezavisno, a zatim spojeni.
S tom razlikom što se mikro frontendovi odnose na klijentsku, a ne na serversku stranu online rješenja, obrazloženje koje leži u njihovoj osnovi je identično kao kod mikroservisa.
Izrada sofisticiranih proizvoda zasnovanih na webu ima najviše smisla kada se koristi pristup mikro frontendu.
Mikro frontendovi, za razliku od konvencionalnijeg front-end monolita, omogućavaju mnogim timovima da odvojeno sarađuju na različitim softverskim projektima.
Programeri mogu kreirati web aplikacije brže i sa većom skalabilnošću i lakoćom održavanja koristeći ovaj arhitektonski dizajn.
Jednostavno rečeno, svaki mikro frontend je samo dio koda za posebnu komponentu web stranice.
Ove karakteristike kontrolišu zasebni timovi, od kojih je svaki specijalizovan za određenu industriju ili cilj.
Monolitna vs Microservices vs Micro frontend arhitektura
Razmislite o preseljenju. Hoće li vam biti jednostavnije sve organizirati u nekoliko malih, stručno označenih kutija i premjestiti svaku pojedinačno ili spakovati cijelo osoblje u jednu ogromnu kutiju i prenijeti je na novu lokaciju?
Očigledno rješenje je tu.
Ova analogija uspoređuje dvije različite arhitekture web aplikacija, monolite i mikroservise (poznate i kao mikro frontendovi).
Monolitna arhitektura
Možda ćete se moći prisjetiti „starih dobrih vremena“ kada je kompletna aplikacija kreirana kao jedinstvena, kohezivna cjelina. Takva metoda se naziva monolit, što je stari izraz za veliki kameni blok.
Ovo ima smisla.
Monolitni sistemi imaju međusobno zavisne elemente. Stoga, ako želite nešto izmijeniti ili dodati novu funkciju, moguće je da se cijeli sistem pokvari.
Iako je zastarjela, povremeno još uvijek postoji. Da, svjesni smo vašeg trenutnog izraza.
Konceptualna podjela kodne baze na dvije različite komponente — frontend (na strani klijenta) i backend (na strani servera) — postala je neizbježna kako su se nove tehnologije razvijale i softverski proizvodi postajali sve komplikovaniji.
Najpopularnija metoda rada sada je razdvajanje briga između sloja prezentacije s kojim krajnji korisnik komunicira i svega što se događa u pozadini.
Potrebna su mu dva tima za softversko inženjerstvo, sa front-end timom koji gradi vizuelne komponente i back-end timom koji gradi web usluge, poslovnu logiku, pristup podacima, integracije itd.
Međutim, uprkos ovom razdvajanju, ova strategija i dalje ostaje monolitna po prirodi.
Glavna promjena je da sada imamo dva velika bloka koda – frontend i backend – umjesto jedne ogromne aplikacije. Monolitne arhitekture ne moraju biti strašne; imaju nekoliko prednosti, uključujući
- Jednostavan i brz razvoj za male aplikacije s jednom izvornom kodnom bazom i vrlo jednostavnim dizajnom;
- Testiranje i otklanjanje grešaka su veoma jednostavni jer se sav kod nalazi na jednoj lokaciji, što olakšava timu da prati tok zahteva i identifikuje greške;
- U ranoj fazi razvoja aplikacije, troškovi su jeftiniji jer ni troškovi infrastrukture ni troškovi razvoja ne nastaju dok se ne dodaju nove funkcije.
Nedostaci ove strategije se ogledaju u
- Ograničena fleksibilnost implementacije – timovi moraju čekati ako samo nekoliko njih radi na projektu i nova implementacija je potrebna svaki put kada ažurirate kod;
- Usvajanje novih tehnologija je izazovno jer to zahtijeva ponovno pisanje značajnog dijela, ako ne i cijelog projekta.
- Kada se broj programera povećava, sistem koda postaje usko povezan, komplikovan i težak za upravljanje i razumevanje.
- Organizacijski problemi – svaki član tima mora koristiti istu verziju biblioteka i prijaviti sve promjene ako mnogo timova radi na monolitnom projektu.
- Zabrinutost oko skalabilnosti – budući da su komponente projekta međusobno povezane, njihovo odvojeno skaliranje predstavlja poteškoće koje rezultiraju značajnim zastojima i većim troškovima.
- Složena logika projekta mogla bi biti teška za razumijevanje novim članovima tima, posebno ako inženjeri koji su prvobitno radili na njemu više nisu zaposleni.
Razvoj mikroservisa i njihovih bliskih srodnika, te mikro frontendova, riješio je primarne probleme monolitnih sistema.
Arhitektura mikroservisa
Arhitektonska metoda poznata kao mikroservis dozvoljava kreiranje mnogih labavo povezanih i neovisno implementiranih manjih komponenti, ili usluga, koje čine pozadinu aplikacije.
Svaka usluga ima svoju bazu koda, CI/CD cjevovode, DevOps procedure i procese za njihovo pokretanje.
Možete vidjeti da je monolitni backend tim podijeljen u zasebne timove gledajući gornju sliku.
Svaki se pojedinačno fokusira na različite aspekte aplikacije (kao što su usluga proizvoda, usluga pretraživanja i usluga plaćanja).
Komunikacija između servisa odvija se kroz uspostavljene protokole poznate kao API-ji, kao što je lagani REST API protokol koji koristi sinhrone obrasce zahtjev-odgovor.
Druga opcija je korištenje asinhrone komunikacije pomoću softvera kao što je Kafka, koji nudi komunikacijske strukture i događaje za objavljivanje/pretplatu.
Mikroservis se integriše sa frontendom preko pozadine za uslugu frontend (BFF) ili API pristupnog prolaza kroz mrežu. BFF nudi prilagođeni API za svakog klijenta, dok API Gateways daju jednu tačku pristupa za kolekciju mikroservisa.
Ali čak i sa autonomnim backend komponentama i svim prednostima koje one pružaju, frontend je i dalje monolit.
Stoga su mikro frontendi korisni ovdje.
Arhitektura mikro frontenda
Slično mikroservisima, gdje labavo povezanim komponentama upravlja nekoliko timova, mikro frontend arhitektura primjenjuje koncept na pretraživač.
Ova korisnička sučelja web aplikacija slijede ovu strukturu, koja se sastoji od donekle autonomnih komponenti.
Timovi se također kreiraju prema potrebama klijenata ili slučajevima korištenja, a ne prema određenoj stručnosti ili tehnologiji.
Shodno tome, timovi su uključeni u mikroservise i mikro frontend projekte.
- vertikalno rezani — pošto na istom projektu rade i frontend programeri, stručnjaci za podatke, backend inženjeri, QA inženjeri, itd., oni kreiraju svoje karakteristike iz korisnički interfejs u baze podataka; i
- međufunkcionalni – svaki član tima doprinosi svojoj stručnosti grupi.
Timovi također mogu odabrati tehnološku grupu koja najbolje odgovara njihovoj određenoj liniji poslovanja.
Jedan tim može koristiti React za programiranje svog fragmenta. Drugi tim kreira novu Angular verziju. Vue.js je jedan takav primjer.
Mikro frontendovi se koriste zajedno sa srodnim mikroservisima za rješavanje problema koje razvojni timovi obično imaju s monolitima. Strategija nudi sljedeće prednosti.
- Tehnološka sloboda: Frontend inženjeri mogu odabrati alternativne JavaScript okvire, runtime okruženja i čitav niz tehnologija u zavisnosti od potreba kompanije. Povrh zastarjele arhitekture, mogao bi se primijeniti novi okvir.
- Veći stepen fleksibilnosti je moguć jer je svaki mikro frontend samostalan i može se zasebno razvijati, testirati, implementirati i nadograditi. Kao rezultat toga, ako jedan tim radi na funkciji i pokrenuo je ispravku greške, a drugi tim mora dodati vlastitu funkciju, ne moraju čekati da prvi tim završi svoj zadatak.
- Autonomni timovi i sistemi: Svaki proizvodni tim, a samim tim i svaka funkcija, mogu funkcionisati uz malu ovisnost o drugima, što mu omogućava da nastavi s radom čak i kada su obližnje komponente nedostupne.
- Višestruke, manje baze koda: Svaki od mikro frontendova će imati svoju vlastitu, upravljivu, manju bazu koda. Manje ljudi će se fokusirati na određenu komponentu korisničkog sučelja, pojednostaviti pregled koda i poboljšati cjelokupnu organizaciju.
- Jednostavno skaliranje aplikacije: Još jedna prednost mikro frontendova je mogućnost skaliranja svake funkcije pojedinačno. Za razliku od monolita, gdje se cijeli program mora skalirati svaki put kada se doda nova funkcija, ovo čini cijeli proces efikasnijim u smislu vremena i novca.
Kako radi mikro frontend?
Kao što smo ranije naveli, timovi su vertikalno organizovani unutar mikro frontend arhitekture, što znači da su razdvojeni znanjem ili svrhom domena i odgovorni su od početka do kraja za određeni proizvod.
Može imati jednu ili dvije pozadinske mikroservise kao i mali frontend. Detaljnije, hajde da ispitamo karakteristike ovog vizuelnog elementa, interakcije sa drugim komponentama korisničkog interfejsa i ugradnju u početnu stranicu.
Mikro frontend može biti
- cijelu stranicu (npr. stranicu s detaljima o proizvodu) ili
- dijelove stranice koje mogu koristiti drugi timovi, kao što su zaglavlja, podnožja i trake za pretraživanje.
Veliku web stranicu možete podijeliti na nekoliko vrsta stranica i svaki tip dati određenom osoblju na kojem će raditi.
Međutim, nekoliko komponenti se često pojavljuje na brojnim stranicama, kao što su zaglavlja, podnožja, blokovi prijedloga, itd. Blok prijedloga, na primjer, može biti uključen na početnu stranicu, stranicu s detaljima o proizvodu ili čak stranicu za naplatu.
U suštini, timovi mogu kreirati delove koje drugi timovi mogu koristiti na svojim stranicama.
Mikro sučelja, međutim, mogu se implementirati odvojeno kao različiti projekti za razliku od komponenti za višekratnu upotrebu.
Sve ovo zvuči fantastično, ali da bi se stvorio jedinstveni interfejs, stranice i fragmenti moraju nekako da se kombinuju.
Ovo zahtijeva integraciju frontend-a, što se može postići različitim strategijama, uključujući rutiranje, kompoziciju i komunikaciju (pogledajte gornju sliku).
Routing
Kada je za pristup stranici u vlasništvu drugog tima potrebna usluga sa stranice koju kontrolira jedan tim, usmjeravanje je korisno za integraciju na razini stranice.
Svaki mikro frontend se obrađuje kao aplikacija na jednoj stranici. Jednostavne HTML veze se mogu koristiti za usmjeravanje.
Korisnik može natjerati pretraživač da preuzme ciljnu oznaku sa servera i zamijeni trenutnu stranicu novom klikom na hiperveze.
Shell aplikacije je minimum HTML-a, CSS-a i JavaScript-a koji pokreće korisničko sučelje. Čak i ako podaci o sadržaju traženi od servera još uvijek čekaju, korisnik odmah prima statično prikazanu stranicu. Centralna ljuska aplikacije služi kao nadređena aplikacija za aplikacije na jednoj stranici koje su kreirali različiti timovi.
Bez obzira na biblioteku ili okvir koji se koristi, meta-frameworks omogućavaju spajanje različitih stranica u jednu.
sastav
Kompozicija je proces raspoređivanja komada kako bi se uklopili u odgovarajuće prostore na stranici. U većini slučajeva, tim koji postavlja stranicu ne preuzima odmah sadržaj fragmenta.
Umjesto toga, postavlja rezervirano mjesto ili marker na mjesto gdje bi fragment trebao biti u oznaci.
Koristeći drugačiji proces sastavljanja, postiže se konačno sklapanje. Sastav se može podijeliti u dvije osnovne kategorije: na strani klijenta i na strani servera.
Sastav na strani klijenta: Web pretraživač se koristi za kreiranje i uređivanje HTML oznaka. Svaki mikro frontend ima mogućnost promjene i prikaza svoje oznake odvojeno od ostatka stranice.
Web komponente, na primjer, omogućavaju vam da izvedete ovu vrstu konstrukcije.
Plan je da se svaki fragment pretvori u web komponentu koja se može samostalno instalirati kao a.js fajl, nakon čega ih aplikacije mogu učitavati i renderirati u prostorima koji su za njih određeni u izgledu teme.
Web komponente zavise od HTML i DOM API-ja, koje drugi frontend okviri mogu koristiti, kao i standardne metode slanja i primanja podataka putem props-a i događaja.
Kompozicija na strani servera: Sa ovim dizajnom, dijelovi korisničkog interfejsa se kombinuju na serveru, što rezultira potpuno formiranom stranicom koja se šalje na stranu klijenta, ubrzavajući učitavanje.
Montažu se često obavlja odvojena usluga koja se nalazi između web pretraživača i web servera. CDN je jedna instanca usluge (mreža za isporuku sadržaja).
Možete odabrati jednu ili kombinaciju ova dva, ovisno o vašim potrebama.
Mikro frontend komunikacioni obrasci
Arhitektura mikro frontenda najbolje funkcionira kada postoji mala ili nikakva interakcija između različitih komponenti. Mikro frontendovi povremeno moraju razgovarati jedni s drugima i dijeliti informacije. Evo nekoliko potencijalnih obrazaca koji bi mogli dovesti do toga.
- Web radnici: Radnik na mreži je mehanizam koji omogućava web sadržaju da pokreće JavaScript u pozadini, nezavisno od drugih skripti, i bez uticaja na brzinu stranice. Za svaku mikro aplikaciju bit će osiguran jedinstveni radnički API. Ova prednost je u tome što se dugotrajni posao može obaviti u drugoj niti, omogućavajući UI niti da nastavi bez usporavanja ili zaustavljanja.
- Emiter događaja: U ovom slučaju, mnoge komponente komuniciraju jedna s drugom slušajući i djelujući na bilo koje promjene stanja u komponentama na koje su pretplaćene. Drugi mikro frontendovi koji su se pretplatili na taj određeni događaj odgovaraju kada mikro frontend pokrene taj događaj. Emiter događaja koji je uveden u svaki mikro-frontend čini ovo izvodljivim.
- Povratni pozivi i rekviziti: U ovom odjeljku definirate roditeljsku komponentu i podređene komponente. Komunikacija je organizirana u strukturu nalik stablu. Nadređene komponente koriste props da prenesu podatke kao funkcije niz stablo komponenti do podređenih komponenti. Zauzvrat, dijete može efikasno upozoriti roditelja kada se nešto dogodi u njihovom stanju tako što će odgovoriti na povratne pozive. React koristi ovaj način rada.
Prednosti mikro frontenda
Razvoj u brzo autonomnim timovima
Nezavisni tim može kreirati svaki dio web aplikacije ili web stranice kada se koristi mikro frontend metoda.
Svaki tim je potpuno autonoman, što znači da je zadužen za cijeli ciklus razvoja komponente, od koncepta do izdavanja i postprodukcije.
Dodatno, to implicira da različiti timovi mogu neometano sarađivati dok istovremeno rade na istom projektu.
Stoga su ciklusi izdavanja znatno brži nego što bi bili kod front-end monolita.
Manje kodne baze pojedinačnih mikro frontendova dovode do čistijeg koda
Monolitni prednji krajevi imaju velike, glomazne baze kodova koje vremenom postaju sve haotičnije i izazovnije za upravljanje.
Mikro frontendovi rješavaju ovaj problem. Izvorni kod svakog mikro frontenda je lakši za upravljanje jer je manji, jednostavniji i kompaktniji.
Sveukupno web rješenje ima koristi od čistijeg koda kao posljedica.
Poboljšana stabilnost aplikacije zbog labavog spoja
Web rješenje rijetko se može podijeliti na potpuno nezavisne dijelove. Shodno tome, mikro frontendovi razgovaraju jedni s drugima.
Međutim, svaka veza između komponenti je značajna uprkos slaboj povezanosti.
Kvar jedne komponente ima mali ili nikakav utjecaj na rad svih ostalih komponenti, što osigurava poboljšanu stabilnost web rješenja.
Testiranje pojedinačnih karakteristika je pojednostavljeno
Ova prednost proizlazi iz karakteristika mikro frontendova. Na osnovu ovog arhitektonskog dizajna, klijentska strana web rješenja je modularna i svaki modul je autonoman.
Kao rezultat toga, timu je lakše procijeniti samo mali dio korisničkog sučelja nego testirati masivni monolit.
Smanjena veličina paketa dovodi do bržeg učitavanja stranice
Jedan od primarnih uzroka odloženog vremena učitavanja u monolitnim web sistemima bogatim funkcijama je veličina JavaScript paketa. S druge strane, pristup mikro frontendu olakšava smanjenje vremena učitavanja stranice.
Preglednik ne mora stalno preuzimati nepotreban kod jer se web stranica sastoji od nekoliko sićušnih paketa. Kao rezultat toga, povećavaju se performanse stranice i vrijeme učitavanja.
Tehnološka nezavisnost
Višestruki front-end okviri programeri mogu koristiti za kreiranje jedinstvenog online rješenja s mikro-frontend arhitekturom.
Budući da je svaka komponenta autonomna, može se konstruirati koristeći bilo koju tehnologiju koja najbolje odgovara zadacima tima.
Naravno, programeri bi trebalo da budu oprezni kada biraju okvire za softverski projekat za koji su zaduženi, a konsultacije sa drugim timovima se i dalje savetuju.
Međutim, nema šanse da ćete biti prisiljeni koristiti naslijeđeni okvir za vrijeme trajanja aplikacije.
Nedostaci Micro Frontenda
Testiranje kompleksnog web rješenja u cijelosti
Testiranje različitih modula web rješenja je jednostavno kada se koristi mikro-frontend arhitektura. Međutim, razlikuje se od evaluacije web aplikacije u cjelini.
Prije nastavka provjerite funkcioniraju li svi dijelovi kako je predviđeno. Ovo može biti teško jer mikro frontendovi rade nezavisno i imaju odvojene procese isporuke.
Skupe početne investicije
Razvoj mikro frontenda obično zahtijeva značajne finansijske izdatke. Skupo je sastaviti i održavati mnoge front-end timove.
Osim toga, trebat će vam menadžersko osoblje da organizira posao, osigura da je sve koordinisano i garantuje odličnu timsku komunikaciju.
Složenost razvoja i implementacije
Procedure razvoja i implementacije mogu postati složenije kao rezultat dizajna mikro frontenda.
Rješenje bi moglo biti pretrpano previše komponenti od strane nezavisnih razvojnih timova koji rade na istom projektu, na primjer, što bi moglo uzrokovati probleme u fazi implementacije.
Pravo sastavljanje svih modula i njihova glatka integracija u cjelokupnu shemu također nije uvijek jednostavna; ovaj rad obično zahtijeva temeljno razumijevanje svih zavisnosti.
Problemi održavanja koherentnosti u korisničkom iskustvu
Održavanje dosljednog korisničkog sučelja je izazov kada timovi rade odvojeno na nekoliko dijelova softvera.
Web rješenje bi trebali dijeliti svi programeri projekta. Inače, na putu može biti mnogo kontradikcija.
zaključak
Mikro frontendi, suvremeni arhitektonski dizajn, mogu uvelike poboljšati performanse velikih projekata web razvoja zasnovanih na mikroservisima.
Omogućava programerima da podijele kompletno rješenje na diskretne dijelove koje može kreirati nekoliko autonomnih timova. Iz ovoga proizilaze brojne prednosti, uključujući brže uvođenje funkcija, lakše testiranje pojedinačnih modula i besprijekornije nadogradnje.
Ali postoje i neke poteškoće sa mikro frontendovima.
Sveobuhvatno testiranje aplikacije, na primjer, moglo bi biti izazovno.
Dodatno, budući da je potreban veliki tim inženjera i administratora, mikro frontend projekti su veoma skupi.
Shodno tome, prije nego što donesete odluku, morate uzeti u obzir sve komponente vašeg poslovnog slučaja.
Vladimir Čamaj
Nekako nisam shvatio na kom principu funkcionira komunikacija između pojedinih komponenti na frontendu. Ne razumijem kako želite da povežete komponente koje su kreirane u različitim okvirima. U članku nema ništa o tome. Sistem događaja i slušalaca mi izgleda kao pakao na zemlji. Kako to da zamislimo?