Introduction

As web applications grow, monolithic frontends—where all features live in a single codebase— quickly become difficult to manage. Large applications like dashboards, search systems, user management, and analytics often suffer from:

• Slow build and deployment cycles
• Conflicts between multiple teams working on the same codebase
• Difficulty introducing new frameworks or technologies
• Risk of a single failure breaking the entire application

What are Micro-Frontends?

At its core, a Micro-Frontend is a frontend application divided into smaller, independently deployable units. Each unit:

• Handles a specific business domain (e.g., dashboard, search, user management)
• Can be built with its own framework (React, Vue.js, Angular, etc.)
• Maintains its own build and deployment pipeline.
• Communicates with other modules through well-defined contracts or events.

Unlike a monolith, micro-frontends allow multiple teams to work autonomously without stepping on each other’s toes.

How Micro-Frontends Work

1. Architecture Overview

A typical Micro-Frontend architecture consists of:

• Shell / Container App: Hosts global navigation, shared state, authentication, and top-level routes. Dynamically loads micro-apps at runtime.
• Micro-Apps: Independently developed modules like a dashboard, search, or user management. Each exposes a mount/unmount interface.
• Shared Libraries: Optional shared utilities (React, Vue, CSS frameworks) to reduce bundle duplication.

Illustration:

Shell App
├─ React Dashboard Module
├─ Vue Search Module
└─ React User Management Module

The shell dynamically loads micro-apps based on route or user interaction. This ensures independent deployment while presenting a unified UI.

Reactive Micro-Apps Architecture



2. Generation of Micro-Frontends

When generating a micro-frontend:

• Create a Standalone Module: Independent project with its own dependencies, routing (if needed), and state management.
• Expose Mount Function: The shell uses this to render the module dynamically.
• Share Common Libraries: Use Module Federation or similar to avoid multiple framework instances.

Benefits of this approach:

• Teams can use different frameworks (React, Vue) without conflicts
• Independent builds → faster CI/CD
• Easy incremental adoption of new technologies

3. Lifecycle & Integration

Micro-Frontends follow a mount-update-unmount lifecycle:

1. Mount: Shell calls of the micro-app; app initializes state and renders UI.
2. Update: Micro-app reacts to events, user interactions, or route changes.
3. Unmount: When navigating away, shell calls to remove the micro-app cleanly.

Communication:-

• Routing-based state: Share information via URL params (e.g., selected filters).
• Custom events / Event Bus: Publish-subscribe mechanism between micro-apps.
• Shared Services: Lightweight APIs for global data or state synchronization.

This architecture ensures that failure in one module does not affect the entire application, increasing reliability.

Real-Life Example: Dashboard + Search

Imagine a SaaS platform:

• React Dashboard Module: Displays metrics, KPIs, and charts.
• Vue Search Module: Filters and searches datasets displayed in the dashboard.
• Shell App: Hosts top-level routes /dashboard and /search

React Dashboard Module(Simplified)

import React, { useState, useEffect } from "react";

export default function ReactDashboard() { 
  const [metrics, setMetrics] = useState([]);

  useEffect(() => { 
    setTimeout(() => {
      setMetrics([
        { name: "Active Users", value: 120 },
        { name: "Revenue", value: "$5,200" },
      ]);
      console.log("Dashboard loaded!");
    }, 200);
  }, []);

  return (
    <div>
      <h2>Analytics Dashboard</h2>
      <ul>
        {metrics.map(m => (
          <li key={m.name}>{m.name}: {m.value}</li>
        ))}
      </ul>
    </div>
  );
}

Explanation:

• Shell mounts the module dynamically.
• Simulated data fetch populates the dashboard.
• React state ensures UI updates automatically.

Vue Search Module (Simplified)

<template>
  <div>
    <input v-model="query" placeholder="Search metrics..." />
    <ul>
      <li v-for="item in filteredMetrics" :key="item.name">
        {{ item.name }}: {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default { 
  data() {
    return { 
      query: "", 
      metrics: [
        { name: "Active Users", value: 120 },
        { name: "Revenue", value: "$5,200" }
      ]
    };
  },
  computed: { 
    filteredMetrics() {
      return this.metrics.filter(m => m.name.toLowerCase().includes(this.query.toLowerCase()));
    }
  }
};
</script>

Explanation:

• Vue app mounts independently inside the shell.
• Reactive search allows instant filtering of metrics.
• Communication with the dashboard could be handled via events or shared state if needed.

Benefits of This Approach

Best Practices

• Keep micro-apps small and cohesive.
• Implement CI/CD pipelines per module.
• Use a shared design system for consistent UX.
• Lazy-load micro-apps to optimize performance.
• Track errors per module and aggregate logs in the shell.

Conclusion