Umi es el marco front-end subyacente de Ant Group, y ha servido directa o indirectamente a más de 10 000 aplicaciones, incluidas Java, Node, H5 wireless, aplicaciones fuera de línea (híbridas), aplicaciones de activos front-end puros, aplicaciones CMS, aplicaciones Electron, Serverless aplicaciones, etc

introducir

Umi, que se pronuncia "乌米" en chino, es un marco de aplicaciones front-end de nivel empresarial escalable. Umi se basa en el enrutamiento y admite el enrutamiento de configuración y el enrutamiento convencional al mismo tiempo, para garantizar que las funciones de enrutamiento estén completas y para expandir las funciones. Luego, está equipado con un sistema de plug-in con un ciclo de vida completo, que cubre cada ciclo de vida desde el código fuente hasta los productos de construcción, y admite varias extensiones de funciones y necesidades comerciales.

principales características

Listo para usar : enrutamiento incorporado, compilación, implementación, prueba, Lint, etc., solo necesita una dependencia de Umi para comenzar a desarrollar.
Nivel empresarial : Ant Group tiene más de 10 000 aplicaciones para elegir. Al mismo tiempo, también tiene una gran cantidad de aplicaciones en empresas como Ali, Byte, Tencent, Netease, Meituan y Kuaishou.
Mejores prácticas : mejores prácticas para micro frontends integrados, flujo de datos, permisos, internacionalización, esquemas de íconos, puntos ocultos, antd, solicitudes, esquemas CSS, gráficos, etc.
Extensible : Umi se da cuenta del ciclo de vida completo del desarrollo de aplicaciones web y lo convierte en complemento, incluidas las funciones internas de Umi, todas se realizan mediante complementos.
Enrutamiento completo : basado en React Router 6, similar a Remix, admite anidamiento, dinámico, dinámico opcional, precarga, optimización de solicitudes basadas en rutas, etc.
Rápido por defecto : MFSU resuelve el problema de compilación lenta de Webpack, problemas de rendimiento de descompresión, configuración y prueba a través de esbuild y tiempo de ejecución...
Motores de compilación duales : Proporcione a Vite y Webpack dos modos de compilación para que los desarrolladores elijan y asegure la consistencia de sus funciones tanto como sea posible.
Preempaquetado de dependencias : Umi empaqueta previamente las dependencias, bloquea completamente las dependencias y las actualiza regularmente para que cada versión del marco aún esté disponible después de 10 años.

Ideas de diseño

"Convergencia Técnica":

La convergencia técnica es especialmente importante para el equipo y tiene dos significados:

convergencia de pila de tecnología
Convergencia de dependencia

Se espera que después de confiar en Umi, los desarrolladores no tengan que preocuparse por babel, webpack, postcss, react, react-router y otras dependencias, y después de confiar en él, no tendrán que preocuparse por las dependencias y pilas de tecnología @umijs/max de proyectos de desarrollo.

"Complementos y conjuntos de complementos":

Umi satisface las necesidades de diferentes escenarios y empresas al proporcionar un mecanismo para complementos y conjuntos de complementos. Un complemento es para ampliar una función, y un conjunto de complementos es para ampliar un tipo de negocio. Por ejemplo, para admitir vue, podemos tenerlo @umijs/preset-vue, incluidas compilaciones y tiempos de ejecución relacionados con vue; por ejemplo, para admitir tipos de aplicaciones h5, podemos tenerlo @umijs/preset-h5e integrar funciones relacionadas con h5 juntas.

cuadro

Grafico

Primero, importe el paquete de gráficos estadísticos:

pnpm install @ant-design/plots

Escribir código para obtener datos:

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

De esta forma, obtenemos los datos y guardamos el contenido del objeto JSON de datos en datos. Cada objeto de datos se parece a:

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

Muestre los datos en un gráfico:

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

Entre ellos, el atributo Fecha de los datos en datos se usará como la coordenada X del gráfico, y el atributo escalas se usará como la coordenada Y del gráfico.

Comience rápidamente

Preparación ambiental

Instale el nodo y asegúrese de que la versión del nodo sea 14 o superior.

crear proyecto

$ mkdir myapp && cd myapp

Crear un proyecto con 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

opciones de parámetros

Al usar create-umi para crear un proyecto, los parámetros disponibles son los siguientes:

no-git crea el proyecto, pero no inicializa Git
no-install crea el proyecto, pero no instala automáticamente las dependencias

Proyecto de inicio

Ejecute el comando pnpm dev

$ 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)

Cuando se abre en un navegador http://localhost:8000/:

dirección de fuente abierta

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

Página de inicio del proyecto: https://umijs.org/

------

Hemos creado un grupo de intercambio técnico de alta calidad. Cuando estés con personas excelentes, tú mismo te convertirás en excelente. Date prisa y haz clic para unirte al grupo y disfrutar de la alegría de crecer juntos. Además, si quieres cambiar de trabajo recientemente, pasé 2 semanas al año recopilando una ola de experiencia cara a cara de grandes fábricas. Si planeas cambiar de trabajo después del festival, ¡puedes hacer clic aquí para reclamarlo !

Lectura recomendada

··································

Hola soy DD programador, llevo 10 años desarrollando driver veterano, MVP de Alibaba Cloud, TVP de Tencent Cloud. Desde desarrollo general hasta arquitecto y socio. En el camino, mi sentimiento más profundo es que debemos seguir aprendiendo y prestar atención a la frontera. Siempre que pueda perseverar, pensar más, quejarse menos y trabajar duro, ¡será fácil adelantar en las curvas! Así que no me preguntes si es demasiado tarde para hacer lo que hago ahora. Si eres optimista sobre algo, debes perseverar para ver esperanza, no perseverar solo cuando veas esperanza. Créeme, mientras te apegues a ello, ¡serás mejor que ahora! Si aún no tiene una dirección, puede seguirme primero y, a menudo, compartiré información de vanguardia aquí para ayudarlo a acumular capital para tomar curvas y adelantar.

Ali open source: marco frontal de complemento, que admite varias extensiones funcionales y necesidades comerciales