Frontend design patterns in microservices architecture

Overview of Frontend Design Patterns in Microservices Architecture

In a microservices architecture, the frontend faces challenges such as distributed backend services, independent deployment, and technological heterogeneity. Traditional monolithic frontends struggle to adapt to this environment, requiring specific design patterns to address communication, state management, component reuse, and other issues. Frontend design patterns have evolved into new forms in microservices scenarios, such as micro frontends, API composition layers, BFF layers, and more.

Micro Frontends Pattern

Micro frontends extend the concept of backend microservices to the frontend domain, allowing different teams to independently develop and deploy frontend modules. The core challenge is solving the integration of multiple independent frontend applications.

Comparison Table of Implementation Methods:

// Web Components Example
class MicroApp extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <div style="border: 1px dashed #ccc; padding: 20px;">
        <h3>Order Micro App</h3>
        <order-list></order-list>
      </div>
    `;
  }
}
customElements.define('micro-app', MicroApp);

Routing Synchronization Solutions:

1. Master application controls routing uniformly
2. Event bus based on URL
3. Custom history.pushState encapsulation

BFF Layer Design Pattern

The Backend For Frontend (BFF) pattern acts as a middleware layer, providing customized APIs for the frontend. Typical implementations include three variants:

1. Aggregator BFF

// Node.js Implementation Example
app.get('/user-dashboard', async (req, res) => {
  const [user, orders, messages] = await Promise.all([
    fetchUserService(req.userId),
    fetchOrderService(req.userId),
    fetchMessageService(req.userId)
  ]);
  
  res.json({
    user: transformUser(user),
    orders: normalizeOrders(orders),
    unread: messages.filter(m => !m.read).length
  });
});

2. Adapter BFF Handles protocol conversion for different microservices:

• gRPC → REST
• GraphQL → JSON API
• WebSocket → HTTP long polling

3. Edge BFF BFF running on CDN edge nodes, with typical features:

• Geolocation awareness
• Device capability adaptation
• First-screen data prefetching

Special State Management Patterns

Microservices architecture requires frontend state management to handle distributed data sources:

Cross-Microservice State Synchronization

// Redux Middleware Example
const syncMiddleware = store => next => action => {
  if (action.type === 'UPDATE_ORDER') {
    // Synchronize with inventory microservice state
    fetch(`/inventory-api/related/${action.payload.id}`, {
      method: 'PATCH',
      body: JSON.stringify(action.payload)
    });
  }
  return next(action);
};

Local-to-Global State Transformation

graph LR
    A[User Service State] --> C[Global Store]
    B[Order Service State] --> C
    C --> D[Unified View Layer]

API Composition Patterns

Solutions for frontend directly calling multiple microservices:

Client-Side Composition

// Frontend composing multiple API calls
async function loadDashboard() {
  try {
    const [products, user] = await Promise.all([
      fetch('/product-service/api/v1/featured'),
      fetch('/user-service/api/v2/profile')
    ]);
    
    return {
      featured: products.slice(0, 3),
      userName: user.displayName
    };
  } catch (error) {
    // Unified error handling
    showErrorToast('Failed to load data');
  }
}

Server-Side Composition GraphQL implementation:

type Query {
  userWithOrders(userId: ID!): UserWithOrders
}

type UserWithOrders {
  user: User
  orders: [Order]
}

Fault Tolerance and Fallback Patterns

Frontend strategies for unstable microservices:

1. Request-Level Fallback

function fetchWithFallback(url, fallbackData) {
  return fetch(url)
    .then(res => res.json())
    .catch(() => {
      console.warn(`Using fallback data: ${url}`);
      return fallbackData;
    });
}

2. Component-Level Fallback React implementation example:

function ProductDetail({ productId }) {
  const [product, setProduct] = useState(null);
  const [error, setError] = useState(false);

  useEffect(() => {
    fetchProduct(productId)
      .then(setProduct)
      .catch(() => setError(true));
  }, [productId]);

  if (error) return <GenericProductCard />;
  if (!product) return <LoadingSkeleton />;
  return <FullProductDetail product={product} />;
}

3. Visual Degradation Solutions

• Skeleton screen → Static placeholder → Text description → Empty state

Micro Frontends Communication Patterns

Communication mechanisms between independent micro-apps:

1. Custom Events

// Publisher
window.dispatchEvent(
  new CustomEvent('cart-updated', {
    detail: { count: 5 }
  })
);

// Subscriber
window.addEventListener('cart-updated', (e) => {
  updateCartBadge(e.detail.count);
});

2. Shared State Store

interface SharedState {
  currentUser: User | null;
  darkMode: boolean;
}

const sharedStore = new Proxy<SharedState>({
  currentUser: null,
  darkMode: false
}, {
  set(target, prop, value) {
    target[prop] = value;
    window.dispatchEvent(new Event('shared-state-change'));
    return true;
  }
});

3. URL Parameter Passing

// Master app routing control
function navigateToMicroApp(appName, params) {
  const query = new URLSearchParams(params);
  window.history.pushState(null, '', `/${appName}?${query}`);
}

// Child app parsing
const params = Object.fromEntries(
  new URLSearchParams(window.location.search)
);

Performance Optimization Patterns

Solutions for frontend performance issues specific to microservices architecture:

1. Dependency Sharing

// module-federation.config.js
module.exports = {
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    'styled-components': { eager: true }
  }
};

2. Lazy Loading Strategy

// React lazy loading micro-apps
const ProductMicroApp = React.lazy(() => import('product/app'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Route path="/products" component={ProductMicroApp} />
    </Suspense>
  );
}

3. Prefetch Optimization

<!-- Preloading in master app HTML -->
<link rel="prefetch" href="/micro-apps/checkout.bundle.js" as="script">
<link rel="prefetch" href="/api/graphql-schema" as="fetch">

Authentication and Authorization Patterns

Unified authentication solutions across microservices:

JWT Flow

sequenceDiagram
    Frontend->>Auth Service: Login to get JWT
    Auth Service-->>Frontend: Returns JWT
    Frontend->>Microservice A: Request with Authorization header
    Microservice A->>Auth Service: Validate JWT
    Auth Service-->>Microservice A: Returns validation result
    Microservice A-->>Frontend: Returns data

Frontend Implementation Example

// Request interceptor
axios.interceptors.request.use(config => {
  const token = authStore.getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Response interceptor
axios.interceptors.response.use(
  response => response,
  error => {
    if (401 === error.response.status) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Monitoring and Logging Patterns

Frontend monitoring solutions for distributed systems:

Unified Log Collection

class MicroFrontendLogger {
  constructor(appName) {
    this.appName = appName;
  }

  log(type, message, metadata = {}) {
    const logEntry = {
      timestamp: new Date().toISOString(),
      app: this.appName,
      type,
      message,
      ...metadata
    };
    
    // Send to log collection service
    navigator.sendBeacon('/log-collector', JSON.stringify(logEntry));
  }
}

// Usage example
const logger = new MicroFrontendLogger('checkout-app');
logger.log('PERF', 'Checkout loaded', { loadTime: 1420 });

Error Boundary Handling React component example:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    trackError({
      error,
      componentStack: info.componentStack,
      microApp: window.__MICRO_APP_NAME__
    });
  }

  render() {
    return this.state.hasError
      ? <FallbackUI />
      : this.props.children;
  }
}

Deployment and Version Control

Deployment challenges specific to micro frontends:

Version Compatibility Matrix

Runtime Configuration Injection

// When master app loads micro-apps
window.__APP_CONFIG__ = {
  apiBaseUrl: 'https://api.example.com',
  env: 'production',
  featureFlags: {
    newCheckout: true
  }
};

// Micro-app reads configuration
const apiUrl = window.__APP_CONFIG__?.apiBaseUrl || '/api';

Testing Strategy Patterns

Testing methods specific to microservices frontend:

Contract Testing Example

// Mock API responses from different microservices
const mockServices = {
  userService: {
    'GET /users/1': {
      status: 200,
      response: { id: 1, name: 'Test User' }
    }
  },
  orderService: {
    'GET /orders?userId=1': {
      status: 200,
      response: [{ id: 101, total: 99.99 }]
    }
  }
};

// Test case
test('should display user with orders', async () => {
  setupMocks(mockServices);
  render(<UserDashboard userId={1} />);
  
  await waitFor(() => {
    expect(screen.getByText('Test User')).toBeInTheDocument();
    expect(screen.getByText('$99.99')).toBeInTheDocument();
  });
});

Visual Regression Testing

// Storybook + Chromatic Example
export const DefaultDashboard = () => (
  <MockedProvider mocks={dashboardMocks}>
    <Dashboard />
  </MockedProvider>
);

DefaultDashboard.story = {
  parameters: {
    chromatic: { viewports: [320, 768, 1200] }
  }
};

Design System Integration

Solutions for design consistency across micro-apps:

Token Passing Mechanism

/* Master app defines CSS variables */
:root {
  --color-primary: #1890ff;
  --font-size-base: 14px;
  --space-unit: 8px;
}

/* Micro-app inherits and uses */
.micro-app {
  color: var(--color-primary);
  padding: calc(var(--space-unit) * 2);
}

On-Demand Component Library Loading

// Dynamically load design system
function loadDesignSystem(version) {
  return new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = `https://ds.example.com/v${version}/index.js`;
    script.onload = resolve;
    document.head.appendChild(script);
  });
}

// When micro-app starts
await loadDesignSystem('2.1');
const { Button, Modal } = window.DesignSystem;