Lesson 10-Micro Frontend Ecosystem

Related Tools and Libraries

Module Federation Plugin Ecosystem

Webpack Module Federation

Core Features:

• Dynamic loading of remote modules
• Runtime code splitting
• Shared dependency management

Key Configuration Example:

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.2' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.2' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};

Advantages:

• Officially maintained, seamlessly integrated with Webpack ecosystem
• Supports dynamic loading and runtime dependency sharing
• Compatible with React/Vue/Angular and other frameworks

Vite Module Federation

Features:

• Fast development experience based on Vite
• Native ESM support
• Faster hot module replacement (HMR)

Configuration Example:

// vite.config.js
import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});

// vite.config.js
import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});

Advantages:

• Fast startup in development environment
• Optimized production builds
• Suitable for modern frontend projects

Micro Frontend-Specific Tools

Single-SPA

Architecture Features:

• JavaScript-based micro frontend framework
• Supports coexistence of multiple frameworks
• Provides application lifecycle management

Core Concepts:

• Root Config
• Application
• Application Registry

Configuration Example:

// root-config.js
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: ['/app1'],
});

start();

// root-config.js
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => System.import('app1'),
  activeWhen: ['/app1'],
});

start();

Advantages:

• Framework-agnostic
• Mature and stable
• Strong community support

Qiankun

Alibaba’s Open-Source Solution:

• Enhanced version of Single-SPA
• Provides robust style isolation
• Built-in sandbox mechanism

Configuration Example:

// Main application configuration
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#app1',
    activeRule: '/app1',
  },
]);

start();

// Main application configuration
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#app1',
    activeRule: '/app1',
  },
]);

start();

Advantages:

• Rich Chinese documentation
• Enterprise-grade support
• Comprehensive features

Development Support Tools

Webpack Bundle Analyzer

Features:

• Visualizes bundle results
• Identifies large modules
• Provides optimization suggestions

Usage Example:

npm install --save-dev webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

Lighthouse

Features:

• Performance auditing
• Accessibility checking
• Best practice validation

Usage:

npm install -g lighthouse
lighthouse https://your-app.com --view

npm install -g lighthouse
lighthouse https://your-app.com --view

Puppeteer

Uses:

• Automated testing
• Performance benchmarking
• End-to-end testing

Example Script:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://your-app.com');
  
  // Performance metrics
  const performanceMetrics = await page.evaluate(() => {
    return window.performance.timing;
  });
  
  console.log(performanceMetrics);
  await browser.close();
})();

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://your-app.com');
  
  // Performance metrics
  const performanceMetrics = await page.evaluate(() => {
    return window.performance.timing;
  });
  
  console.log(performanceMetrics);
  await browser.close();
})();

Community Resources and Best Practices

Open-Source Project Analysis

Netflix/Falcor

Features:

• Data fetching layer abstraction
• RESTful API optimization
• GraphQL alternative

Applicable Scenarios:

• Complex data dependency relationships
• High-performance data fetching
• Microservices frontend integration

Zalando/Backstage

Features:

• Software catalog
• Plugin architecture
• DevOps integration

Advantages:

• Enterprise-grade application management
• Unified developer experience
• Extensible plugin system

Success Case Studies

DJI Innovation

Architecture Features:

• Micro frontend decomposition by business domain
• Shared authentication service
• Unified monitoring platform

Implementation Results:

• 40% improvement in development efficiency
• 60% reduction in deployment time
• 80% improvement in fault isolation rate

Ctrip Travel

Technology Selection:

• Qiankun as the base framework
• Custom state management solution
• Integrated performance monitoring system

Key Outcomes:

• Supports 10+ daily releases
• 95% user experience consistency
• Improved cross-team collaboration efficiency

Common Problem Solutions

Style Conflicts

Solutions:

1. CSS Modules
2. Shadow DOM
3. Namespace conventions

Example Code:

/* Using namespaces */
.app1-header {
  /* Style definitions */
}

.app2-header {
  /* Style definitions */
}

/* Using namespaces */
.app1-header {
  /* Style definitions */
}

.app2-header {
  /* Style definitions */
}

State Management

Recommended Solutions:

• Small applications: Context API + useReducer
• Medium to large applications: Redux Toolkit + modular reducers
• Cross-application sharing: Custom event bus

Example Implementation:

// Main application state management
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    user: userReducer,
    settings: settingsReducer,
  },
});

export const { dispatch, useSelector } = store;

// Main application state management
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    user: userReducer,
    settings: settingsReducer,
  },
});

export const { dispatch, useSelector } = store;

Performance Optimization

Key Strategies:

1. Code splitting (React.lazy + Suspense)
2. Preloading critical resources
3. Virtual lists for handling large datasets

Configuration Example:

// Dynamic import of components
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </React.Suspense>
  );
}

// Dynamic import of components
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </React.Suspense>
  );
}

Industry Trends and Future Development

Web Components Integration

Core Advantages

• Native browser support
• Framework-agnostic
• Strong encapsulation

Implementation Example:

// Define Web Component
class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello, World!</p>`;
  }
}

customElements.define('my-component', MyComponent);

// Define Web Component
class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello, World!</p>`;
  }
}

customElements.define('my-component', MyComponent);

Micro Frontend Application Scenarios:

• Cross-framework component reuse
• Progressive enhancement
• Third-party component integration

Serverless Integration

Architectural Advantages

• No server maintenance
• Automatic scaling
• Pay-per-use pricing

Typical Deployment Patterns:

1. Edge functions + micro frontends
2. Serverless API gateways
3. FaaS rendering layer

Performance Optimization Techniques:

• Pre-render static content
• On-demand loading of dynamic parts
• Cache strategy optimization

Edge Computing Applications

Technology Stack Selection

• Cloudflare Workers
• AWS Lambda@Edge
• Vercel Edge Functions

Application Scenarios:

1. Geolocation-aware rendering
2. A/B testing traffic splitting
3. Real-time content personalization

Performance Comparison:

Emerging Framework Exploration

SolidJS

Features:

• Fine-grained reactivity
• Compile-time optimization
• React-like API

Performance Advantages:

• Updates 10x faster than React
• 50% less memory usage
• 30% smaller bundle size

SvelteKit

Advantages:

• Precompiled to efficient native code
• Server-side component support
• File-based routing system

Applicable Scenarios:

• High-performance applications
• Static site generation
• Complex routing requirements

Linaria

CSS-in-TypeScript Solution:

• Zero runtime overhead
• Type-safe
• High compatibility with micro frontends

Configuration Example:

import { styled } from '@linaria/react';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

import { styled } from '@linaria/react';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

Summary and Recommendations

1. Toolchain Selection:
   • Webpack Module Federation is suitable for complex projects
   • Qiankun is ideal for quick-start enterprise applications
   • Vite ecosystem tools are best for projects prioritizing developer experience
2. Performance Optimization Focus:
   • Prioritize code splitting and lazy loading
   • Preload critical path resources
   • Use virtual lists for large dataset rendering
3. Security Practices:
   • Always implement CSP strategies
   • Conduct regular security audits
   • Log sensitive operations
4. Future Preparation:
   • Evaluate Web Components integration possibilities
   • Explore Serverless architecture feasibility
   • Stay updated on edge computing advancements
5. Team Building:
   • Conduct micro frontend-specific training
   • Share best practice documentation
   • Establish cross-team collaboration mechanisms