Prinsipper for mikrofrontend-arkitektur
Hvorfor mikrofrontends, teamautonomi, uavhengig utrulling og avveininger ved teknologisk mangfold.
Prinsipper for mikrofrontend-arkitektur er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva er mikrofrontender?
Mikrofrontender bruker ideer fra mikrotjenester på brukergrensesnittet: en stor app deles opp i deler som utvikles og distribueres uavhengig av hverandre, hver eid av et eget team, og settes deretter sammen til én brukeropplevelse.
Monolittens utfordringer
En enkelt stor frontend betyr at alle team arbeider i samme kodebase, koordinerer utgivelser og deler ett bygg. Når organisasjonen vokser, blir dette en flaskehals – trege bygg, merge-konflikter og faste utgivelsesplaner.
Prinsipp: teamautonomi
Kjerneideen er ende-til-ende-eierskap. Teamet eier sin del av brukergrensesnittet fra kode til utrulling — sitt eget repo, sin egen pipeline og sitt eget kjøremiljø — slik at det kan jobbe uten å vente på andre.
Vertikale snitt, ikke lag
Teamene deles inn etter forretningsfunksjon (Checkout, Search, Profile), ikke etter teknisk lag. Hvert snitt inneholder sitt eget brukergrensesnitt, sin egen logikk og datatilgang for denne funksjonen.
Prinsipp: uavhengig utrulling
Hver mikrofrontend utrulles etter sin egen tidsplan. Search-teamet kan utrulle ti ganger om dagen uten å berøre Checkout. Utgivelsene er frikoblet, noe som reduserer risiko og behovet for koordinering.
Prinsipp: teknologimangfold (valgfritt)
Teamene kan velge ulike rammeverk for hvert snitt. I praksis standardiserer de fleste organisasjoner (for eksempel på Vue) for å kunne dele verktøy, men arkitekturen tillater mangfold når det er begrunnet.
Integrasjonstilnærming: build-time
En måte å kombinere snittene på er integrasjon ved build-time: Hver mikrofrontend publiseres som en pakke, og containerappen installerer dem som avhengigheter og bygger dem samlet.
// container package.json
{
"dependencies": {
"@org/checkout": "^2.1.0",
"@org/search": "^1.4.0"
}
}Avveiningen ved build-time
Integrasjon ved build-time er enkelt, men kobler utgivelsene sammen: For å levere en ny Checkout-versjon må containeren bygge på nytt og utrulles på nytt. Da mister du reell uavhengig utrulling.
Integrasjonstilnærming: run-time
Integrasjon ved run-time laster mikrofrontender i nettleseren under kjøring — containeren henter koden fra en remote når den trengs. Hver remote utrulles uavhengig, og containeren tar i bruk den nyeste versjonen uten å bygges på nytt.
Module Federation
Den ledende run-time-teknikken er Module Federation: en byggfunksjon som lar én app eksponere moduler og en annen bruke dem over nettverket under kjøring, samtidig som felles avhengigheter deles. Du skal bruke dette i kommende leksjoner.
Velg en tilnærming
Bruk build-time for små team som ønsker enkelhet og én utrulling. Bruk run-time (Module Federation) når uavhengig utrulling og teamautonomi er prioritert, og du aksepterer den økte driftskompleksiteten.
Rask sjekk
Sjekk forståelsen din av prinsippene for mikrofrontend.
Oppsummering
Du har lært prinsippene for mikrofrontend:
- Et stort brukergrensesnitt deles opp i uavhengig eide og utrullede snitt som settes sammen for brukeren.
- Teamautonomi: ende-til-ende-eierskap for et vertikalt forretningssnitt.
- Uavhengig utrulling: hvert snitt leveres etter sin egen tidsplan.
- Teknologimangfold er valgfritt; de fleste team standardiserer.
- Integrasjonen skjer ved build-time (enkelt, sammenkoblede utgivelser) eller run-time (Module Federation, reell uavhengighet).
Lær deg HTML 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
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Prinsipper for mikrofrontend-arkitektur» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Prinsipper for mikrofrontend-arkitektur», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Prinsipper for mikrofrontend-arkitektur»?
Hvorfor mikrofrontends, teamautonomi, uavhengig utrulling og avveininger ved teknologisk mangfold. Du øver på Vue Academy 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 Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy 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 «Prinsipper for mikrofrontend-arkitektur»?
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 Vue Academy-leksjonen?
Ja. Alle Vue Academy-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
- Prinsipper for mikrofrontend-arkitektur
- Webpack Module Federation med Vue
- Vite Federation-plugin
- Delt state på tvers av mikrofrontends