Micro Frontend Communication: Building Better Bridges

What breaks micro frontend communication in mobile apps? Learn how teams manage cross-frontend messaging, avoid communication gaps, and keep mobile apps running smoothly with practical strategies built for Flutter-based micro frontend systems.

When mobile micro frontends stop talking to each other, things break fast. User journeys stall, features glitch, and debugging turns into a guessing game.

So, how do teams keep communication smooth in complex setups?

This article walks through how micro frontend communication works in real-world apps. It breaks down key strategies developers use to link micro frontends without piling on complexity. You’ll also see how mobile apps built with Flutter manage cross-frontend messaging using shared libraries, custom events, and message bus systems.

Let’s look at what keeps everything running without friction.

How do micro frontends communicate with each other?

Micro frontends split a monolithic frontend into independent pieces. But cross-micro frontend communication is what makes the system usable.

To understand communication better, let’s break down the common interaction methods:

1. Custom Events Technique

The custom events technique uses browser-native CustomEvent for communication between two micro frontends running on the same page.

Copy
1
2
3
4
5
6
7
8
// In cart micro frontend
const event = new CustomEvent("ADD_TO_CART", { detail: { productId: 123 } });
window.dispatchEvent(event);

// In catalog micro frontend
window.addEventListener("ADD_TO_CART", (e) => {
  console.log("Item added:", e.detail.productId);
});

Pros

• Works well for web micro frontends

• Simple and low overhead

Cons

• Harder to trace in complex apps

• Not great for mobile devices

Use this when:

• You have the same instance of the container

• Working inside a browser-based container app

2. Custom Message Bus

A custom message bus can simplify micro frontends’ subscribe behavior. All required micro frontends communicate through a shared pub-sub mechanism.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class MessageBus {
  constructor() {
    this.subscribers = {};
  }
  subscribe(eventType, callback) {
    if (!this.subscribers[eventType]) this.subscribers[eventType] = [];
    this.subscribers[eventType].push(callback);
  }
  publish(eventType, data) {
    if (this.subscribers[eventType]) {
      this.subscribers[eventType].forEach((cb) => cb(data));
    }
  }
}

This avoids having to deal with a whole message bus system with too many third-party dependencies.

Great for:

• Both mobile micro frontends and web micro frontends

• Avoiding multiple unwanted layers

3. Storage Utility Library for Shared State

A simple storage utility library can provide cross-frontend state sharing via local storage or platform storage APIs.

Common storage methods include:

Using a storage utility library, micro frontends can poll for state changes or use storage events (on the web).

Tip: Use a wrapper to ensure that saving protected data doesn’t clash across different platforms.

4. Custom Events in Mobile Micro Frontends

In mobile apps, especially Flutter development, you’ll likely need Flutter widgets to communicate with other custom widgets across a multi-platform architecture. Let’s explore how custom events work in this context.

Flutter App Example (simplified):

Copy
1
2
3
4
5
6
7
8
9
10
11
StreamController eventStream = StreamController.broadcast();

// Catalog micro frontend
eventStream.add({"type": "ADD_TO_CART", "id": 45});

// Cart micro frontend
eventStream.stream.listen((event) {
  if (event['type'] == 'ADD_TO_CART') {
    print('Added item ${event["id"]}');
  }
});

The catalog micro frontend pushes an event, and the cart micro frontend listens for it.

Used when:

• You're working with stateful widgets inside a widget tree

• Need hot reload in Flutter SDK

5. Message Bus Library

Sometimes, teams avoid writing their own and use a message bus library like:

The choice depends on your development environment, programming language, and user interface framework.

"Effective micro frontend communication can be achieved using custom events, local storage, postMessage API, and URL-based strategies to keep applications loosely coupled and scalable."

— Source: LinkedIn

Example: Catalog and Cart Micro Frontends in Flutter

Let's simulate the flow between a catalog micro frontend and a cart micro frontend inside the same app.

The catalog micro frontend writes to a shared storage API provided. The cart micro frontend reads and updates the UI. This works across multi-platform, cross-platform applications like Android and iOS, without needing a custom-made solution equivalent.

Patterns in Micro Frontend Integration

Common Micro Frontend Integration Patterns

1. Container App Pattern

A container app loads micro frontends dynamically, allowing shared platform storage, flutter app routing, and hot reload.

2. Runtime Micro Frontends

Some systems prefer runtime micro frontends that fetch JavaScript modules on the fly, often from Google Ads scripts or CDNs.

3. One Micro Frontend Controls Events

One micro frontend becomes the coordinator, emitting custom events to others.

Best Practices for Micro Frontend Teams

• Avoid huge setup costs by using reusable patterns

• Keep user interactions local unless cross communication is required

• Make sure micro frontends teams follow uniform event naming conventions

• Always test with automated testing across all operating systems

Real-World Use Case

A retail app with a catalog micro frontend and a cart micro frontend in a Flutter app uses:

• Message bus library for inter-widget comms

• Storage utility library for persistence

• Hot reload for fast local development

• Google Pay SDK embedded in the checkout frontend

• Supports screen readers and handles protected data

Build Clear Communication Between Micro Frontends

Apply the techniques in this guide to remove scattered setups and reduce the time your team spends maintaining communication flows. These patterns help you create a stable connection between frontend modules—whether you’re linking mobile micro frontends in Flutter or syncing a cart with a catalog UI.

As cross-platform demands keep growing, smart micro frontend communication has become a strategic need.

Refine your system today. Adopt these patterns to give your teams the clarity and control they need to build faster and scale with confidence.