Micro Frontends Architecture with Module Federation · درس

حافلة الأحداث للتواصل بين التطبيقات

تعلّم تنفيذ حافلة أحداث لتوفير تواصل مفصول بين Micro Frontends المختلفة

الدرس 1 من 412 خطوة

حافلة الأحداث للتواصل بين التطبيقات درس مجاني في Micro Frontends Architecture with Module Federation على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Micro Frontends Architecture with Module Federation، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Micro Frontends Architecture with Module Federation 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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!

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «حافلة الأحداث للتواصل بين التطبيقات» مجاني؟

نعم — نص درس «حافلة الأحداث للتواصل بين التطبيقات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Micro Frontends Architecture with Module Federation، انتقل إلى CoddyKit PRO. تتضمن دورة Micro Frontends Architecture with Module Federation 4 دروس في المجموع.

ماذا ستتعلم في «حافلة الأحداث للتواصل بين التطبيقات»؟

تعلّم تنفيذ حافلة أحداث لتوفير تواصل مفصول بين Micro Frontends المختلفة تتمرن على Micro Frontends Architecture with Module Federation مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Micro Frontends Architecture with Module Federation؟

لا تُشترط خبرة سابقة. Micro Frontends Architecture with Module Federation على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «حافلة الأحداث للتواصل بين التطبيقات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Micro Frontends Architecture with Module Federation هذا؟

نعم. كل درس في Micro Frontends Architecture with Module Federation يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Micro Frontends Architecture with Module Federation