Mikrofrontendarkitektur med Module Federation · Lektion

Händelsebuss för kommunikation mellan appar

Lär er att implementera en händelsebuss för frikopplad kommunikation mellan olika Micro Frontends.

Lektion 1 av 412 steg

Händelsebuss för kommunikation mellan appar är en gratis lektion i Mikrofrontendarkitektur med Module Federation på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Mikrofrontendarkitektur med Module Federation, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.

Kommunikationsutmaningar för MFE:er

I en Micro Frontend-arkitektur (MFE) körs olika applikationer oberoende av varandra. Men vad händer när en MFE behöver meddela något till en annan MFE?

Direkt kommunikation kan skapa starka beroenden, vilket gör systemet svårare att underhålla och skala. Vi behöver ett sätt för MFE:er att kommunicera utan att känna till för mycket om varandra.

Möt Event Bus

En Event Bus är ett designmönster som tillhandahåller en central knutpunkt för kommunikation mellan olika delar av en applikation eller, i vårt fall, olika Micro Frontends.

Tänk på den som en anslagstavla där vem som helst kan publicera ett meddelande och alla som är intresserade kan läsa det.

Så fungerar det: Publish/Subscribe

Event Bus bygger på modellen Publish/Subscribe (eller Pub/Sub):

Utgivare (MFE:er) emit-sänder händelser till bussen, ofta tillsammans med data. De bryr sig inte om vem som lyssnar.
Prenumeranter (andra MFE:er) listen (eller on) efter specifika händelser. De reagerar när en händelse de är intresserade av publiceras.

Detta håller kommunikationen frikopplad.

Utforma vår Event Bus

En enkel Event Bus behöver några centrala metoder:

on(eventName, callback): För att prenumerera på en händelse.
emit(eventName, data): För att publicera en händelse med valfria data.
off(eventName, callback): För att avsluta en prenumeration på en händelse (viktigt vid städning).

Nu bygger vi en enkel version i JavaScript.

Bygga bussens kärna

Här är en enkel JavaScript-klass för en EventBus. Den använder ett internt objekt, listeners, för att lagra alla registrerade callback-funktioner för varje händelsenamn.

Prova att köra det här exemplet:

class EventBus {
  constructor() {
    this.listeners = {};
  }

  on(eventName, callback) {
    if (!this.listeners[eventName]) {
      this.listeners[eventName] = [];
    }
    this.listeners[eventName].push(callback);
  }

  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(callback => {
        callback(data);
      });
    }
  }

  off(eventName, callback) {
    if (!this.listeners[eventName]) return;
    this.listeners[eventName] = this.listeners[eventName].filter(
      listener => listener !== callback
    );
  }
}

const bus = new EventBus();
console.log("EventBus initialized!");

Skicka meddelanden (Publish)

För att skicka ett meddelande anropar en Micro Frontend metoden emit på den delade Event Bus-instansen. Den skickar med händelsenamnet och eventuella relevanta data.

Event Bus vidarebefordrar sedan händelsen till alla registrerade lyssnare.

Publicering i praktiken

Här simulerar vi en MFE som publicerar händelsen "user:loggedIn". Lägg märke till hur funktionen mfeAPublisher använder bus.emit().

Kör koden och se resultatet:

class EventBus {
  constructor() {
    this.listeners = {};
  }
  on(eventName, callback) {
    if (!this.listeners[eventName]) this.listeners[eventName] = [];
    this.listeners[eventName].push(callback);
  }
  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(callback => callback(data));
    }
  }
  off(eventName, callback) {
    if (!this.listeners[eventName]) return;
    this.listeners[eventName] = this.listeners[eventName].filter(
      listener => listener !== callback
    );
  }
}

const bus = new EventBus();

// MFE A publishes an event
function mfeAPublisher() {
  const data = { user: "Alice", action: "loggedIn" };
  bus.emit("user:loggedIn", data);
  console.log("MFE A published 'user:loggedIn'");
}

mfeAPublisher();

Ta emot meddelanden (Subscribe)

En annan Micro Frontend som vill reagera på denna händelse använder metoden on för att prenumerera. Den anger händelsenamnet den är intresserad av och en callback-funktion som ska köras när händelsen inträffar.

Callback-funktionen tar emot de data som publicerades tillsammans med händelsen.

Prenumerera och reagera

Nu sätter vi ihop allt. En MFE prenumererar på händelsen user:loggedIn och en annan MFE publicerar den. När du kör detta visas båda åtgärderna i loggen.

Observera kommunikationsflödet:

class EventBus {
  constructor() {
    this.listeners = {};
  }
  on(eventName, callback) {
    if (!this.listeners[eventName]) this.listeners[eventName] = [];
    this.listeners[eventName].push(callback);
  }
  emit(eventName, data) {
    if (this.listeners[eventName]) {
      this.listeners[eventName].forEach(callback => callback(data));
    }
  }
  off(eventName, callback) {
    if (!this.listeners[eventName]) return;
    this.listeners[eventName] = this.listeners[eventName].filter(
      listener => listener !== callback
    );
  }
}

const bus = new EventBus();

// MFE B subscribes to an event
function mfeBSubscriber(data) {
  console.log("MFE B received 'user:loggedIn' event:");
  console.log(data);
}
bus.on("user:loggedIn", mfeBSubscriber);
console.log("MFE B subscribed to 'user:loggedIn'");

// MFE A publishes an event
function mfeAPublisher() {
  const data = { user: "Alice", action: "loggedIn" };
  bus.emit("user:loggedIn", data);
  console.log("MFE A published 'user:loggedIn'");
}

mfeAPublisher();

När bör du använda en Event Bus?

Fördelar:

Frikoppling: MFE:er behöver inte känna till varandra.
Enkelhet: Enkel att implementera för grundläggande behov av utsändning.
Flexibilitet: Nya prenumeranter kan läggas till utan att utgivarna behöver ändras.

Nackdelar:

Felsökning: Svårt att följa händelseflödet (händelsespaghetti).
Inget direkt svar: Inte lämplig för mönster med begäran och svar.
Globalt tillstånd: Bussen kan själv bli en felkritisk central punkt eller en källa till implicita beroenden.

Snabbkontroll av Event Bus

En Event Bus är ett kraftfullt verktyg för kommunikation i Micro Frontends. Vilka av följande påståenden beskriver dess fördelar korrekt?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Grunderna i Event Bus

Du har lärt dig om Event Bus-mönstret för kommunikation mellan Micro Frontends.

Det använder en Publish/Subscribe-modell.
Utgivare emit-sänder händelser och prenumeranter använder on (lyssnar efter) dem.
Det främjar frikopplad kommunikation och minskar direkta beroenden.
Även om mönstret är enkelt och flexibelt bör du vara medveten om möjliga felsökningsproblem och se till att städa upp korrekt med off.

Nästa steg är att utforska hantering av delat tillstånd!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Händelsebuss för kommunikation mellan appar” gratis?

Ja – hela texten till ”Händelsebuss för kommunikation mellan appar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Mikrofrontendarkitektur med Module Federation, kan Ni uppgradera till CoddyKit PRO. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.

Vad lär jag mig i ”Händelsebuss för kommunikation mellan appar”?

Lär er att implementera en händelsebuss för frikopplad kommunikation mellan olika Micro Frontends. Ni övar på Mikrofrontendarkitektur med Module Federation med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mikrofrontendarkitektur med Module Federation?

Du behöver inga förkunskaper. Utbildningen i Mikrofrontendarkitektur med Module Federation på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Händelsebuss för kommunikation mellan appar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mikrofrontendarkitektur med Module Federation-lektionen?

Ja. Varje Mikrofrontendarkitektur med Module Federation-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Händelsebuss för kommunikation mellan appar
Hantering av delat tillstånd
Anpassade kommunikationslösningar
Kommunicera med anpassade DOM-händelser

← Tillbaka till Mikrofrontendarkitektur med Module Federation