with micro-frontend architecture

Micro-frontend architecture is a development approach that splits a frontend application into multiple independent modules, each of which can be developed, tested, and deployed independently. Combined with TypeScript's type system, it significantly improves code maintainability and team collaboration efficiency. Below, we discuss the core concepts, technical implementations, and specific cases.

Core Concepts of Micro-Frontend Architecture

The core of micro-frontend architecture lies in decoupling and autonomy. A typical micro-frontend system includes the following elements:

1. Container Application: Acts as the main framework to load various micro-apps.
2. Micro-Apps: Independent functional modules, which can be implemented using frameworks like React, Vue, or Angular.
3. Shared Dependencies: Avoids redundant loading of common libraries.
4. Communication Mechanism: Data interaction methods between micro-apps.

This architecture is particularly suitable for large-scale projects, such as e-commerce platforms, where modules like product listings, shopping carts, and payments can be split into independent micro-apps.

Advantages of TypeScript in Micro-Frontends

TypeScript brings multiple benefits to micro-frontend development:

// Define interfaces for cross-application communication
interface MicroFrontendEvent {
  type: string;
  payload: unknown;
  source: string;
}

// Use generics to strengthen event handlers
class EventBus {
  private handlers = new Map<string, Set<(event: MicroFrontendEvent) => void>>();

  register<T extends MicroFrontendEvent>(
    eventType: string,
    handler: (event: T) => void
  ) {
    if (!this.handlers.has(eventType)) {
      this.handlers.set(eventType, new Set());
    }
    this.handlers.get(eventType)?.add(handler as any);
  }
}

The type system can catch the following issues at compile time:

• Data structure mismatches in communication between micro-apps
• Version compatibility issues with shared libraries
• Interface inconsistencies in cross-team collaboration

Implementation Comparison

Option 1: Module Federation

Webpack 5's Module Federation is the current mainstream solution:

// webpack.config.ts (Container Application)
const config: Configuration = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        productApp: 'product@http://localhost:3001/remoteEntry.js',
        cartApp: 'cart@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

Option 2: iframe Integration

A traditional but stable solution:

// Encapsulate iframe communication layer
class IframeWrapper {
  constructor(private url: string, private features: string[]) {}
  
  async load(): Promise<Window> {
    return new Promise((resolve) => {
      const iframe = document.createElement('iframe');
      iframe.src = this.url;
      iframe.onload = () => resolve(iframe.contentWindow!);
      document.body.appendChild(iframe);
    });
  }
}

State Management Strategies

State management in micro-frontends requires special design:

// Use Redux for cross-application state sharing
declare global {
  interface Window {
    __MICRO_FRONTEND_STORE__?: {
      subscribe: (listener: () => void) => () => void;
      getState: () => Record<string, unknown>;
      dispatch: (action: AnyAction) => void;
    };
  }
}

// Check global store during micro-app initialization
function initializeStore() {
  if (!window.__MICRO_FRONTEND_STORE__) {
    window.__MICRO_FRONTEND_STORE__ = createStore(
      combineReducers({ /*...*/ }),
      applyMiddleware(thunk)
    );
  }
  return window.__MICRO_FRONTEND_STORE__;
}

CSS Isolation Solutions

CSS conflicts are a common issue in micro-frontends. Solutions include:

1. Shadow DOM:

class MicroAppElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const style = document.createElement('style');
    style.textContent = `/* Scoped styles */`;
    shadow.appendChild(style);
  }
}

2. CSS Naming Conventions:

// Use PostCSS to automatically add prefixes
module.exports = {
  plugins: [
    require('postcss-prefix-selector')({
      prefix: 'mf-product-',
      exclude: [/^html/, /^body/]
    })
  ]
}

Performance Optimization Practices

Micro-frontends require special attention to loading performance:

// Implement smart preloading
const prefetchMap = new Map<string, Promise<void>>();

function prefetchMicroApp(name: string) {
  if (!prefetchMap.has(name)) {
    prefetchMap.set(name, import(
      /* webpackPrefetch: true */
      `./micro-apps/${name}/index.ts`
    ));
  }
  return prefetchMap.get(name)!;
}

// Route prediction-based preloading
router.beforeEach((to) => {
  if (to.meta.requiresMicroApp) {
    prefetchMicroApp(to.meta.microAppName);
  }
});

Testing Strategy Adjustments

Micro-frontends require layered testing:

// Contract testing example
describe('Product/Cart Interface Contract', () => {
  test('Shopping cart product data structure consistency', () => {
    const productType = z.object({
      id: z.string(),
      price: z.number(),
      // ...
    });
    
    const cartItemType = productType.extend({
      quantity: z.number()
    });

    expect(() => cartItemType.parse(mockProduct)).not.toThrow();
  });
});

Deployment and Version Control

Adopt semantic versioning strategies:

// Version compatibility check
function checkDependencyVersions(
  required: Record<string, string>,
  provided: Record<string, string>
) {
  return Object.entries(required).every(([pkg, range]) => {
    return semver.satisfies(provided[pkg], range);
  });
}

Error Handling and Monitoring

Establish a unified error collection mechanism:

// Error boundary component
class MicroFrontendErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error: Error, info: React.ErrorInfo) {
    window.__MICRO_FRONTEND_ERROR_TRACKER__?.captureException(
      error, 
      { ...info, microApp: this.props.appName }
    );
  }
}

Progressive Migration Path

Steps to migrate from a monolithic to a micro-frontend architecture:

1. Create a Shell Container
2. Extract Independent Modules
3. Establish Shared Libraries
4. Implement Communication Layer
5. Gradually Replace Legacy Modules

// Wrap legacy code as a micro-app
function legacyAppLoader(container: HTMLElement) {
  return new Promise<void>((resolve) => {
    require(['legacy/app'], (app) => {
      app.init(container);
      resolve();
    });
  });
}