Micro Frontends Architecture with Module Federation · Ders

Uygulamalar Arası İletişim için Olay Veri Yolu

Farklı Mikro Ön Yüzler arasında gevşek bağlı iletişim sağlayan bir olay veri yolu uygulamayı öğrenin.

Uygulamalar Arası İletişim için Olay Veri Yolu, CoddyKit'te ücretsiz bir Micro Frontends Architecture with Module Federation dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Micro Frontends Architecture with Module Federation öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Micro Frontends Architecture with Module Federation kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

MFE Communication Challenges

In a Micro Frontend (MFE) architecture, different applications run independently. But what happens when one MFE needs to tell another MFE something?

Direct communication can create tight dependencies, making your system harder to maintain and scale. We need a way for MFEs to talk without knowing too much about each other.

Meet the Event Bus

An Event Bus is a design pattern that provides a central hub for communication between different parts of an application, or in our case, different Micro Frontends.

Think of it like a community bulletin board where anyone can post a message, and anyone interested can read it.

How it Works: Publish/Subscribe

The Event Bus operates on a Publish/Subscribe (or Pub/Sub) model:

Publishers (MFEs) emit events to the bus, often with some data. They don't care who listens.
Subscribers (other MFEs) listen (or on) for specific events. They react when an event they're interested in is published.

This keeps communication decoupled.

Designing Our Event Bus

A simple Event Bus needs a few core methods:

on(eventName, callback): To subscribe to an event.
emit(eventName, data): To publish an event with optional data.
off(eventName, callback): To unsubscribe from an event (important for cleanup).

Let's build a basic JavaScript version.

Building the Bus Core

Here's a basic JavaScript class for an EventBus. It uses an internal object, listeners, to store all registered callbacks for each event name.

Try running this example:

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!");

Sending Messages (Publish)

To send a message, one Micro Frontend will call the emit method on the shared Event Bus instance. It provides the event name and any relevant data.

The Event Bus then broadcasts this event to all registered listeners.

Publishing in Action

Here, we simulate an MFE publishing a 'user:loggedIn' event. Notice how the mfeAPublisher function uses bus.emit().

Run the code and see the output:

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

Receiving Messages (Subscribe)

Another Micro Frontend that wants to react to this event will use the on method to subscribe. It provides the event name it's interested in and a callback function to execute when that event occurs.

The callback function receives the data published with the event.

Subscribing and Reacting

Now let's put it all together. One MFE subscribes to the user:loggedIn event, and another MFE publishes it. When you run this, you'll see both actions logged.

Observe the flow of communication:

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

When to Use an Event Bus

Pros:

Decoupling: MFEs don't need to know about each other.
Simplicity: Easy to implement for basic broadcast needs.
Flexibility: New subscribers can be added without changing publishers.

Cons:

Debugging: Hard to trace event flow (event spaghetti).
No direct response: Not suitable for request/response patterns.
Global state: The bus itself can become a single point of failure or a source of implicit dependencies.

Event Bus Quick Check

An Event Bus is a powerful tool for communication in Micro Frontends. Which of the following statements accurately describe its benefits?

Recap: Event Bus Essentials

You've learned about the Event Bus pattern for inter-Micro Frontend communication.

It uses a Publish/Subscribe model.
Publishers emit events, subscribers on (listen for) them.
It promotes decoupled communication, reducing direct dependencies.
While simple and flexible, be aware of potential debugging challenges and ensure proper cleanup (off).

Next, we'll explore shared state management!

Sıkça Sorulan Sorular

“Uygulamalar Arası İletişim için Olay Veri Yolu” dersi ücretsiz mi?

Evet — “Uygulamalar Arası İletişim için Olay Veri Yolu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Micro Frontends Architecture with Module Federation kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Micro Frontends Architecture with Module Federation kursu toplamda 4 dersten oluşur.

“Uygulamalar Arası İletişim için Olay Veri Yolu” dersinde ne öğreneceğim?

Farklı Mikro Ön Yüzler arasında gevşek bağlı iletişim sağlayan bir olay veri yolu uygulamayı öğrenin. Micro Frontends Architecture with Module Federation ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Micro Frontends Architecture with Module Federation öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Micro Frontends Architecture with Module Federation, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Uygulamalar Arası İletişim için Olay Veri Yolu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Micro Frontends Architecture with Module Federation dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Micro Frontends Architecture with Module Federation dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Uygulamalar Arası İletişim için Olay Veri Yolu
Paylaşılan Durum Yönetimi
Özel İletişim Çözümleri
Özel DOM Olaylarıyla İletişim Kurma

← Micro Frontends Architecture with Module Federation Sayfasına Dön