Hackforge Academy

Explanation

Micro Frontends often need to communicate when one application needs to notify another about an event or share information. Communication should be designed carefully to avoid tight coupling.

Code:

Product App
     │
     │ Product Selected
     ↓
   Cart App
     │
     │ Cart Updated
     ↓
Payment App

Explanation

Browser CustomEvent is a simple way for Micro Frontends to publish and listen for events without directly depending on another application's components.

Code:

// Product App
window.dispatchEvent(
  new CustomEvent('productSelected', {
    detail: { id: 101 }
  })
);

Explanation

A Micro Frontend can listen for custom events and respond when another Micro Frontend publishes an event.

Code:

window.addEventListener(
  'productSelected',
  event => {
    console.log(event.detail.id);
  }
);

Explanation

For commonly required application data, Micro Frontends can communicate through a shared state mechanism such as React Context or a shared state library.

Code:

Shared State
     │
 ┌───┼────┐
 ↓   ↓    ↓
Product Cart Payment
 App   App   App

Explanation

A good Micro Frontend architecture prefers simple communication methods such as events, shared APIs, or carefully designed shared state. Avoid excessive direct dependencies between Micro Frontends.

Code:

Product App ──→ Event ──→ Cart App
     │                         │
     └──────── API ────────────┘

Loose Coupling = Easier Maintenance