From R&D Pain Points to Mini‑Program Engineering: Stages, Tools, and Best Practices

Mini‑programs have become one of the hottest topics at Ant Group, offering a unique traffic entry (e.g., collection, search) that drives many internal and partner teams to align their front‑end stacks with mini‑program technology.

Stage 1 – Building Blocks

The native mini‑program architecture differs significantly from traditional front‑end projects. Teams first migrate H5 code to mini‑programs using App , Page , and Component structures while keeping the app pure. Early adoption also integrates Ant Group’s Mock tool Datahub and unified front‑end monitoring to ensure traceable online issues.

Stage 2 – Standardization

Ant Group standardizes mini‑program development by providing powerful IDE plugins, unifying the workflow for internal and third‑party developers, and aligning global wallet products to a common mini‑program standard.

Stage 3 – Engineering

With standards in place, developers can treat mini‑programs like regular front‑end projects, extracting reusable UI components (e.g., Mini‑UI) and organizing complex projects as SubApps.

State Management

State management introduces a data flow that enables sharing between pages and the app. Ant Group uses a custom tool called herculex , but Redux or MobX can also be adopted. Example of page keep‑alive data updates:

When two pages are opened, both stay alive for a period; if both listen to the same store, updates in the visible page silently refresh the hidden page, so the user sees fresh data upon return.

Optimized data updates are handled internally by this.setData , abstracting the complexity from developers.

Mock Solution (Datahub)

Datahub provides a local mock server for backend APIs. Configuration example:

// datahub.config.js
module.exports = {
  port: 5678,
  store: require('path').join(__dirname, 'data'),
}

// package.json
"scripts": {
  "datahub": "datahub server -c datahub.config.js"
},

Running npm run datahub starts the mock server, and mini‑program code can request it via my.request :

my.request({
  url: `http://127.0.0.1:5678/data/#yourBusiness#/${#yourApi#}`,
  method,
  data: params,
  dataType: 'json',
  success: res => resolve(res.data),
  fail: (res) => {
    reject(res)
    my.showToast({
      type: 'exception',
      duration: 3000,
      content: 'DataHub network error, please check configuration',
    })
  },
})

Benefits include: no mock data bundled in builds, easy scene switching, and shared mock data across developers.

Monitoring

Mini‑programs can report analytics using my.reportAnalytics . It is recommended to add calls in error handling, global App.onError , and key user interactions. Errors can be reported with the standard Error object:

new Error([message[, fileName[, lineNumber]]])

Internationalization

Language resources are loaded at app initialization:

my.getSystemInfo({
  success: res => {
    this.globalData.i18n = require(`./i18n/${languageMap[res.language] || 'zh-CH'}.js`)
  },
  fail: () => {
    this.globalData.i18n = require('./i18n/zh-CH.js')
  },
})

Utility to fetch localized text:

export function getText(key, defaultValue) {
  return getApp().globalData.i18n[key] || defaultValue || key
}

Extensions

Teams can create reusable component libraries (e.g., mini‑ui) and publish them via npm:

yarn add mini-program-component

Usage in page.json :

"usingComponents": {
  "treasure-card": "mini-program-component/es/treasure-card/index"
}

SubApp Architecture

For large mini‑programs, the codebase can be split into multiple SubApps, each with its own components, pages, and store, while sharing a common root app and global store. Example directory layout:

.
├── app.acss
├── app.js   # App
├── app.json
├── package.json
├── store/   # App Store
│   └── index.js
├── subApp1/ # Sub App 1
│   ├── components
│   ├── pages
│   └── store/
└── subApp2/ # Sub App 2
    ├── components
    ├── pages
    └── store/

Future Outlook

Mini‑programs provide a unified standard that enables cross‑platform code reuse, reducing fragmentation across client stacks. They also open opportunities for third‑party developers to quickly deliver lightweight daily‑use applications (e.g., expense tracking, barcode price lookup), fostering a vibrant external ecosystem.