~/sph.sh
March 23, 2025
module-federation
react
tutorial

Micro-Frontend-Implementierungsmuster: Module Federation und mehr

Produktionsbereite Module Federation-Konfigurationen, Cross-Micro-Frontend-Kommunikation, Routing-Strategien und praktische Implementierungsmuster mit realen Debugging-Beispielen.

Micro-Frontend-Seriennavigation#

  • Teil 1: Architektur-Grundlagen und Implementierungstypen
  • Teil 2 (Du bist hier): Module Federation, Kommunikationsmuster und Integrationsstrategien
  • Teil 3: Erweiterte Muster, Performance-Optimierung und Produktions-Debugging

Voraussetzungen: Dieser Beitrag baut auf Konzepten aus Teil 1 auf. Falls du neu bei Micro-Frontends bist, fang dort zuerst an.

In Teil 1 haben wir die grundlegenden Architekturmuster für Micro-Frontends erkundet. Jetzt werden wir tief in die praktische Implementierung eintauchen und uns auf Module Federation als den dominierenden Runtime-Integrationsansatz konzentrieren, zusammen mit realen Kommunikationsmustern und Debugging-Strategien, die ich in Produktionssystemen angetroffen habe.

Module Federation Tiefenanalyse#

Module Federation, eingeführt in Webpack 5, ist zum Goldstandard für Runtime-Micro-Frontend-Integration geworden. Im Gegensatz zu einfachen dynamischen Importen bietet es anspruchsvolles Dependency-Sharing, Versionsverwaltung und Runtime-Kompositionsfähigkeiten.

Einrichtung eines produktionsbereiten Module Federation-Systems#

Lass uns eine realistische E-Commerce-Anwendung erstellen, bei der separate Teams verschiedene Domänen besitzen:

TypeScript
// apps/shell/webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      filename: 'remoteEntry.js',

      remotes: {
        // Produkt-Team Micro-Frontend
        products: 'products@http://localhost:3001/remoteEntry.js',
        // Warenkorb-Team Micro-Frontend
        cart: 'cart@http://localhost:3002/remoteEntry.js',
        // Benutzer-Team Micro-Frontend
        user: 'user@http://localhost:3003/remoteEntry.js',
      },

      shared: {
        react: {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0',
        },
        'react-dom': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0',
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: '^6.8.0',
        },
        // Benutzerdefinierte geteilte Utilities
        '@company/design-system': {
          singleton: true,
          requiredVersion: '^2.1.0',
        },
        '@company/event-bus': {
          singleton: true,
          requiredVersion: '^1.0.0',
        }
      },
    }),

    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};
TypeScript
// apps/products/webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',

  plugins: [
    new ModuleFederationPlugin({
      name: 'products',
      filename: 'remoteEntry.js',

      exposes: {
        './ProductList': './src/components/ProductList',
        './ProductDetail': './src/components/ProductDetail',
        './ProductSearch': './src/components/ProductSearch',
      },

      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.2.0',
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: '^6.8.0',
        },
        '@company/design-system': {
          singleton: true,
          requiredVersion: '^2.1.0',
        },
        '@company/event-bus': {
          singleton: true,
          requiredVersion: '^1.0.0',
        }
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },

  devServer: {
    port: 3001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};

Robustes Modulladen mit Error Boundaries#

Eine der größten Herausforderungen bei Module Federation ist die elegante Behandlung von Ladefehlern. Hier ist ein produktionserprobter Ansatz:

TypeScript
// src/components/MicroFrontendLoader.tsx
import React, { Suspense, lazy, useState, useEffect } from 'react';

interface MicroFrontendConfig {
  scope: string;
  module: string;
  url: string;
  fallback?: React.ComponentType;
}

interface LoadingState {
  isLoading: boolean;
  error: Error | null;
  retryCount: number;
}

const useDynamicScript = (url: string) => {
  const [ready, setReady] = useState(false);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    if (!url) return;

    const element = document.createElement('script');
    element.src = url;
    element.type = 'text/javascript';
    element.async = true;

    setReady(false);
    setFailed(false);

    element.onload = () => {
      console.log(`Dynamisches Skript geladen: ${url}`);
      setReady(true);
    };

    element.onerror = () => {
      console.error(`Dynamisches Skript Fehler: ${url}`);
      setReady(false);
      setFailed(true);
    };

    document.head.appendChild(element);

    return () => {
      console.log(`Dynamisches Skript entfernt: ${url}`);
      document.head.removeChild(element);
    };
  }, [url]);

  return { ready, failed };
};

const loadComponent = (scope: string, module: string) => {
  return async () => {
    // Initialisiert den Share-Bereich. Dies füllt ihn mit bekannten bereitgestellten Modulen aus diesem Build und allen Remotes
    await __webpack_init_sharing__('default');

    const container = (window as any)[scope]; // oder Container woanders beziehen
    if (!container) {
      throw new Error(`Container '${scope}' nicht gefunden`);
    }

    // Container initialisieren, er kann geteilte Module bereitstellen
    await container.init(__webpack_share_scopes__.default);

    const factory = await (window as any)[scope].get(module);
    const Module = factory();
    return Module;
  };
};

class MicroFrontendErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ComponentType },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: any) {
    console.error('Micro-Frontend Fehler:', error, errorInfo);

    // An Überwachungsservice senden
    if (typeof window !== 'undefined' && (window as any).analytics) {
      (window as any).analytics.track('Micro Frontend Fehler', {
        error: error.message,
        stack: error.stack,
        componentStack: errorInfo.componentStack,
      });
    }
  }

  render() {
    if (this.state.hasError) {
      const Fallback = this.props.fallback;
      return <Fallback />;
    }

    return this.props.children;
  }
}

export const MicroFrontendLoader: React.FC<{
  config: MicroFrontendConfig;
  props?: Record<string, any>;
}> = ({ config, props = {} }) => {
  const { ready, failed } = useDynamicScript(config.url);
  const [loadingState, setLoadingState] = useState<LoadingState>({
    isLoading: false,
    error: null,
    retryCount: 0,
  });

  useEffect(() => {
    if (ready && !loadingState.isLoading) {
      setLoadingState(prev => ({ ...prev, isLoading: true, error: null }));
    }
  }, [ready]);

  const handleRetry = () => {
    if (loadingState.retryCount &lt;3) {
      setLoadingState(prev => ({
        ...prev,
        retryCount: prev.retryCount + 1,
        error: null,
        isLoading: true,
      }));

      // Skript-Neuladen erzwingen
      window.location.reload();
    }
  };

  if (failed || (loadingState.error && loadingState.retryCount >= 3)) {
    const Fallback = config.fallback || DefaultErrorFallback;
    return <Fallback onRetry={handleRetry} />;
  }

  if (!ready) {
    return <LoadingFallback />;
  }

  const Component = lazy(loadComponent(config.scope, config.module));

  return (
    <MicroFrontendErrorBoundary fallback={config.fallback || DefaultErrorFallback}>
      <Suspense fallback={<LoadingFallback />}>
        <Component {...props} />
      </Suspense>
    </MicroFrontendErrorBoundary>
  );
};

const LoadingFallback: React.FC = () => (
  <div className="animate-pulse">
    <div className="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
    <div className="h-4 bg-gray-300 rounded w-1/2"></div>
  </div>
);

const DefaultErrorFallback: React.FC<{ onRetry?: () => void }> = ({ onRetry }) => (
  <div className="p-4 border border-red-300 rounded bg-red-50">
    <h3 className="text-red-800 font-semibold">Etwas ist schiefgelaufen</h3>
    <p className="text-red-600 text-sm mt-1">
      Dieser Abschnitt konnte nicht geladen werden. Bitte versuch, die Seite zu aktualisieren.
    </p>
    {onRetry && (
      <button
        onClick={onRetry}
        className="mt-2 px-3 py-1 bg-red-600 text-white rounded text-sm"
      >
        Wiederholen
      </button>
    )}
  </div>
);

Cross-Micro-Frontend-Kommunikation#

Einer der herausforderndsten Aspekte der Micro-Frontend-Architektur ist die Ermöglichung der Kommunikation zwischen unabhängig entwickelten und bereitgestellten Anwendungen. Hier sind die Muster, die ich am effektivsten gefunden habe:

1. Event-driven Kommunikation#

TypeScript
// @company/event-bus - Geteiltes Event-Bus-Paket
interface EventBusEvent {
  type: string;
  payload: any;
  source: string;
  timestamp: number;
}

class EventBus {
  private listeners: Map<string, Array<(event: EventBusEvent) => void>> = new Map();
  private eventHistory: EventBusEvent[] = [];
  private maxHistorySize = 50;

  subscribe(eventType: string, callback: (event: EventBusEvent) => void): () => void {
    if (!this.listeners.has(eventType)) {
      this.listeners.set(eventType, []);
    }

    this.listeners.get(eventType)!.push(callback);

    // Unsubscribe-Funktion zurückgeben
    return () => {
      const callbacks = this.listeners.get(eventType);
      if (callbacks) {
        const index = callbacks.indexOf(callback);
        if (index > -1) {
          callbacks.splice(index, 1);
        }
      }
    };
  }

  publish(type: string, payload: any, source: string = 'unknown') {
    const event: EventBusEvent = {
      type,
      payload,
      source,
      timestamp: Date.now(),
    };

    // Zur Historie hinzufügen
    this.eventHistory.push(event);
    if (this.eventHistory.length > this.maxHistorySize) {
      this.eventHistory.shift();
    }

    // Listener benachrichtigen
    const callbacks = this.listeners.get(type) || [];
    callbacks.forEach(callback => {
      try {
        callback(event);
      } catch (error) {
        console.error(`Fehler im Event-Listener für ${type}:`, error);
      }
    });

    // Debug-Logging in der Entwicklung
    if (process.env.NODE_ENV === 'development') {
      console.log(`[EventBus] ${type}:`, payload);
    }
  }

  getHistory(eventType?: string): EventBusEvent[] {
    if (eventType) {
      return this.eventHistory.filter(event => event.type === eventType);
    }
    return [...this.eventHistory];
  }

  // Events für spät ladende Micro-Frontends wiederholen
  replayEvents(eventType: string, callback: (event: EventBusEvent) => void) {
    const pastEvents = this.eventHistory.filter(event => event.type === eventType);
    pastEvents.forEach(event => callback(event));
  }
}

export const eventBus = new EventBus();

// React Hook für einfachere Nutzung
export const useEventBus = (
  eventType: string,
  callback: (event: EventBusEvent) => void,
  deps: React.DependencyList = []
) => {
  useEffect(() => {
    const unsubscribe = eventBus.subscribe(eventType, callback);
    return unsubscribe;
  }, deps);

  const publish = useCallback((payload: any, source?: string) => {
    eventBus.publish(eventType, payload, source);
  }, [eventType]);

  return { publish };
};

2. Praktische Nutzung in Micro-Frontends#

TypeScript
// products/src/components/ProductList.tsx
import React, { useState, useEffect } from 'react';
import { useEventBus } from '@company/event-bus';

interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
}

export const ProductList: React.FC = () => {
  const [products, setProducts] = useState<Product[]>([]);
  const [filters, setFilters] = useState<any>(null);

  // Auf Filteränderungen vom Such-Micro-Frontend hören
  useEventBus('search:filters-changed', (event) => {
    setFilters(event.payload);
  });

  // Auf Warenkorb-Updates hören, um Feedback zu zeigen
  useEventBus('cart:item-added', (event) => {
    // Erfolgsbenachrichtigung anzeigen
    showNotification(`${event.payload.productName} zum Warenkorb hinzugefügt!`);
  });

  const { publish } = useEventBus('products:product-selected', () => {});

  const handleProductClick = (product: Product) => {
    publish({
      productId: product.id,
      productName: product.name,
      source: 'product-list',
    }, 'products');
  };

  useEffect(() => {
    // Filter anwenden, wenn sie sich ändern
    if (filters) {
      // Produktfilter-Logik hier
      const filtered = applyFilters(products, filters);
      setProducts(filtered);
    }
  }, [filters]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {products.map(product => (
        <div
          key={product.id}
          className="border rounded-lg p-4 cursor-pointer hover:shadow-lg"
          onClick={() => handleProductClick(product)}
        >
          <img src={product.image} alt={product.name} className="w-full h-48 object-cover" />
          <h3 className="font-semibold mt-2">{product.name}</h3>
          <p className="text-gray-600">€{product.price}</p>
        </div>
      ))}
    </div>
  );
};
TypeScript
// cart/src/components/CartButton.tsx
import React, { useState, useEffect } from 'react';
import { useEventBus } from '@company/event-bus';

export const CartButton: React.FC = () => {
  const [itemCount, setItemCount] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  // Auf Produktzugaben hören
  useEventBus('products:product-selected', (event) => {
    addToCart(event.payload.productId);
  });

  const { publish } = useEventBus('cart:item-added', () => {});

  const addToCart = async (productId: string) => {
    try {
      // Zum Warenkorb hinzufügen Logik
      const response = await fetch('/api/cart/add', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ productId }),
      });

      if (response.ok) {
        const result = await response.json();
        setItemCount(prev => prev + 1);

        // Animation auslösen
        setIsAnimating(true);
        setTimeout(() => setIsAnimating(false), 500);

        // Andere Micro-Frontends benachrichtigen
        publish({
          productId,
          productName: result.productName,
          newTotal: result.cartTotal,
        }, 'cart');
      }
    } catch (error) {
      console.error('Fehler beim Hinzufügen zum Warenkorb:', error);
    }
  };

  return (
    <button
      className={`relative p-2 bg-blue-600 text-white rounded-full ${
        isAnimating ? 'animate-pulse' : ''
      }`}
    >
      <ShoppingCartIcon className="w-6 h-6" />
      {itemCount > 0 && (
        <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
          {itemCount}
        </span>
      )}
    </button>
  );
};

Routing-Strategien#

Routing in Micro-Frontend-Architekturen erfordert sorgfältige Koordination, um Konflikte zu vermeiden und eine nahtlose Benutzererfahrung zu gewährleisten:

1. Shell-kontrolliertes Routing#

TypeScript
// shell/src/App.tsx
import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { MicroFrontendLoader } from './components/MicroFrontendLoader';

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <div className="min-h-screen bg-gray-50">
        {/* Globale Navigation */}
        <nav className="bg-white shadow-sm border-b">
          <div className="max-w-7xl mx-auto px-4">
            <div className="flex justify-between h-16">
              <div className="flex">
                <Link to="/" className="flex items-center px-4 text-lg font-semibold">
                  E-Commerce
                </Link>
                <div className="flex space-x-8 ml-8">
                  <Link to="/products" className="flex items-center px-3 py-2 hover:text-blue-600">
                    Produkte
                  </Link>
                  <Link to="/categories" className="flex items-center px-3 py-2 hover:text-blue-600">
                    Kategorien
                  </Link>
                </div>
              </div>

              {/* Benutzerkonto-Micro-Frontend */}
              <div className="flex items-center">
                <MicroFrontendLoader
                  config={{
                    scope: 'user',
                    module: './UserMenu',
                    url: 'http://localhost:3003/remoteEntry.js',
                  }}
                />
              </div>
            </div>
          </nav>

        {/* Hauptinhaltsbereich */}
        <main className="max-w-7xl mx-auto px-4 py-8">
          <Routes>
            <Route path="/" element={<Navigate to="/products" replace />} />

            {/* Produkte-Micro-Frontend behandelt alle /products/* Routen */}
            <Route
              path="/products/*"
              element={
                <MicroFrontendLoader
                  config={{
                    scope: 'products',
                    module: './ProductsApp',
                    url: 'http://localhost:3001/remoteEntry.js',
                  }}
                />
              }
            />

            {/* Warenkorb-Micro-Frontend */}
            <Route
              path="/cart/*"
              element={
                <MicroFrontendLoader
                  config={{
                    scope: 'cart',
                    module: './CartApp',
                    url: 'http://localhost:3002/remoteEntry.js',
                  }}
                />
              }
            />

            {/* Fallback für unbekannte Routen */}
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
};

2. Micro-Frontend internes Routing#

TypeScript
// products/src/ProductsApp.tsx
import React from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { ProductList } from './components/ProductList';
import { ProductDetail } from './components/ProductDetail';
import { ProductSearch } from './components/ProductSearch';

export const ProductsApp: React.FC = () => {
  const location = useLocation();

  // Analytics-Tracking für Micro-Frontend
  useEffect(() => {
    if (typeof window !== 'undefined' && (window as any).analytics) {
      (window as any).analytics.page('Products', {
        path: location.pathname,
        microfrontend: 'products',
      });
    }
  }, [location.pathname]);

  return (
    <div className="products-app">
      <Routes>
        {/* Hinweis: Pfade sind relativ zu /products */}
        <Route index element={<ProductList />} />
        <Route path="search" element={<ProductSearch />} />
        <Route path="category/:categoryId" element={<ProductList />} />
        <Route path=":productId" element={<ProductDetail />} />
      </Routes>
    </div>
  );
};

Eine Debugging-Geschichte: Das Geheimnis der verschwindenden Routen#

Hier ist eine echte Debugging-Herausforderung, die die Komplexität des Micro-Frontend-Routings veranschaulicht. Wir hatten ein Produktionsproblem, bei dem bestimmte Produktdetailseiten zufällig einen 404-Fehler zeigten, aber nur für einige Benutzer und nur manchmal.

Die Untersuchung deckte eine Race Condition in unserem Routing-Setup auf:

TypeScript
// Der problematische Code
const ProductsApp: React.FC = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // Dies verursachte die Race Condition
    setTimeout(() => setIsLoaded(true), 100);
  }, []);

  if (!isLoaded) {
    return <div>Laden...</div>;
  }

  return (
    <Routes>
      <Route path=":productId" element={<ProductDetail />} />
    </Routes>
  );
};

Das Problem war, dass React Router in der Shell versuchte, Routen zu matchen, bevor das Micro-Frontend seine eigenen Routen fertig initialisiert hatte. Benutzer mit schnelleren Verbindungen trafen öfter auf die Race Condition.

Die Lösung erforderte Koordination zwischen Shell- und Micro-Frontend-Routing:

TypeScript
// Korrigierte Version mit ordnungsgemäßer Routenregistrierung
import { useEventBus } from '@company/event-bus';

const ProductsApp: React.FC = () => {
  const [routesReady, setRoutesReady] = useState(false);
  const { publish } = useEventBus('routing:micro-frontend-ready', () => {});

  useEffect(() => {
    // Verfügbare Routen bei der Shell registrieren
    publish({
      microfrontend: 'products',
      routes: [
        '/products',
        '/products/search',
        '/products/category/:categoryId',
        '/products/:productId'
      ]
    }, 'products');

    setRoutesReady(true);
  }, [publish]);

  if (!routesReady) {
    return <LoadingSpinner />;
  }

  return (
    <Routes>
      <Route index element={<ProductList />} />
      <Route path="search" element={<ProductSearch />} />
      <Route path="category/:categoryId" element={<ProductList />} />
      <Route path=":productId" element={<ProductDetail />} />
    </Routes>
  );
};

Diese Erfahrung lehrte uns die Wichtigkeit von:

  1. Explizite Routenregistrierung zwischen Shell und Micro-Frontends
  2. Ordnungsgemäße Ladezustände, die nicht mit dem Routing interferieren
  3. Umfassende Überwachung der Routenauflösung in der Produktion

Entwicklungs- und Teststrategien#

Lokales Entwicklungssetup#

TypeScript
// scripts/dev-all.js - Skript zum lokalen Ausführen aller Micro-Frontends
const { spawn } = require('child_process');
const path = require('path');

const services = [
  { name: 'shell', port: 3000, path: './apps/shell' },
  { name: 'products', port: 3001, path: './apps/products' },
  { name: 'cart', port: 3002, path: './apps/cart' },
  { name: 'user', port: 3003, path: './apps/user' },
];

const processes = [];

services.forEach(service => {
  console.log(`${service.name} wird auf Port ${service.port} gestartet...`);

  const process = spawn('npm', ['run', 'dev'], {
    cwd: path.resolve(service.path),
    stdio: 'inherit',
    shell: true,
    env: { ...process.env, PORT: service.port.toString() }
  });

  processes.push(process);
});

// Elegantes Herunterfahren
process.on('SIGTERM', () => {
  processes.forEach(p => p.kill());
});

process.on('SIGINT', () => {
  processes.forEach(p => p.kill());
  process.exit(0);
});

Integrationstests#

TypeScript
// tests/integration/micro-frontend-integration.test.ts
import { test, expect, Page } from '@playwright/test';

test.describe('Micro-Frontend-Integration', () => {
  test('sollte alle Micro-Frontends korrekt laden', async ({ page }) => {
    await page.goto('http://localhost:3000');

    // Warten bis Shell geladen ist
    await expect(page.locator('[data-testid="shell-loaded"]')).toBeVisible();

    // Prüfen, dass Micro-Frontends geladen sind
    await expect(page.locator('[data-testid="products-mf"]')).toBeVisible();
    await expect(page.locator('[data-testid="user-menu-mf"]')).toBeVisible();
  });

  test('sollte Micro-Frontend-Kommunikation handhaben', async ({ page }) => {
    await page.goto('http://localhost:3000/products');

    // Auf ein Produkt klicken
    await page.click('[data-testid="product-card"]:first-child');

    // Prüfen, dass Warenkorb aktualisiert wurde
    await expect(page.locator('[data-testid="cart-count"]')).toContainText('1');

    // Prüfen, dass Benachrichtigung erschien
    await expect(page.locator('[data-testid="notification"]')).toContainText('zum Warenkorb hinzugefügt');
  });

  test('sollte Micro-Frontend-Ausfälle elegant handhaben', async ({ page }) => {
    // Netzwerkausfall für ein Micro-Frontend simulieren
    await page.route('**/products/remoteEntry.js', route => {
      route.abort();
    });

    await page.goto('http://localhost:3000');

    // Sollte Fallback-UI zeigen
    await expect(page.locator('[data-testid="products-fallback"]')).toBeVisible();

    // Andere Micro-Frontends sollten noch funktionieren
    await expect(page.locator('[data-testid="user-menu-mf"]')).toBeVisible();
  });
});

Was kommt als Nächstes#

Du hast jetzt die Grundlage für die Implementierung von Micro-Frontends mit Module Federation zusammen mit robusten Kommunikations- und Routing-Mustern. Aber Produktionssysteme erfordern noch anspruchsvollere Ansätze.

Mach weiter mit Teil 3: Erweiterte Muster, Performance und Debugging für:

  • Erweiterte State-Verwaltung über verteilte Frontends
  • Performance-Optimierung und Bundle-Analysetechniken
  • Produktions-Debugging-Geschichten und Überwachungsstrategien
  • Sicherheitsmuster für Cross-Origin-Kommunikation
  • Memory-Leak-Erkennung und -Lösung
  • Migrationsstrategien von Monolithen

Wichtige Erkenntnis: Die hier behandelten Muster funktionieren gut für die meisten Anwendungsfälle, aber die echten Herausforderungen entstehen beim Umgang mit Skalierung, komplexen State-Interaktionen und den unvermeidlichen Edge Cases in Produktionsumgebungen.

Die geteilten Debugging-Geschichten repräsentieren häufige Probleme, denen du begegnen wirst. Jedes Micro-Frontend-System bringt einzigartige Komplexitäten mit sich, aber das Verständnis dieser grundlegenden Muster wird dir helfen, sie effektiver zu navigieren.

Seriennavigation

  • Teil 1: Architektur-Grundlagen
  • Teil 2 (Aktuell): Implementierungsmuster
  • Teil 3: Erweiterte Muster & Debugging
Loading...

Kommentare (0)

An der Unterhaltung teilnehmen

Melde dich an, um deine Gedanken zu teilen und mit der Community zu interagieren

Noch keine Kommentare

Sei der erste, der deine Gedanken zu diesem Beitrag teilt!

Related Posts