Frontend Mikro-Frontend Maršrutizatorius: Kryžminis Programų Naršymas

Šiuolaikinėje interneto plėtroje mikro-frontend architektūra įgijo didelį populiarumą kaip būdas kurti dideles, sudėtingas programas. Tai apima monolitinio frontend padalijimą į mažesnius, nepriklausomus ir diegiamus vienetus (mikro-frontend). Vienas iš pagrindinių šios architektūros iššūkių yra kryžminio programų naršymo valdymas, leidžiantis vartotojams sklandžiai pereiti tarp šių nepriklausomų mikro-frontend. Šis straipsnis pateikia išsamų vadovą apie frontend mikro-frontend maršrutizavimą ir kryžminį programų naršymą.

Kas yra Mikro-Frontend?

Mikro-frontend yra architektūrinis stilius, kuriame nepriklausomai pristatomos frontend programos yra sujungtos į vieną, vientisą vartotojo patirtį. Tai analogiška mikropaslaugoms backend'e. Kiekvieną mikro-frontend paprastai valdo atskira komanda, o tai leidžia didesnį savarankiškumą, greitesnius kūrimo ciklus ir lengvesnę priežiūrą. Mikro-frontend privalumai yra šie:

• Nepriklausomas diegimas: Komandos gali diegti savo mikro-frontend, neturėdamos įtakos kitoms programos dalims.
• Technologijų įvairovė: Skirtingi mikro-frontend gali būti sukurti naudojant skirtingas technologijas, leidžiančias komandoms pasirinkti geriausią įrankį darbui. Pavyzdžiui, viena komanda gali naudoti React, o kita - Vue.js arba Angular.
• Skalavimas: Programa gali lengviau skalautis, nes kiekvienas mikro-frontend gali būti skalaujamas atskirai.
• Patobulintas prižiūrimumas: Mažesnius kodus lengviau suprasti ir prižiūrėti.
• Komandos autonomija: Komandos turi daugiau kontrolės savo kode ir kūrimo procese.

Mikro-Frontend Maršrutizatoriaus Poreikis

Be gerai apibrėžtos maršrutizavimo strategijos, vartotojai patirs nesuderintą ir erzinantį patyrimą naršydami tarp mikro-frontend. Mikro-frontend maršrutizatorius tai išsprendžia, suteikdamas centralizuotą mechanizmą naršymui visoje programoje valdyti. Tai apima:

• URL valdymą: Užtikrinant, kad URL tiksliai atspindi dabartinę vartotojo buvimo vietą programoje.
• Būsenos valdymą: Dalijimąsi būsena tarp mikro-frontend, jei reikia.
• Atsilaisvinantį įkėlimą: Mikro-frontend įkėlimą tik tada, kai jų reikia, kad būtų pagerintas našumas.
• Autentifikavimą ir autorizavimą: Vartotojo autentifikavimo ir autorizavimo tvarkymą tarp skirtingų mikro-frontend.

Kryžminio Programų Naršymo Strategijos

Yra keli būdai, kaip įgyvendinti kryžminio programų naršymą mikro-frontend architektūroje. Kiekvienas metodas turi savo privalumų ir trūkumų, o geriausias pasirinkimas priklauso nuo konkrečių jūsų programos reikalavimų.

1. Centralizuoto Maršrutizatoriaus Naudojimas (Single-Spa)

Single-Spa yra populiarus karkasas, skirtas mikro-frontend kurti. Jis naudoja centralizuotą maršrutizatorių naršymui tarp skirtingų programų valdyti. Pagrindinė programa veikia kaip orkestratorius ir yra atsakinga už mikro-frontend atvaizdavimą ir išmontavimą pagal dabartinį URL.

Kaip tai veikia:

1. Vartotojas naršo į konkretų URL.
2. Single-spa maršrutizatorius perima URL pakeitimą.
3. Remdamasis URL, maršrutizatorius nustato, kuris mikro-frontend turėtų būti aktyvus.
4. Maršrutizatorius aktyvuoja atitinkamą mikro-frontend ir išmontuoja visus kitus aktyvius mikro-frontend.

Pavyzdys (Single-Spa):

Tarkime, turite tris mikro-frontend: home, products ir cart. Single-spa maršrutizatorius būtų konfigūruojamas taip:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

Šiame pavyzdyje kiekvienas mikro-frontend yra registruojamas su single-spa, ir pateikiama funkcija, skirta nustatyti, kada mikro-frontend turėtų būti aktyvus pagal URL. Kai vartotojas naršo į /products, bus aktyvuotas products mikro-frontend.

Privalumai:

• Centralizuotas maršrutizavimo valdymas.
• Supaprastintas būsenos valdymas (gali būti tvarkomas single-spa orkestratoriumi).
• Lengva integruoti su esamomis programomis.

Trūkumai:

• Vienas gedimo taškas. Jei orkestratorius sugenda, paveikiama visa programa.
• Gali tapti našumo kliūtimi, jei neįgyvendinta efektyviai.

2. Modulio Federacija (Webpack 5)

Webpack 5 Modulio Federacija leidžia dalytis kodu tarp skirtingų Webpack surinkimų vykdymo metu. Tai reiškia, kad galite eksponuoti komponentus, modulius ar net visas programas iš vieno surinkimo (host) į kitą (remote). Tai palengvina mikro-frontend kūrimą, kur kiekvienas mikro-frontend yra atskiras Webpack surinkimas.

Kaip tai veikia:

1. Kiekvienas mikro-frontend yra sukuriamas kaip atskiras Webpack projektas.
2. Vienas mikro-frontend yra paskirtas kaip host programa.
3. Host programa apibrėžia, kokius modulius ji nori naudoti iš remote mikro-frontend.
4. Remote mikro-frontend apibrėžia, kokius modulius jie nori eksponuoti host programai.
5. Vykdymo metu host programa įkelia eksponuotus modulius iš remote mikro-frontend, kaip reikia.

Pavyzdys (Modulio Federacija):

Tarkime, turite host programą ir remote programą.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

Šiame pavyzdyje host programa naudoja Button komponentą iš remote programos. shared parinktis užtikrina, kad abi programos naudoja tą pačią react ir react-dom versiją.

Privalumai:

• Decentralizuota architektūra. Kiekvienas mikro-frontend yra nepriklausomas ir gali būti kuriamas bei diegiamas atskirai.
• Kodo dalijimasis. Modulio Federacija leidžia dalytis kodu tarp skirtingų programų vykdymo metu.
• Atsilaisvinantis įkėlimas. Moduliai įkeliami tik tada, kai jų reikia, pagerinant našumą.

Trūkumai:

• Sudėtingiau nustatyti ir konfigūruoti nei single-spa.
• Reikia kruopščiai valdyti bendras priklausomybes, kad būtų išvengta versijų konfliktų.

3. Interneto Komponentai

Interneto Komponentai yra interneto standartų rinkinys, leidžiantis kurti pakartotinai naudojamus pasirinktinius HTML elementus. Šie komponentai gali būti naudojami bet kurioje interneto programoje, nepriklausomai nuo naudojamo karkaso. Tai daro juos natūraliu pasirinkimu mikro-frontend architektūroms, nes jie suteikia technologijoms neutralų būdą kurti ir dalytis UI komponentais.

Kaip tai veikia:

1. Kiekvienas mikro-frontend eksponuoja savo UI kaip interneto komponentų rinkinį.
2. Pagrindinė programa (arba kitas mikro-frontend) naudoja šiuos interneto komponentus, importuodama juos ir naudodama savo HTML.
3. Interneto Komponentai tvarko savo atvaizdavimą ir logiką.

Pavyzdys (Interneto Komponentai):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Sveiki iš Micro-Frontend A!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (pagrindinė programa):

Pagrindinė programa

Šiame pavyzdyje micro-frontend-a.js faile apibrėžiamas interneto komponentas, vadinamas micro-frontend-a. index.html faile importuojamas šis failas ir HTML'e naudojamas interneto komponentas. Naršyklė atvaizduos interneto komponentą, rodydama "Sveiki iš Micro-Frontend A!".

Privalumai:

• Technologiškai neutralus. Interneto komponentai gali būti naudojami su bet kokiu karkasu arba be jo.
• Pakartotinis naudojimas. Interneto komponentus galima lengvai pakartotinai naudoti skirtingose ​​programose.
• Inkapsuliacija. Interneto komponentai inkapsuliuoja savo stilius ir logiką, neleidžiant konfliktams su kitomis programos dalimis.

Trūkumai:

• Gali būti sudėtingiau įgyvendinti nei kiti metodai.
• Gali prireikti polifilų senesnėms naršyklėms palaikyti.

4. Iframes

Iframes (Inline Frames) yra senesnis, bet vis dar perspektyvus pasirinkimas mikro-frontend izoliavimui. Kiekvienas mikro-frontend veikia savo iframe, suteikdamas aukštą izoliacijos laipsnį. Ryšys tarp iframes gali būti pasiektas naudojant postMessage API.

Kaip tai veikia:

1. Kiekvienas mikro-frontend yra įdiegtas kaip atskira interneto programa.
2. Pagrindinė programa įtraukia kiekvieną mikro-frontend į iframe.
3. Ryšys tarp pagrindinės programos ir mikro-frontend atliekamas naudojant postMessage API.

Pavyzdys (Iframes):

index.html (pagrindinė programa):

Pagrindinė programa

Šiame pavyzdyje index.html faile yra du iframes, kurių kiekvienas nukreipia į skirtingą mikro-frontend.

Privalumai:

• Aukštas izoliacijos laipsnis. Mikro-frontend yra visiškai izoliuoti vienas nuo kito, užkertant kelią konfliktams.
• Lengva įgyvendinti. Iframes yra paprasta ir gerai suprantama technologija.

Trūkumai:

• Gali būti sunku bendrauti tarp iframes.
• Gali kilti problemų dėl našumo dėl kelių iframes.
• Bloga vartotojo patirtis dėl sklandžios integracijos trūkumo.

Būsenos Valdymas Kryžminiame Mikro-Frontend

Būsenos valdymas tarp mikro-frontend yra kritinis kryžminio programų naršymo aspektas. Gali būti naudojamos kelios strategijos:

• URL pagrįsta būsena: Būsenos kodavimas URL. Šis metodas padaro programos būseną dalijamąsi per URL ir lengvai įtraukiamą į žymes.
• Centralizuotas būsenos valdymas (Redux, Vuex): Globalaus būsenos valdymo bibliotekos naudojimas būsenai dalytis tarp mikro-frontend. Tai ypač naudinga sudėtingoms programoms, turinčioms reikšmingą bendrą būseną.
• Pasirinktiniai įvykiai: Pasirinktinių įvykių naudojimas būsenos pokyčiams perduoti tarp mikro-frontend. Šis metodas leidžia laisvai susieti mikro-frontend.
• Naršyklės saugykla (LocalStorage, SessionStorage): Būsenos saugojimas naršyklės saugykloje. Šis metodas tinka paprastai būsenai, kuria nereikia dalytis su visais mikro-frontend. Tačiau reikia atsižvelgti į saugumo sumetimus saugant slaptus duomenis.

Autentifikavimas ir Autorizavimas

Autentifikavimas ir autorizavimas yra svarbūs bet kurios interneto programos aspektai, ir jie tampa dar svarbesni mikro-frontend architektūroje. Bendri metodai yra šie:

• Centralizuota Autentifikavimo Paslauga: Skirta paslauga tvarko vartotojo autentifikavimą ir išduoda žetonus (pvz., JWT). Tada mikro-frontend gali patvirtinti šiuos žetonus, kad nustatytų vartotojo autorizavimą.
• Bendras Autentifikavimo Modulis: Bendras modulis yra atsakingas už autentifikavimo logikos tvarkymą. Šį modulį gali naudoti visi mikro-frontend.
• Kraštinis autentifikavimas: Autentifikavimas tvarkomas tinklo krašte (pvz., naudojant atvirkštinį tarpinį serverį arba API šliuzą). Šis metodas gali supaprastinti autentifikavimo logiką mikro-frontend.

Geriausia Praktika Mikro-Frontend Maršrutizavimui

Štai keletas geriausios praktikos, į kurias reikia atsižvelgti įgyvendinant mikro-frontend maršrutizavimą:

• Laikykite tai paprasta: Pasirinkite paprasčiausią maršrutizavimo strategiją, kuri atitinka jūsų poreikius.
• Atsiejimo Mikro-Frontend: Sumažinkite priklausomybes tarp mikro-frontend, kad būtų skatinamas nepriklausomas kūrimas ir diegimas.
• Naudokite nuoseklią URL struktūrą: Palaikykite nuoseklią URL struktūrą visuose mikro-frontend, kad pagerintumėte vartotojo patirtį ir SEO.
• Įgyvendinkite atsilaisvinantį įkėlimą: Įkelkite mikro-frontend tik tada, kai jų reikia, kad pagerintumėte našumą.
• Stebėkite našumą: Reguliariai stebėkite savo mikro-frontend programos našumą, kad nustatytumėte ir išspręstumėte visus kliūtis.
• Įkurkite aiškius ryšių kanalus: Užtikrinkite, kad komandos, dirbančios su skirtingais mikro-frontend, turėtų aiškius ryšių kanalus, kad koordinuotų kūrimo pastangas ir išspręstų bet kokias integracijos problemas.
• Įgyvendinkite patikimą klaidų tvarkymą: Įgyvendinkite patikimą klaidų tvarkymą, kad sklandžiai tvarkytumėte atskirų mikro-frontend nesėkmes ir neleistumėte joms paveikti visą programą.
• Automatizuotas testavimas: Įgyvendinkite išsamų automatizuotą testavimą, įskaitant vienetų testus, integracijos testus ir galutinius testus, kad užtikrintumėte savo mikro-frontend programos kokybę ir stabilumą.

Išvada

Mikro-frontend maršrutizavimas yra sudėtingas, bet esminis mastelio ir prižiūrimų interneto programų kūrimo aspektas. Atidžiai apsvarstę skirtingas maršrutizavimo strategijas ir geriausią praktiką, aprašytas šiame straipsnyje, galite sukurti vientisą ir patogią vartotojo patirtį savo vartotojams. Teisingo metodo pasirinkimas, ar tai būtų centralizuotas maršrutizatorius, pvz., Single-Spa, Module Federation, Web Components ar net Iframes, priklauso nuo jūsų konkrečių poreikių ir prioritetų. Nepamirškite teikti pirmenybės atjungimui, nuoseklioms URL struktūroms ir našumo optimizavimui. Įgyvendinę gerai suprojektuotą maršrutizavimo strategiją, galite atskleisti visą mikro-frontend architektūros potencialą ir sukurti išskirtines interneto programas pasaulinei auditorijai.