Why Umi Is the Enterprise‑Grade Frontend Framework Powering 10,000+ Apps

Umi is Ant Group's underlying frontend framework serving over 10,000 applications across Java, Node, H5, Hybrid, assets, CMS, Electron, Serverless and more.

Introduction

Umi (pronounced “Wu Mi”) is an extensible enterprise‑grade frontend application framework built on routing, supporting both configuration‑based and convention‑based routes, with a complete plugin lifecycle covering source code to build artifacts.

Main Features

Out‑of‑the‑box : built‑in routing, build, deployment, testing, lint, etc., start with a single Umi dependency.

Enterprise‑grade : chosen by Ant Group for 10,000+ apps and widely used at Alibaba, ByteDance, Tencent, NetEase, Meituan, Kuaishou and others.

Best Practices : includes micro‑frontend, data flow, permission, i18n, icons, analytics, Ant Design, request handling, CSS solutions, charting and more.

Extensible : the entire web‑app lifecycle is plugin‑based, and even Umi’s core features are implemented as plugins.

Complete Routing : based on React Router 6, Remix‑like, supporting nested, dynamic, optional, pre‑fetch, and route‑based request optimization.

Fast by Default : MFSU solves slow Webpack compilation using esbuild for faster build, test and runtime performance.

Dual Build Engines : offers both Vite and Webpack modes with functional parity.

Dependency Pre‑bundling : pre‑bundles dependencies, locks versions and updates regularly to ensure long‑term compatibility.

Design Philosophy

Technical convergence means consolidating the tech stack and dependencies so developers only need to depend on @umijs/max and no longer worry about Babel, Webpack, PostCSS, React, React‑Router, etc.

Plugins and plugin sets enable scenario‑specific extensions; for example, @umijs/preset-vue adds Vue support and @umijs/preset-h5 bundles H5‑related features.

Chart Example

Line Chart

First install the chart library: pnpm install @ant-design/plots Fetch data and store it in state:

import { useState, useEffect } from 'react';

const DemoLine = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => {
        console.log('fetch data failed', error);
      });
  };
};

Sample data object:

{
  "Date": "2010-01",
  "scales": 1998
}

Render the line chart:

import React from 'react';
import { Line } from '@ant-design/plots';

const DemoLine = () => {
  const config = {
    data,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      // type: 'timeCat',
      tickCount: 5,
    },
    smooth: true,
  };
  return <Line {...config} />;
};

The "Date" field maps to the X‑axis and the "scales" field to the Y‑axis.

Quick Start

Environment Preparation

Install Node.js version 14 or higher.

Create Project

$ mkdir myapp && cd myapp

Use NPM to Create Project

$ npx create-umi@latest
Need to install the following packages:
  create-umi@latest
Ok to proceed? (y) y
✔ Pick Umi App Template › Simple App
✔ Pick Npm Client › npm
✔ Pick Npm Registry › taobao
Write: .gitignore
Write: .npmrc
Write: .umirc.ts
Write: package.json
Copy:  src/assets/yay.jpg
Copy:  src/layouts/index.less
Write: src/layouts/index.tsx
Copy:  src/pages/docs.tsx
Copy:  src/pages/index.tsx
Write: tsconfig.json
Copy:  typings.d.ts

> postinstall
> umi setup

Parameter Options

When creating a project with create-umi, the following options are available:

no‑git: create project without initializing Git.

no‑install: create project without automatically installing dependencies.

Start Project

Run the development server:

$ pnpm dev
╔═════════════════════════════════════════════════════╗
║ App listening at:                                 ║
║   >   Local: https://127.0.0.1:8001               ║
║   > Network: https://192.168.1.1:8001             ║
║                                                   ║
║ Now you can open browser with the above addresses ║
╚═════════════════════════════════════════════════════╝
event - compiled successfully in 1121 ms (388 modules)
event - MFSU compiled successfully in 1308 ms (875 modules)

Open http://localhost:8000/ in a browser to see the running app.

GitHub: https://github.com/umijs/umi Project homepage: https://umijs.org/