The combination of micro frontends and uni-app

The Concept and Advantages of Micro-Frontends

Micro-frontends is an architectural pattern that splits a frontend application into multiple independent modules. Each module can be developed, tested, and deployed independently, and ultimately combined into a complete application. This architecture is particularly suitable for large-scale projects, where different teams can develop different functional modules in parallel. The core advantage of micro-frontends lies in its technology stack independence, allowing different modules to be developed using different frameworks (such as Vue, React, or Angular).

// Micro-frontend architecture example
const app1 = {
  name: 'moduleA',
  entry: 'https://example.com/moduleA.js',
  container: '#moduleA-container',
  activeRule: '/moduleA'
};

const app2 = {
  name: 'moduleB', 
  entry: 'https://example.com/moduleB.js',
  container: '#moduleB-container',
  activeRule: '/moduleB'
};

The Cross-Platform Capabilities of uni-app

uni-app is a cross-platform development framework based on Vue.js. A single codebase can be compiled for iOS, Android, H5, and various mini-program platforms. It provides rich components and APIs, enabling developers to quickly build multi-platform applications. The core advantage of uni-app lies in its cross-platform capability, significantly reducing the workload of multi-platform adaptation.

// uni-app page example
<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="changeMessage">Click to modify</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message updated'
    }
  }
}
</script>

The Necessity of Combining Micro-Frontends with uni-app

In large-scale uni-app projects, as functionality increases, the codebase can become bloated, build times can lengthen, and team collaboration efficiency may decline. Introducing a micro-frontend architecture into uni-app projects can address these issues: different business modules can be developed and deployed independently, teams can choose their own technology stacks (within the uni-app ecosystem), and module updates do not affect the overall application.

Implementation Option 1: Micro-Frontend Integration Based on qiankun

qiankun is an open-source micro-frontend framework developed by Ant Group and can be integrated with uni-app. The main application is developed using uni-app, while sub-applications can be independent uni-app projects or applications built with other frameworks.

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

registerMicroApps([
  {
    name: 'vue-subapp',
    entry: '//localhost:7101',
    container: '#subapp-viewport',
    activeRule: '/vue',
  },
  {
    name: 'uniapp-subapp',
    entry: '//localhost:7102',
    container: '#subapp-viewport', 
    activeRule: '/uniapp',
  }
]);

start();

Implementation Option 2: Lightweight Solution Based on Modular Loading

For scenarios that do not require complete isolation, a lighter modular loading solution can be adopted. Different uni-app modules are compiled into independent sub-packages and loaded dynamically at runtime.

// Dynamic module loading example
function loadModule(moduleName) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = `/modules/${moduleName}.js`
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// Using a module
async function useUserModule() {
  await loadModule('user-center')
  const userModule = window.UserModule
  userModule.init('#user-container')
}

Solutions for Style Isolation

Style isolation is a critical issue in micro-frontends, and special attention is required when combining uni-app with micro-frontends:

1. CSS Namespacing: Add specific prefixes for each module.

/* User module styles */
.user-module .btn {
  color: #fff;
  background: #1890ff;
}

2. Shadow DOM: Use Web Components for isolation.

class UserElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <style>
        .btn { color: #fff; background: #1890ff; }
      </style>
      <button class="btn">User Button</button>
    `
  }
}
customElements.define('user-element', UserElement)

Sharing and Isolation of State Management

In a micro-frontend architecture, state management requires balancing sharing and isolation:

1. Global State: Shared through custom events or a global store.

// Main application emits an event
uni.$emit('global-data-update', { user: { name: 'John Doe' } })

// Sub-application listens
uni.$on('global-data-update', data => {
  console.log('Received global data:', data)
})

2. Local State: Each module maintains its own state.

// User module state management
const userStore = new Vuex.Store({
  state: {
    profile: null
  },
  mutations: {
    setProfile(state, profile) {
      state.profile = profile
    }
  }
})

Routing Management Strategies

Routing management in micro-frontends requires coordination between the main application and sub-applications:

1. Master Routing: The main application controls top-level routing.

// Main application routing configuration
const routes = [
  { path: '/home', component: Home },
  { path: '/user/*', component: UserContainer },
  { path: '/product/*', component: ProductContainer }
]

2. Sub-Application Routing: Sub-applications use in-memory routing.

// Sub-application routing configuration
const router = new VueRouter({
  mode: 'abstract',
  routes: [
    { path: '/list', component: UserList },
    { path: '/detail/:id', component: UserDetail }
  ]
})

Build and Deployment Optimization

For micro-frontend uni-app projects, build and deployment considerations include:

1. Independent Builds: Each module is built separately.

// package.json scripts
{
  "scripts": {
    "build:user": "uni-build --project user-module",
    "build:product": "uni-build --project product-module"
  }
}

2. Resource Deployment: Module resources are deployed independently.

/dist
  /index.html          # Main application
  /user-module
    /static
    /index.html       # User module
  /product-module
    /static
    /index.html       # Product module

Key Points for Performance Optimization

After combining micro-frontends, uni-app projects should focus on the following performance optimizations:

1. On-Demand Loading: Dynamically load non-core modules.

// Load the module only when the user clicks
function onUserCenterClick() {
  import('./user-module.js').then(module => {
    module.mount('#container')
  })
}

2. Resource Preloading: Preload resources that may be needed.

<!-- Preload sub-application resources -->
<link rel="prefetch" href="/modules/user-module.js" as="script">

3. Caching Strategy: Set appropriate HTTP caching.

# Nginx configuration
location /modules/ {
  expires 1y;
  add_header Cache-Control "public";
}

Debugging and Error Handling

Debugging techniques in a micro-frontend architecture:

1. Independent Debugging: Each module can run independently.

// user-module/package.json
{
  "scripts": {
    "serve": "uni-serve --port 3001"
  }
}

2. Error Boundaries: Prevent a single module crash from affecting the whole application.

// Safely load a module
async function safeMountModule(module, container) {
  try {
    await module.mount(container)
  } catch (err) {
    console.error('Module loading failed:', err)
    // Display a friendly error UI
    showErrorFallback(container)
  }
}

Real-World Business Scenario Example

E-commerce platform case study:

1. Main Application: Framework, navigation, login, and other basic functionalities.
2. Product Module: Product display, search, and categorization.
3. User Module: Personal center and order management.
4. Payment Module: Shopping cart and checkout process.

// E-commerce platform main application
const microApps = [
  {
    name: 'product',
    entry: process.env.PRODUCT_APP_URL,
    activeRule: '/product'
  },
  {
    name: 'user',
    entry: process.env.USER_APP_URL,
    activeRule: '/user'
  },
  {
    name: 'payment',
    entry: process.env.PAYMENT_APP_URL,
    activeRule: '/payment'
  }
]

Team Collaboration Models

Team collaboration approaches in a micro-frontend setup:

1. Code Repositories: Each module has its own repository.

project-main/       # Main application
project-user/       # User module
project-product/    # Product module

2. API Contracts: Clearly define module interfaces.

// User module interface definition
window.UserModule = {
  mount: (container) => { /*...*/ },
  unmount: () => { /*...*/ },
  getUserInfo: () => { /*...*/ }
}

3. Documentation Standards: Shared development documentation.

# User Module Development Guide

## Interface Description
- mount(container): Mount to the specified container
- unmount(): Unmount the module

## Event Communication
- Emit events: user-module:event-name
- Receive events: global:event-name

Potential Future Evolution Directions

Possible future developments for this technology combination:

1. Webpack 5 Module Federation: More efficient module sharing.

// webpack.config.js
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    userModule: 'user@http://localhost:3001/remoteEntry.js'
  }
})

2. Vite + Micro-Frontends: Leverage Vite's fast builds.

// vite.config.js
export default {
  build: {
    lib: {
      entry: './src/main.js',
      name: 'UserModule',
      formats: ['umd']
    }
  }
}

3. Serverless Integration: Dynamic module deployment on demand.

// Dynamically fetch module entry
async function getModuleEntry(moduleName) {
  const res = await fetch(`/api/modules/${moduleName}`)
  return res.json()
}