Micro-Frontends Architecture: Composition, Isolation, and Delivery

9 collapsed lines
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 = `
23 collapsed lines
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
  // Key pattern: Custom events enable framework-agnostic communication
53
  addToCart() {
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)

4 collapsed lines
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
        // Remote entry points - each microfrontend exposes its modules via remoteEntry.js
10
        productCatalog: "productCatalog@http://localhost:3001/remoteEntry.js",
11
        shoppingCart: "shoppingCart@http://localhost:3002/remoteEntry.js",
12
      },
13
      shared: {
14
        // singleton: true ensures only one React instance across all microfrontends
15
        react: { singleton: true, requiredVersion: "^18.0.0" },
16
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
17
      },
18
    }),
19
  ],
20
}

4 collapsed lines
1
// Remote application webpack.config.js
2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin")
3

4
module.exports = {
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: "productCatalog",
8
      filename: "remoteEntry.js",
9
      exposes: {
10
        // Components exposed to consuming applications
11
        "./ProductList": "./src/components/ProductList",
12
        "./ProductCard": "./src/components/ProductCard",
13
      },
14
      shared: {
15
        react: { singleton: true, requiredVersion: "^18.0.0" },
16
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
17
      },
18
    }),
19
  ],
20
}

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

4
// Dynamic imports load remote microfrontends at runtime
5
const ProductList = React.lazy(() => import("productCatalog/ProductList"))
6
const ShoppingCart = React.lazy(() => import("shoppingCart/ShoppingCart"))
7

8
function App() {
9
  return (
10
    <div className="app">
11
      <Suspense fallback={<div>Loading products...</div>}>
12
        <ProductList />
13
      </Suspense>
14
      <Suspense fallback={<div>Loading cart...</div>}>
15
        <ShoppingCart />
16
      </Suspense>
17
    </div>
18
  )
19
}

5 collapsed lines
1
// Example: Cloudflare Worker for edge-side composition
2
export default {
3
  async fetch(request, env) {
4
    const url = new URL(request.url)
5

6
    // Fetch the application shell from origin
7
    const shellResponse = await fetch("https://shell.microfrontend.com" + url.pathname)
8

9
    // Fetch microfrontend fragments in parallel
10
    const [headerHtml, catalogHtml, cartHtml] = await Promise.all([
11
      fetch("https://header.microfrontend.com").then((r) => r.text()),
12
      fetch("https://catalog.microfrontend.com/products").then((r) => r.text()),
13
      fetch("https://cart.microfrontend.com").then((r) => r.text()),
14
    ])
15

16
    // Use HTMLRewriter to inject microfrontend content into placeholders
17
    return new HTMLRewriter()
18
      .on('[data-microfrontend="header"]', {
19
        element(el) {
20
          el.replace(headerHtml, { html: true })
21
        },
22
      })
23
      .on('[data-microfrontend="catalog"]', {
24
        element(el) {
25
          el.replace(catalogHtml, { html: true })
26
        },
27
      })
28
      .on('[data-microfrontend="cart"]', {
29
        element(el) {
30
          el.replace(cartHtml, { html: true })
31
        },
32
      })
33
      .transform(shellResponse)
34
  },
35
}

6 collapsed lines
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
      # Key pattern: Only trigger when this specific microfrontend changes
9
      - "microfrontends/product-catalog/**"
10

11
jobs:
12
  build-and-deploy:
13
    runs-on: ubuntu-latest
23 collapsed lines
14

15
    steps:
16
      - uses: actions/checkout@v4
17

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

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

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

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

40
      # Independent deployment - no coordination with other teams
41
      - name: Deploy to staging
42
        run: npm run deploy:staging
43
        working-directory: microfrontends/product-catalog
44

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

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

3 collapsed lines
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)
14 collapsed lines
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
  // Key pattern: Sync local state to URL for shareability
27
  const handleFilterChange = (newFilters) => {
28
    setFilters(newFilters)
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...</div> : <ProductGrid products={products} />}
36
    </div>
37
  )
38
}

6 collapsed lines
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
  // Key pattern: URL as the source of truth for cross-microfrontend state
9
  setState(key, value) {
10
    const url = new URL(window.location)
11
    if (value === null || value === undefined) {
12
      url.searchParams.delete(key)
13
    } else {
14
      url.searchParams.set(key, JSON.stringify(value))
15
    }
16
    window.history.pushState(null, "", url)
17
    this.notifyListeners()
18
  }
19

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

26
  subscribe(listener) {
10 collapsed lines
27
    this.listeners.add(listener)
28
    return () => this.listeners.delete(listener)
29
  }
30

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

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

40
// Usage across microfrontends - any microfrontend can read/write
41
const stateManager = new URLStateManager()
42
stateManager.setState("category", "electronics")
43
const category = stateManager.getState("category")

26 collapsed lines
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
window.microfrontendEvents = new MicrofrontendEventBus()
28

29
// Key pattern: Loose coupling via pub-sub
30
// Product catalog emits events (doesn't know who listens)
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 subscribes (doesn't know who publishes)
41
window.microfrontendEvents.on("addToCart", (productData) => {
42
  updateCart(productData)
43
})

4 collapsed lines
1
// Example: Shared Redux store (use sparingly - reduces modularity)
2
import { createStore, combineReducers } from "redux"
3

4
// Shared user state - authentication is a valid use case for shared state
5
const userReducer = (state = null, action) => {
6
  switch (action.type) {
7
    case "SET_USER":
9 collapsed lines
8
      return action.payload
9
    case "LOGOUT":
10
      return null
11
    default:
12
      return state
13
  }
14
}
15

16
// Shared cart state - consider URL-based or event-based alternatives first
17
const cartReducer = (state = [], action) => {
18
  switch (action.type) {
14 collapsed lines
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({ user: userReducer, cart: cartReducer })
33

34
// Warning: All microfrontends now depend on this store version
35
window.sharedStore = createStore(rootReducer)

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

4
// Key pattern: Route-based microfrontend mounting
5
// Each microfrontend mounts/unmounts based on URL patterns
6
registerApplication({
7
  name: "product-catalog",
8
  app: () => import("./product-catalog"),
9
  activeWhen: ["/products", "/"],
10
  customProps: { domElement: document.getElementById("product-catalog-container") },
11
})
12

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

20
registerApplication({
21
  name: "user-profile",
22
  app: () => import("./user-profile"),
23
  activeWhen: ["/profile"],
24
  customProps: { domElement: document.getElementById("user-profile-container") },
25
})
26

27
start()

1
// Example: Server-side routing with Next.js
2
export default function ProductCategory({ products, category }) {
3
  return (
4
    <div className="product-category-page">
5
      <h1>{category} Products</h1>
6
      {/* Microfrontend components composed server-side */}
7
      <ProductCatalog products={products} />
8
      <ShoppingCart />
9
    </div>
10
  )
11
}
12

6 collapsed lines
13
// Key pattern: Data fetched at request time, page assembled server-side
14
export async function getServerSideProps({ params }) {
15
  const { category } = params
16
  const products = await fetchProductsByCategory(category)
17
  return { props: { products, category } }
18
}