Microfrontends Architecture

1
<!-- Example: Iframe-based microfrontend integration -->
2
<div class="app-shell">
3
  <header>
4
    <h1>E-commerce Platform</h1>
5
  </header>
6

7
  <main>
8
    <!-- Product catalog microfrontend -->
9
    <iframe
10
      src="https://catalog.microfrontend.com"
11
      id="catalog-frame"
12
      style="width: 100%; height: 600px; border: none;"
13
    >
14
    </iframe>
15

16
    <!-- Shopping cart microfrontend -->
17
    <iframe src="https://cart.microfrontend.com" id="cart-frame" style="width: 300px; height: 400px; border: none;">
18
    </iframe>
19
  </main>
20
</div>
21

22
<script>
23
  // Communication between iframes using postMessage
24
  document.getElementById("catalog-frame").contentWindow.postMessage(
25
    {
26
      type: "ADD_TO_CART",
27
      productId: "12345",
28
    },
29
    "https://catalog.microfrontend.com",
30
  )
31

32
  window.addEventListener("message", (event) => {
33
    if (event.origin !== "https://cart.microfrontend.com") return
34

35
    if (event.data.type === "CART_UPDATED") {
36
      console.log("Cart updated:", event.data.cart)
37
    }
38
  })
39
</script>

1
// Example: Custom Element for a product card microfrontend
2
class ProductCard extends HTMLElement {
3
  constructor() {
4
    super()
5
    this.attachShadow({ mode: "open" })
6
  }
7

8
  connectedCallback() {
9
    this.render()
10
  }
11

12
  render() {
13
    this.shadowRoot.innerHTML = `
14
      <style>
15
        .product-card {
16
          border: 1px solid #ddd;
17
          border-radius: 8px;
18
          padding: 16px;
19
          margin: 8px;
20
          max-width: 300px;
21
        }
22
        .product-title {
23
          font-size: 18px;
24
          font-weight: bold;
25
          margin-bottom: 8px;
26
        }
27
        .product-price {
28
          color: #e44d26;
29
          font-size: 20px;
30
          font-weight: bold;
31
        }
32
        .add-to-cart-btn {
33
          background: #007bff;
34
          color: white;
35
          border: none;
36
          padding: 8px 16px;
37
          border-radius: 4px;
38
          cursor: pointer;
39
        }
40
      </style>
41

42
      <div class="product-card">
43
        <div class="product-title">${this.getAttribute("title")}</div>
44
        <div class="product-price">$${this.getAttribute("price")}</div>
45
        <button class="add-to-cart-btn" onclick="this.addToCart()">
46
          Add to Cart
47
        </button>
48
      </div>
49
    `
50
  }
51

52
  addToCart() {
53
    // Dispatch custom event for communication
54
    this.dispatchEvent(
55
      new CustomEvent("addToCart", {
56
        detail: {
57
          productId: this.getAttribute("product-id"),
58
          title: this.getAttribute("title"),
59
          price: this.getAttribute("price"),
60
        },
61
        bubbles: true,
62
      }),
63
    )
64
  }
65
}
66

67
customElements.define("product-card", ProductCard)

1
// Host application webpack.config.js
2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin")
3

4
module.exports = {
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: "host",
8
      remotes: {
9
        productCatalog: "productCatalog@http://localhost:3001/remoteEntry.js",
10
        shoppingCart: "shoppingCart@http://localhost:3002/remoteEntry.js",
11
      },
12
      shared: {
13
        react: { singleton: true, requiredVersion: "^18.0.0" },
14
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
15
      },
16
    }),
17
  ],
18
}
19

20
// Remote application webpack.config.js
21
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin")
22

23
module.exports = {
24
  plugins: [
25
    new ModuleFederationPlugin({
26
      name: "productCatalog",
27
      filename: "remoteEntry.js",
28
      exposes: {
29
        "./ProductList": "./src/components/ProductList",
30
        "./ProductCard": "./src/components/ProductCard",
31
      },
32
      shared: {
33
        react: { singleton: true, requiredVersion: "^18.0.0" },
34
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
35
      },
36
    }),
37
  ],
38
}

1
// Host application consuming remote components
2
import React, { Suspense } from "react"
3

4
const ProductList = React.lazy(() => import("productCatalog/ProductList"))
5
const ShoppingCart = React.lazy(() => import("shoppingCart/ShoppingCart"))
6

7
function App() {
8
  return (
9
    <div className="app">
10
      <header>
11
        <h1>E-commerce Platform</h1>
12
      </header>
13

14
      <main>
15
        <Suspense fallback={<div>Loading products...</div>}>
16
          <ProductList />
17
        </Suspense>
18

19
        <Suspense fallback={<div>Loading cart...</div>}>
20
          <ShoppingCart />
21
        </Suspense>
22
      </main>
23
    </div>
24
  )
25
}

1
<!-- Example: ESI-based page assembly -->
2
<!DOCTYPE html>
3
<html>
4
  <head>
5
    <title>E-commerce Platform</title>
6
    <link rel="stylesheet" href="/styles/main.css" />
7
  </head>
8
  <body>
9
    <header>
10
      <esi:include src="https://header.microfrontend.com" />
11
    </header>
12

13
    <main>
14
      <div class="product-catalog">
15
        <esi:include src="https://catalog.microfrontend.com/products" />
16
      </div>
17

18
      <aside class="shopping-cart">
19
        <esi:include src="https://cart.microfrontend.com" />
20
      </aside>
21
    </main>
22

23
    <footer>
24
      <esi:include src="https://footer.microfrontend.com" />
25
    </footer>
26
  </body>
27
</html>

1
// Example: Cloudflare Worker for edge-side composition
2
addEventListener("fetch", (event) => {
3
  event.respondWith(handleRequest(event.request))
4
})
5

6
async function handleRequest(request) {
7
  const url = new URL(request.url)
8

9
  // Get the application shell
10
  let response = await fetch("https://shell.microfrontend.com" + url.pathname)
11
  let html = await response.text()
12

13
  // Use HTMLRewriter to inject microfrontend content
14
  return new HTMLRewriter()
15
    .on('[data-microfrontend="header"]', {
16
      element(element) {
17
        element.replace(`<esi:include src="https://header.microfrontend.com" />`, {
18
          html: true,
19
        })
20
      },
21
    })
22
    .on('[data-microfrontend="catalog"]', {
23
      element(element) {
24
        element.replace(`<esi:include src="https://catalog.microfrontend.com/products" />`, {
25
          html: true,
26
        })
27
      },
28
    })
29
    .on('[data-microfrontend="cart"]', {
30
      element(element) {
31
        element.replace(`<esi:include src="https://cart.microfrontend.com" />`, {
32
          html: true,
33
        })
34
      },
35
    })
36
    .transform(new Response(html, response))
37
}

1
# Example: GitHub Actions workflow for independent deployment
2
name: Deploy Product Catalog Microfrontend
3

4
on:
5
  push:
6
    branches: [main]
7
    paths:
8
      - "microfrontends/product-catalog/**"
9

10
jobs:
11
  build-and-deploy:
12
    runs-on: ubuntu-latest
13

14
    steps:
15
      - uses: actions/checkout@v3
16

17
      - name: Setup Node.js
18
        uses: actions/setup-node@v3
19
        with:
20
          node-version: "18"
21
          cache: "npm"
22
          cache-dependency-path: "microfrontends/product-catalog/package-lock.json"
23

24
      - name: Install dependencies
25
        run: |
26
          cd microfrontends/product-catalog
27
          npm ci
28

29
      - name: Run tests
30
        run: |
31
          cd microfrontends/product-catalog
32
          npm test
33

34
      - name: Build application
35
        run: |
36
          cd microfrontends/product-catalog
37
          npm run build
38

39
      - name: Deploy to staging
40
        run: |
41
          cd microfrontends/product-catalog
42
          npm run deploy:staging
43

44
      - name: Run integration tests
45
        run: |
46
          npm run test:integration
47

48
      - name: Deploy to production
49
        if: success()
50
        run: |
51
          cd microfrontends/product-catalog
52
          npm run deploy:production

1
// Example: Local state management in a React microfrontend
2
import React, { useState, useEffect } from "react"
3

4
function ProductCatalog() {
5
  const [products, setProducts] = useState([])
6
  const [loading, setLoading] = useState(true)
7
  const [filters, setFilters] = useState({})
8

9
  useEffect(() => {
10
    fetchProducts(filters)
11
  }, [filters])
12

13
  const fetchProducts = async (filters) => {
14
    setLoading(true)
15
    try {
16
      const response = await fetch(`/api/products?${new URLSearchParams(filters)}`)
17
      const data = await response.json()
18
      setProducts(data)
19
    } catch (error) {
20
      console.error("Failed to fetch products:", error)
21
    } finally {
22
      setLoading(false)
23
    }
24
  }
25

26
  const handleFilterChange = (newFilters) => {
27
    setFilters(newFilters)
28
    // Update URL for shareable state
29
    window.history.replaceState(null, "", `?${new URLSearchParams(newFilters)}`)
30
  }
31

32
  return (
33
    <div className="product-catalog">
34
      <FilterPanel filters={filters} onFilterChange={handleFilterChange} />
35
      {loading ? <div>Loading products...</div> : <ProductGrid products={products} />}
36
    </div>
37
  )
38
}

1
// Example: URL-based state management
2
class URLStateManager {
3
  constructor() {
4
    this.listeners = new Set()
5
    window.addEventListener("popstate", this.handlePopState.bind(this))
6
  }
7

8
  setState(key, value) {
9
    const url = new URL(window.location)
10
    if (value === null || value === undefined) {
11
      url.searchParams.delete(key)
12
    } else {
13
      url.searchParams.set(key, JSON.stringify(value))
14
    }
15
    window.history.pushState(null, "", url)
16
    this.notifyListeners()
17
  }
18

19
  getState(key) {
20
    const url = new URL(window.location)
21
    const value = url.searchParams.get(key)
22
    return value ? JSON.parse(value) : null
23
  }
24

25
  subscribe(listener) {
26
    this.listeners.add(listener)
27
    return () => this.listeners.delete(listener)
28
  }
29

30
  notifyListeners() {
31
    this.listeners.forEach((listener) => listener())
32
  }
33

34
  handlePopState() {
35
    this.notifyListeners()
36
  }
37
}
38

39
// Usage across microfrontends
40
const stateManager = new URLStateManager()
41

42
// In product catalog
43
stateManager.setState("category", "electronics")
44
stateManager.setState("priceRange", { min: 100, max: 500 })
45

46
// In shopping cart
47
const category = stateManager.getState("category")

1
// Example: Event-based communication between microfrontends
2
class MicrofrontendEventBus {
3
  constructor() {
4
    this.events = {}
5
  }
6

7
  on(event, callback) {
8
    if (!this.events[event]) {
9
      this.events[event] = []
10
    }
11
    this.events[event].push(callback)
12
  }
13

14
  emit(event, data) {
15
    if (this.events[event]) {
16
      this.events[event].forEach((callback) => callback(data))
17
    }
18
  }
19

20
  off(event, callback) {
21
    if (this.events[event]) {
22
      this.events[event] = this.events[event].filter((cb) => cb !== callback)
23
    }
24
  }
25
}
26

27
// Global event bus
28
window.microfrontendEvents = new MicrofrontendEventBus()
29

30
// Product catalog emits events
31
function addToCart(product) {
32
  window.microfrontendEvents.emit("addToCart", {
33
    productId: product.id,
34
    name: product.name,
35
    price: product.price,
36
    quantity: 1,
37
  })
38
}
39

40
// Shopping cart listens for events
41
window.microfrontendEvents.on("addToCart", (productData) => {
42
  updateCart(productData)
43
})
44

45
window.microfrontendEvents.on("removeFromCart", (productId) => {
46
  removeFromCart(productId)
47
})

1
// Example: Shared Redux store (use sparingly)
2
import { createStore, combineReducers } from "redux"
3

4
// Shared user state
5
const userReducer = (state = null, action) => {
6
  switch (action.type) {
7
    case "SET_USER":
8
      return action.payload
9
    case "LOGOUT":
10
      return null
11
    default:
12
      return state
13
  }
14
}
15

16
// Shared cart state
17
const cartReducer = (state = [], action) => {
18
  switch (action.type) {
19
    case "ADD_TO_CART":
20
      const existingItem = state.find((item) => item.id === action.payload.id)
21
      if (existingItem) {
22
        return state.map((item) => (item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item))
23
      }
24
      return [...state, { ...action.payload, quantity: 1 }]
25
    case "REMOVE_FROM_CART":
26
      return state.filter((item) => item.id !== action.payload)
27
    default:
28
      return state
29
  }
30
}
31

32
const rootReducer = combineReducers({
33
  user: userReducer,
34
  cart: cartReducer,
35
})
36

37
// Shared store instance
38
window.sharedStore = createStore(rootReducer)

1
// Example: Client-side routing with single-spa
2
import { registerApplication, start } from "single-spa"
3

4
// Register microfrontends
5
registerApplication({
6
  name: "product-catalog",
7
  app: () => import("./product-catalog"),
8
  activeWhen: ["/products", "/"],
9
  customProps: {
10
    domElement: document.getElementById("product-catalog-container"),
11
  },
12
})
13

14
registerApplication({
15
  name: "shopping-cart",
16
  app: () => import("./shopping-cart"),
17
  activeWhen: ["/cart"],
18
  customProps: {
19
    domElement: document.getElementById("shopping-cart-container"),
20
  },
21
})
22

23
registerApplication({
24
  name: "user-profile",
25
  app: () => import("./user-profile"),
26
  activeWhen: ["/profile"],
27
  customProps: {
28
    domElement: document.getElementById("user-profile-container"),
29
  },
30
})
31

32
// Start the application
33
start()