Sentralisert rutingsstrategi
Forstå hvordan én host-applikasjon kan håndtere ruting for alle integrerte Micro Frontends.
Sentralisert rutingsstrategi er en gratis leksjon i Mikrofrontend-arkitektur med Module Federation på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mikrofrontend-arkitektur med Module Federation, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Introduksjon til sentralisert ruting
Velkommen til leksjonen om sentralisert rutingstrategi i Micro Frontends! Denne tilnærmingen er avgjørende for å håndtere navigasjon på tvers av ulike deler av en stor applikasjon.
Vi skal se på hvordan én «vert»-applikasjon kan ta kontroll over alle rutingavgjørelser og gi en enhetlig brukeropplevelse.
Hva er sentralisert ruting?
I et oppsett med sentralisert ruting er hovedapplikasjonen, vertsapplikasjonen (også kalt skallet eller containeren), ansvarlig for å definere og administrere alle rutene for hele applikasjonen.
- Den fungerer som én sannhetskilde for navigasjon.
- Den avgjør hvilken Micro Frontend-komponent (MFE) som skal lastes inn for en gitt URL-bane.
- Eksterne MFE-er håndterer vanligvis ikke sine egne ruter på øverste nivå.
Vertens rolle i rutingen
Se for Dem vertsapplikasjonen som en trafikkdirigent. Når en bruker navigerer til en URL, fanger verten den opp, slår opp i rutingtabellen og videresender deretter forespørselen til riktig Micro Frontend.
Verten bruker ofte et rutingbibliotek (for eksempel React Router for React-applikasjoner) til å definere disse globale rutene.
Konseptuelt oppsett av vertsrouteren
Her er en forenklet oversikt over hvordan vertens rutingkonfigurasjon kan se ut ved bruk av et populært rutingbibliotek. Legg merke til hvordan ulike baner tilordnes komponenter fra forskjellige Micro Frontends.
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// Imagine these are dynamically loaded MFE components
const ProductMFE = React.lazy(() => import('product_app/ProductPage'));
const CartMFE = React.lazy(() => import('cart_app/CartPage'));
const UserProfileMFE = React.lazy(() => import('user_app/ProfilePage'));
const App = () => (
<Router>
<Switch>
<Route path="/products" component={ProductMFE} />
<Route path="/cart" component={CartMFE} />
<Route path="/profile" component={UserProfileMFE} />
<Route path="/" component={HomePage} exact />
</Switch>
</Router>
);
export default App;Dynamisk innlasting av MFE-er
For å laste inn MFE-er effektivt bruker verten vanligvis dynamiske importer. Det betyr at koden til en MFE bare hentes og lastes inn når den tilsvarende ruten aktiveres, ikke på forhånd når hovedapplikasjonen lastes inn.
Dette forbedrer innlastingstiden for den første siden, siden brukerne bare laster ned koden de trenger.
Kode: Dynamisk MFE-import
Denne kodebiten viser hvordan React.lazy() kombinert med Suspense muliggjør dynamisk innlasting og viser et reserveinnhold mens MFE-komponenten hentes.
import React, { Suspense } from 'react';
// Dynamically import a remote component
const RemoteButton = React.lazy(() => import('remoteApp/Button'));
const HostComponent = () => (
<div>
<h1>My Host App</h1>
<Suspense fallback={<div>Loading Remote Button...</div>}>
<RemoteButton label="Click Me!" />
</Suspense>
</div>
);
export default HostComponent;Fordeler med sentralisert ruting
En sentralisert rutingstrategi gir flere viktige fordeler:
- Enhetlig brukeropplevelse: Sikrer konsistente navigasjonsmønstre og URL-er i hele applikasjonen.
- Forenklet global navigasjon: Gjør det enklere å implementere én samlet navigasjonslinje eller meny.
- Kontroll for verten: Verten beholder full kontroll over hvilke MFE-er som lastes inn, og når.
- Enklere analyse: Sentralisert ruting kan forenkle sporing av brukerreiser i hele applikasjonen.
Vurderinger og utfordringer
Selv om sentralisert ruting har fordeler, medfører den også enkelte hensyn:
- Avhengighet av verten: Verten blir en kritisk avhengighet. Hvis den svikter, slutter hele rutingsystemet å fungere.
- Skalerbarhet for rutingslogikken: I en svært stor applikasjon kan vertens rutingkonfigurasjon bli kompleks og vanskelig å håndtere.
- MFE-enes autonomi: Eksterne MFE-er får mindre kontroll over sine egne offentlige URL-er.
- Versjonshåndtering: Endringer i vertens ruter kan kreve koordinering med utrullinger av MFE-er.
Når bør De bruke sentralisert ruting?
Denne strategien er ofte ideell i situasjoner der:
- Ett enkelt team eller én enhet eier det overordnede applikasjonsskallet og navigasjonen.
- Applikasjonen har et tydelig hierarki og et relativt stabilt sett med ruter på øverste nivå.
- Et konsekvent utseende og en helhetlig brukeropplevelse på tvers av alle MFE-er har høy prioritet.
- Det er behov for tett integrasjon og delt kontekst på tvers av ulike deler av applikasjonen.
Test av rutingsstrategi
Hvilke av følgende er viktige kjennetegn ved eller fordeler med en sentralisert rutingsstrategi i Micro Frontends?
Oppsummering av sentralisert ruting
I denne leksjonen utforsket vi den sentraliserte rutingsstrategien. Vi lærte at vertsapplikasjonen kontrollerer alle ruter på øverste nivå og laster inn Micro Frontends dynamisk ved behov.
Denne tilnærmingen gir fordeler som en enhetlig brukeropplevelse og forenklet global navigasjon, men den skaper også en sterk avhengighet av verten. Det er viktig å forstå når denne strategien bør brukes, for å kunne utforme en effektiv Micro Frontend-arkitektur.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Sentralisert rutingsstrategi» gratis?
Ja – hele teksten i «Sentralisert rutingsstrategi» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Mikrofrontend-arkitektur med Module Federation-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hva lærer jeg i «Sentralisert rutingsstrategi»?
Forstå hvordan én host-applikasjon kan håndtere ruting for alle integrerte Micro Frontends. Du øver på Mikrofrontend-arkitektur med Module Federation med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Mikrofrontend-arkitektur med Module Federation?
Ingen tidligere erfaring er nødvendig. Mikrofrontend-arkitektur med Module Federation på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Sentralisert rutingsstrategi»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Mikrofrontend-arkitektur med Module Federation-leksjonen?
Ja. Alle Mikrofrontend-arkitektur med Module Federation-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Sentralisert rutingsstrategi
- Implementering av føderert ruting
- Deep linking og URL-håndtering
- Håndtering av nestet navigasjon og navigasjon på tvers av apper