Frontendin mikroratkaisureititin: Sovellusten välinen navigointi

Nykyaikaisessa web-kehityksessä mikroratkaisuarkkitehtuuri on saavuttanut merkittävää suosiota suurten, monimutkaisten sovellusten rakentamiseen. Se sisältää monoliittisen frontendin jakamisen pienempiin, itsenäisiin ja käyttöönotettaviin yksiköihin (mikroratkaisuihin). Yksi keskeisistä haasteista tässä arkkitehtuurissa on sovellusten välisen navigoinnin hallinta, joka antaa käyttäjille mahdollisuuden liikkua saumattomasti näiden itsenäisten mikroratkaisujen välillä. Tämä artikkeli tarjoaa kattavan oppaan frontendin mikroratkaisureitityksestä ja sovellusten välisestä navigoinnista.

Mitä ovat mikroratkaisut?

Mikroratkaisut ovat arkkitehtoninen tyyli, jossa itsenäisesti toimitettavat frontend-sovellukset yhdistetään yhdeksi, yhtenäiseksi käyttökokemukseksi. Tämä on analoginen backendin mikropalveluille. Jokaista mikroratkaisua omistaa tyypillisesti erillinen tiimi, mikä mahdollistaa suuremman autonomian, nopeammat kehityssyklit ja helpomman ylläpidon. Mikroratkaisujen edut ovat:

• Itsenäinen käyttöönotto: Tiimit voivat ottaa mikroratkaisunsa käyttöön vaikuttamatta muihin sovelluksen osiin.
• Teknologian monimuotoisuus: Erilaiset mikroratkaisut voidaan rakentaa eri teknologioilla, mikä antaa tiimeille mahdollisuuden valita parhaan työkalun työhön. Esimerkiksi yksi tiimi saattaa käyttää Reactia, kun taas toinen Vue.js:ää tai Angularia.
• Skaalautuvuus: Sovellusta voidaan skaalata helpommin, koska jokaista mikroratkaisua voidaan skaalata itsenäisesti.
• Parannettu ylläpidettävyys: Pienempiä koodikantoja on helpompi ymmärtää ja ylläpitää.
• Tiimin autonomia: Tiimeillä on enemmän hallintaa omaan koodiinsa ja kehitysprosessiinsa.

Tarve mikroratkaisureitittimelle

Ilman hyvin määriteltyä reititysstrategiaa käyttäjät kokevat epäyhtenäisen ja turhauttavan kokemuksen navigoidessaan mikroratkaisujen välillä. Mikroratkaisureititin ratkaisee tämän tarjoamalla keskitetyn mekanismin navigoinnin hallintaan koko sovelluksen alueella. Tämä sisältää:

• URL-hallinta: Varmistetaan, että URL heijastaa tarkasti käyttäjän nykyistä sijaintia sovelluksessa.
• Tilan hallinta: Tilojen jakaminen mikroratkaisujen välillä tarvittaessa.
• Viivästetty lataus: Mikroratkaisujen lataaminen vain tarvittaessa suorituskyvyn parantamiseksi.
• Todennus ja valtuutus: Käyttäjän todennuksen ja valtuutuksen hallinta eri mikroratkaisujen välillä.

Sovellusten väliset navigointistrategiat

Mikroratkaisuarkkitehtuurissa on useita tapoja toteuttaa sovellusten välinen navigointi. Jokaisella lähestymistavalla on omat etunsa ja haittansa, ja paras valinta riippuu sovelluksesi erityisistä vaatimuksista.

1. Keskitetyn reitittimen käyttö (Single-Spa)

Single-Spa on suosittu kehys mikroratkaisujen rakentamiseen. Se käyttää keskitettyä reititintä navigoinnin hallintaan eri sovellusten välillä. Pääsovellus toimii orkestroijana ja vastaa mikroratkaisujen renderöinnistä ja poistamisesta nykyisen URL-osoitteen perusteella.

Miten se toimii:

1. Käyttäjä navigoi tiettyyn URL-osoitteeseen.
2. Single-spa-reititin sieppaa URL-muutoksen.
3. URL-osoitteen perusteella reititin määrittää, minkä mikroratkaisun tulisi olla aktiivinen.
4. Reititin aktivoi vastaavan mikroratkaisun ja poistaa kaikki muut aktiiviset mikroratkaisut.

Esimerkki (Single-Spa):

Oletetaan, että sinulla on kolme mikroratkaisua: home, products ja cart. Single-spa-reititin konfiguroitaisiin seuraavasti:

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();

Tässä esimerkissä jokainen mikroratkaisu on rekisteröity single-spaan, ja tarjotaan funktio, joka määrittää, milloin mikroratkaisun tulisi olla aktiivinen URL-osoitteen perusteella. Kun käyttäjä navigoi osoitteeseen /products, products-mikroratkaisu aktivoidaan.

Edut:

• Keskitetty reitityksen hallinta.
• Yksinkertaistettu tilanhallinta (voi käsitellä single-spa-orkestroija).
• Helppo integroida olemassa oleviin sovelluksiin.

Haitat:

• Yksi vikaantumispiste. Jos orkestroija kaatuu, koko sovellus kärsii.
• Voi muodostua suorituskyvyn pullonkaulaksi, jos sitä ei toteuteta tehokkaasti.

2. Module Federation (Webpack 5)

Webpack 5:n Module Federation antaa sinulle mahdollisuuden jakaa koodia eri Webpack-koontien välillä ajonaikana. Tämä tarkoittaa, että voit paljastaa komponentteja, moduuleja tai jopa kokonaisia sovelluksia yhdestä koontiversiosta (isäntä) toiseen (etäkäyttöinen). Tämä helpottaa mikroratkaisujen rakentamista, joissa jokainen mikroratkaisu on erillinen Webpack-koontiversio.

Miten se toimii:

1. Jokainen mikroratkaisu rakennetaan erillisenä Webpack-projektina.
2. Yksi mikroratkaisu nimetään isäntäsovellukseksi.
3. Isäntäsovellus määrittelee, mitä moduuleja se haluaa kuluttaa etäkäyttöisiltä mikroratkaisuilta.
4. Etäkäyttöiset mikroratkaisut määrittelevät, mitä moduuleja ne haluavat paljastaa isäntäsovellukselle.
5. Ajonaikana isäntäsovellus lataa tarvittaessa etäkäyttöisten mikroratkaisujen paljastamat moduulit.

Esimerkki (Module Federation):

Oletetaan host-sovellus ja remote-sovellus.

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'], }), ], };

Tässä esimerkissä host-sovellus kuluttaa Button-komponentin remote-sovelluksesta. shared-asetus varmistaa, että molemmat sovellukset käyttävät samaa react- ja react-dom-versiota.

Edut:

• Hajautettu arkkitehtuuri. Jokainen mikroratkaisu on itsenäinen ja sitä voidaan kehittää ja ottaa käyttöön erikseen.
• Koodin jakaminen. Module Federation antaa sinun jakaa koodia eri sovellusten välillä ajonaikana.
• Viivästetty lataus. Moduulit ladataan vain tarvittaessa, mikä parantaa suorituskykyä.

Haitat:

• Monimutkaisempi asentaa ja konfiguroida kuin single-spa.
• Vaatii jaettujen riippuvuuksien huolellista hallintaa versioristiriitojen välttämiseksi.

3. Web-komponentit

Web-komponentit ovat joukko web-standardeja, jotka antavat sinulle mahdollisuuden luoda uudelleenkäytettäviä mukautettuja HTML-elementtejä. Näitä komponentteja voidaan käyttää missä tahansa web-sovelluksessa riippumatta käytetystä kehyksestä. Tämä tekee niistä luonnollisen valinnan mikroratkaisuarkkitehtuuriin, koska ne tarjoavat teknologia-agnostisen tavan rakentaa ja jakaa käyttöliittymäkomponentteja.

Miten se toimii:

1. Jokainen mikroratkaisu paljastaa käyttöliittymänsä Web-komponenttien joukkona.
2. Pääsovellus (tai toinen mikroratkaisu) kuluttaa näitä Web-komponentteja tuomalla ne ja käyttämällä niitä HTML:ssään.
3. Web-komponentit hoitavat oman renderöinnin ja logiikan.

Esimerkki (Web-komponentit):

micro-frontend-a.js:

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

Hei Mikroratkaisusta A!

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

index.html (pääsovellus):

Pääsovellus

Tässä esimerkissä micro-frontend-a.js-tiedosto määrittelee Web-komponentin nimeltä micro-frontend-a. index.html-tiedosto tuo tämän tiedoston ja käyttää Web-komponenttia HTML:ssään. selain renderöi Web-komponentin näyttäen "Hei Mikroratkaisusta A!".

Edut:

• Teknologia-agnostinen. Web-komponentteja voidaan käyttää minkä tahansa kehyksen tai ilman kehystä.
• Uudelleenkäytettävyys. Web-komponentteja voidaan helposti käyttää uudelleen eri sovelluksissa.
• Kapselointi. Web-komponentit kapseloivat omat tyylinsä ja logiikkansa, estäen ristiriitoja muiden sovelluksen osien kanssa.

Haitat:

• Toteuttaminen voi olla työläämpää kuin muut lähestymistavat.
• Saattaa vaatia polyfill-tiedostoja vanhempien selainten tukemiseksi.

4. Iframet

Iframet (Inline Frames) ovat vanhempi mutta edelleen käyttökelpoinen vaihtoehto mikroratkaisujen eristämiseen. Jokainen mikroratkaisu toimii oman iframensa sisällä, tarjoten korkean tason eristyksen. Kommunikointi iframien välillä voidaan saavuttaa postMessage API:n avulla.

Miten se toimii:

1. Jokainen mikroratkaisu otetaan käyttöön erillisenä web-sovelluksena.
2. Pääsovellus sisältää jokaisen mikroratkaisun iframessa.
3. Kommunikointi pääsovelluksen ja mikroratkaisujen välillä tapahtuu postMessage API:n avulla.

Esimerkki (Iframet):

index.html (pääsovellus):

Pääsovellus

Tässä esimerkissä index.html-tiedosto sisältää kaksi iframia, jotka kumpikin osoittavat eri mikroratkaisuun.

Edut:

• Korkea eristysaste. Mikroratkaisut ovat täysin eristettyjä toisistaan, mikä estää ristiriitoja.
• Helppo toteuttaa. Iframet ovat yksinkertainen ja hyvin ymmärretty teknologia.

Haitat:

• Kommunikointi iframien välillä voi olla vaikeaa.
• Voi aiheuttaa suorituskykyongelmia useiden iframien ylläpitokustannusten vuoksi.
• Huono käyttökokemus saumattoman integroinnin puutteen vuoksi.

Tilanhallinta mikroratkaisujen välillä

Tilanhallinta mikroratkaisujen välillä on kriittinen osa sovellusten välistä navigointia. Voidaan käyttää useita strategioita:

• URL-pohjainen tila: Tilojen koodaus URL-osoitteeseen. Tämä lähestymistapa tekee sovelluksen tilan jakamisesta URL-osoitteiden kautta ja helposti kirjanmerkkikelpoiseksi.
• Keskitetty tilanhallinta (Redux, Vuex): Globaalin tilanhallintakirjaston käyttäminen tilojen jakamiseen mikroratkaisujen välillä. Tämä on erityisen hyödyllistä monimutkaisille sovelluksille, joissa on merkittävästi jaettua tilaa.
• Mukautetut tapahtumat: Mukautettujen tapahtumien käyttö tilamuutosten kommunikointiin mikroratkaisujen välillä. Tämä lähestymistapa mahdollistaa mikroratkaisujen löyhän kytkennän.
• Selain tallennustila (LocalStorage, SessionStorage): Tilojen tallentaminen selain tallennustilaan. Tämä lähestymistapa sopii yksinkertaisiin tiloihin, joita ei tarvitse jakaa kaikkien mikroratkaisujen kanssa. Ole kuitenkin tietoinen turvallisuusnäkökohdista arkaluontoisten tietojen tallentamisessa.

Todennus ja valtuutus

Todennus ja valtuutus ovat minkä tahansa web-sovelluksen kriittisiä näkökohtia, ja ne ovat entistäkin tärkeämpiä mikroratkaisuarkkitehtuurissa. Yleisiä lähestymistapoja ovat:

• Keskitetty todennuspalvelu: Erillinen palvelu hoitaa käyttäjän todennuksen ja myöntää tunnuksia (esim. JWT). Mikroratkaisut voivat sitten vahvistaa nämä tunnukset määrittääkseen käyttäjän valtuutuksen.
• Jaettu todennusmoduuli: Jaettu moduuli vastaa todennuslogiikan käsittelystä. Tätä moduulia voivat käyttää kaikki mikroratkaisut.
• Reuna todennus: Todennus hoidetaan verkon reunalla (esim. käyttämällä käänteistä välityspalvelinta tai API-yhdyskäytävää). Tämä lähestymistapa voi yksinkertaistaa todennuslogiikkaa mikroratkaisuissa.

Parhaat käytännöt mikroratkaisureititykseen

Tässä on joitain parhaita käytäntöjä, joita kannattaa pitää mielessä mikroratkaisureititystä toteutettaessa:

• Pidä se yksinkertaisena: Valitse yksinkertaisin reititysstrategia, joka vastaa tarpeitasi.
• Irrota mikroratkaisut toisistaan: Minimoi riippuvuudet mikroratkaisujen välillä edistääksesi itsenäistä kehitystä ja käyttöönottoa.
• Käytä yhtenäistä URL-rakennetta: Ylläpidä yhtenäistä URL-rakennetta kaikissa mikroratkaisuissa käyttökokemuksen ja SEO:n parantamiseksi.
• Toteuta viivästetty lataus: Lataa mikroratkaisut vain silloin, kun niitä tarvitaan suorituskyvyn parantamiseksi.
• Seuraa suorituskykyä: Seuraa säännöllisesti mikroratkaisusovelluksesi suorituskykyä tunnistaaksesi ja käsitelläksesi mahdolliset pullonkaulat.
• Luo selkeät viestintäkanavat: Varmista, että eri mikroratkaisujen parissa työskentelevillä tiimeillä on selkeät viestintäkanavat kehitystyön koordinoimiseksi ja integrointiongelmien ratkaisemiseksi.
• Toteuta vankka virheidenkäsittely: Toteuta vankka virheidenkäsittely käsitelläksesi sulavasti yksittäisten mikroratkaisujen virheitä ja estääksesi niitä vaikuttamasta koko sovellukseen.
• Automaattinen testaus: Toteuta kattava automaattinen testaus, mukaan lukien yksikkötestit, integraatiotestit ja päästä päähän -testit, varmistaaksesi mikroratkaisusovelluksesi laadun ja vakauden.

Johtopäätös

Mikroratkaisureititys on monimutkainen mutta olennainen osa skaalautuvien ja ylläpidettävien web-sovellusten rakentamista. Huolellisesti harkitsemalla erilaisia reititysstrategioita ja tämän artikkelin parhaita käytäntöjä voit luoda saumattoman ja käyttäjäystävällisen kokemuksen käyttäjillesi. Oikean lähestymistavan valinta, olipa kyseessä sitten keskitetty reititin, kuten Single-Spa, Module Federation, Web-komponentit tai jopa Iframet, riippuu erityistarpeistasi ja prioriteeteistasi. Muista priorisoida irrottaminen, yhtenäiset URL-rakenteet ja suorituskyvyn optimointi. Hyvin suunnitellun reititysstrategian avulla voit vapauttaa mikroratkaisuarkkitehtuurin täyden potentiaalin ja rakentaa todella poikkeuksellisia web-sovelluksia maailmanlaajuiselle yleisölle.