Tablero hermoso y poderoso: Ant Design Pro 2.0 lanzado y presenta Umi

Después del lanzamiento de 1.0, Ant Design Pro ha recibido mucha atención y adopción en la industria. La cantidad de estrellas en GitHub se ha incrementado hasta 11,686 y cientos de aplicaciones intermedias y de back-end impulsadas por Ant Design Pro también han aterrizado dentro de Ant Financial.

El desarrollo de 2.0 ha estado en progreso durante los últimos 8 meses. Con la ayuda de 38 colaboradores increíbles, juntos obtuvimos 600 confirmaciones, muchas características nuevas y una actualización general de la arquitectura. Ahora, anunciamos con orgullo Ant Design Pro 2.0. Específicamente, trajimos cuatro páginas nuevas, diseños múltiples para enriquecer los escenarios de uso. Actualizamos nuestro andamio de roadhog a umi2, y agregamos un cajón de configuración genial. Ven y mira nuestro proyecto aquí:

  • Página de inicio: http://pro.ant.design/
  • Vista previa del tablero: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Nuevas páginas

Como la especificación de diseño web más influyente del Distrito XiHu, una página elegante, hermosa y bien diseñada siempre ha sido nuestra mayor ventaja. En V2, también trajimos una serie de actualizaciones y optimizaciones de página, que incluyen:

  • Modal paso a paso
  • Entrada de información modal
  • Centro personal
  • Configuraciones personales

Nuevo diseño y tema

En V2, tenemos una variedad de diseños incorporados. Puede combinar una variedad de páginas para satisfacer sus necesidades con una configuración simple. Siempre habrá uno que te guste. Para que sea más fácil para todos ver los resultados más rápido, desarrollamos un cajón de configuración genial para cambiar de tema con solo unos pocos cambios. Después de confirmar con los estilos deseados, puede copiar el código de configuración y establecerlos como predeterminados. ¡Cambiar de tema nunca fue tan fácil! Más importante aún, todo el proceso está en línea y nunca necesita reiniciar el proceso de andamiaje. ¡Solo relájate y disfruta de un cambio de tema fácil e inmediato!

Andamios con umi

umi se basa en el enrutamiento, admite el enrutamiento convencional similar a next.js y varias funciones avanzadas de enrutamiento, como la carga a pedido de nivel de enrutamiento. Luego, con un sistema completo de complementos, que cubre cada ciclo de vida desde el código fuente hasta la creación del producto, umi puede soportar varias extensiones funcionales y necesidades comerciales, actualmente umi tiene casi 50 complementos tanto en la comunidad como dentro de la empresa.

umi es el marco básico front-end de Ant Financial, y ha servido cientos o miles de aplicaciones directa o indirectamente, incluyendo java, nodo, aplicación móvil, aplicación híbrida, aplicación de activos front-end pura, aplicación CMS y más. umi ha servido muy bien a nuestros usuarios internos y espera que él también pueda servir bien a los usuarios externos.

Tiene las siguientes características:

  • Fuera de la caja , reacción incorporada 、 enrutador reactivo, etc.
  • Next.js like y convenciones de enrutamiento con todas las funciones, también admiten enrutamiento configurado
  • Completo sistema de complementos, que cubre cada ciclo de vida desde el código fuente hasta la producción
  • Alto rendimiento, soporte PWA, división de código de nivel de ruta, etc. a través de un complemento
  • Admite la exportación estática, se adapta a varios entornos, como la aplicación de consola, la aplicación móvil, el huevo, la billetera Alipay, etc.
  • Inicio rápido de desarrollo, soporte para dll y hard-source-webpack-plugin con config
  • IE9 compatible, basado en umi-plugin-polyfills
  • Admite TypeScript, incluida la definición d.ts y la prueba umi
  • Integration Integración profunda con dva, directorio de pato de soporte, carga automática de modelo, división de código, etc.

Soporte de carga bajo demanda

La carga a pedido se vuelve súper fácil en V2. Simplemente haga la siguiente configuración en babel-plugin-import:

{
    libraryName: 'ant-design-pro',
    libraryDirectory: 'lib',
    estilo: verdadero
    camel2DashComponentName: falso,
  }

Puede usar componentes Ant Design Pro como antd, y le recomendamos encarecidamente que use este método para reducir significativamente el tamaño de su paquete.

importar {Resultado} de 'ant-design-pro';
ReactDOM.render (, mountNode);

Mejores prácticas de internacionalización

V2 proporciona las mejores prácticas de internacionalización basadas en umi-plugin-locale. ¡Solo necesita colocar el archivo js correspondiente (como en-US.js / zh-CN.js) en src / locales, y las capacidades relacionadas con la internacionalización estarán disponibles en el código!

importar {
  formatMessage,
  setLocale,
  getLocale,
  Mensaje con formato,
} de 'umi / locale';
export default () => {
  return 
}

¿Qué sigue?

En el futuro, prestaremos más atención al rendimiento y la facilidad de uso de Ant Design Pro. Y con la ayuda de umi, trataremos de explorar un poco en la materialización de componentes. Además, continuaremos mejorando la documentación para reducir el costo de uso. Mejor aspecto y facilidad de uso ha sido y siempre será nuestra dirección y seguiremos luchando por ello.

Un agradecimiento especial

¡Gracias a todos los contribuyentes que presentaron errores, abrieron relaciones públicas, respondieron a problemas, escribieron documentación y más! Un agradecimiento especial a los siguientes socios de la comunidad @ yoyo837 @xiaohuoni @zhangxiuling @kaoding, y definitivamente a los 38 contribuyentes que han abierto relaciones públicas para V2. Su participación ha hecho que la versión pro V2 sea una realidad.

Si encuentra algún problema al usar Ant Design Pro V2, no dude en presentar un nuevo problema en GitHub.

Gracias por tu tiempo. Agarrarlo e instalarlo, ¡pruébalo!

Por fin

Otra cosa que vale la pena mencionar, nuestro equipo está trabajando en un nombre de producto de Knowledge Collaboration 『语 雀』 (significa que el pájaro alondra puede hablar), también publicamos este artículo y la versión en chino. El producto aún está en versión beta y no es bueno para los usuarios de inglés ahora, en el que estamos trabajando duro para mejorar.