Communication Between Modules in Micro Frontends

1. Introduction

Micro frontends allow multiple teams to develop and deploy their own user interfaces, but effective communication between these modules is crucial for a seamless user experience. This lesson explores the various methods for inter-module communication.

2. Key Concepts

3. Communication Methods

1. 3.1 Event Bus

   Utilizes a centralized event system to publish and subscribe to events across modules.

   const eventBus = {
     events: {},
     subscribe(event, callback) {
       if (!this.events[event]) {
         this.events[event] = [];
       }
       this.events[event].push(callback);
     },
     publish(event, data) {
       if (this.events[event]) {
         this.events[event].forEach(callback => callback(data));
       }
     }
   };

2. 3.2 Shared State Management

   Using a shared state management library (e.g., Redux, MobX) to manage global application state.

   import { createStore } from 'redux';
   
   const initialState = { count: 0 };
   const reducer = (state = initialState, action) => {
       switch (action.type) {
           case 'INCREMENT':
               return { count: state.count + 1 };
           default:
               return state;
       }
   };
   
   const store = createStore(reducer);

3. 3.3 URL-based Communication

   Utilizes URL parameters or hash changes to communicate state between modules.

   window.addEventListener('hashchange', () => {
       const params = new URLSearchParams(window.location.hash.slice(1));
       handleParams(params);
   });

4. Best Practices

• Ensure modules are loosely coupled to enhance maintainability.
• Use the Event Bus for simple communication needs.
• Employ shared state management for complex applications.
• Document the communication protocols used between modules for clarity.
• Test inter-module communication thoroughly to prevent runtime issues.

5. FAQ