Umi is the underlying front-end framework of Ant Group, and has directly or indirectly served 10,000+ applications, including Java, Node, H5 wireless, offline (Hybrid) applications, pure front-end assets applications, CMS applications, Electron applications, Serverless applications, etc.

introduce

Umi, pronounced "乌米" in Chinese, is a scalable enterprise-level front-end application framework. Umi is based on routing, and supports configuration routing and convention routing at the same time, to ensure that routing functions are complete, and to expand functions. Then it is equipped with a plug-in system with a complete life cycle, covering each life cycle from source code to construction products, and supporting various function extensions and business needs.

main features

Out of the box : built-in routing, build, deploy, test, Lint, etc., only need one Umi dependency to get started developing.
Enterprise level : Ant Group has 10,000+ applications to choose from. At the same time, it also has a large number of applications in companies such as Ali, Byte, Tencent, Netease, Meituan, and Kuaishou.
Best practices : Best practices for built-in micro frontends, data flow, permissions, internationalization, icons schemes, buried points, antd, requests, CSS schemes, charts, etc.
Extensible : Umi realizes the complete life cycle of web application development and makes it plug-in, including Umi's internal functions are all realized by plug-ins.
Complete routing : Based on React Router 6, Remix-like, supports nesting, dynamic, dynamic optional, preloading, route-based request optimization, etc.
Fast by default : MFSU solves the problem of slow compilation of Webpack, performance problems of decompression, configuration and testing through esbuild, and runtime...
Dual build engines : Provide Vite and Webpack two build modes for developers to choose, and ensure the consistency of their functions as much as possible.
Dependency prepackaging : Umi prepackages dependencies, completely locks dependencies, and regularly updates so that each version of the framework is still available after 10 years.

Design ideas

"Technical Convergence":

Technical convergence is especially important to the team, and it contains two meanings:

technology stack convergence
Dependency Convergence

It is hoped that after relying on Umi, developers do not need to care about babel, webpack, postcss, react, react-router and other dependencies, and after relying on it, they @umijs/max do not need to care about the dependencies and technology stacks of development projects.

"Plugins and Plugin Sets":

Umi meets the needs of different scenarios and businesses by providing a mechanism for plug-ins and plug-in sets. A plug-in is to extend a function, and a set of plug-ins is to extend a type of business. For example, to support vue, we can have it @umijs/preset-vue, including vue-related builds and runtimes; for example, to support h5 application types, we can have it @umijs/preset-h5, and integrate h5-related functions together.

chart

Graph

First, import the statistical chart package:

pnpm install @ant-design/plots

Write code to get data:

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);
      });
  };
};

In this way, we get the data and save the content of the data JSON object to data. Each data object looks like:

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

Display the data on a graph:

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

const DemoLine: React.FC = () => {
  // fetch data

  const config = {
    data,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      // type: 'timeCat',
      tickCount: 5,
    },
    smooth: true,
  };

  return <Line {...config} />;
};

Among them, the Date attribute of the data in data will be used as the X coordinate of the graph, and the scales attribute will be used as the Y coordinate of the graph.

Get started quickly

Environmental preparation

Install node and make sure the node version is 14 or above.

create project

$ mkdir myapp && cd myapp

Create a project with NPM

$ 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 using create-umi to create a project, the available parameters are as follows:

no-git creates the project, but does not initialize Git
no-install creates the project, but does not automatically install dependencies

Startup project

Execute the pnpm dev command

$ pnpm dev
        ╔═════════════════════════════════════════════════════╗
        ║ App listening at:                                   ║
        ║  >   Local: https://127.0.0.1:8001                  ║
ready - ║  > 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)

When opened in a browser http://localhost:8000/:

open source address

GitHub: https://github.com/umijs/umi

Project homepage: https://umijs.org/

------

We have created a high-quality technical exchange group. When you are with excellent people, you will become excellent yourself. Hurry up and click to join the group and enjoy the joy of growing together. In addition, if you want to change jobs recently, I spent 2 weeks a year ago collecting a wave of face-to-face experience from big factories. If you plan to change jobs after the festival, you can click here to claim it !

Ali open source: plug-in front-end framework, supporting various functional extensions and business needs