Aplicar estilo a las aplicaciones con Ant.Design

Ant (GitHub) es mucho más que un kit React UI con una estética de diseño minimalista y cada componente bajo el sol. Es una madriguera de conejo que conduce a un laberinto gigante de bibliotecas interconectadas, con un grave ecosistema que lo rodea. Existe una herramienta de compilación personalizada basada en Webpack llamada ant-tool, varias aplicaciones CLI, andamios comunitarios y un marco completo (dva, que también tiene su propia CLI). Y los componentes de la interfaz de usuario son mini proyectos en sí mismos; consulte este repositorio para obtener información sobre cada componente.

Muchas de estas bibliotecas parecen estar muy pulidas, incluida una biblioteca de animación React completa. Y me encantaría saber más sobre ellos, pero Ant viene con un desafío: la mayoría de la documentación está en chino.

¿Cómo está tu chino?

Permítanme presentar esto señalando que la biblioteca de componentes y su excelente guía de estilo han sido traducidos al inglés por generosos voluntarios, por lo que el kit de interfaz de usuario es completamente utilizable. Y el esfuerzo de traducción demuestra las intenciones del proyecto de abrir Ant a un público más amplio, lo que se adapta bien a las empresas que están considerando adoptarlo.

Sin embargo, hay algunos problemas de idioma que persisten. El inglés a veces es confuso u oscuro. El responsable de mantenimiento de la biblioteca ha comentado aquí que agradecen a los RP por mejorar la documentación, por lo que podría ser una excelente manera de involucrarse en este increíble proyecto.

¡Buena suerte en la búsqueda de problemas!

Otro problema es que los problemas en Ant.Design se archivan y debaten principalmente en GitHub en chino. Esto podría ser un factor decisivo para las aplicaciones empresariales, pero no estoy seguro de que deba serlo para las primeras empresas, ya que Ant puede usarse de manera bastante mínima, sin utilizar funciones más inteligentes como la validación de formularios incorporada. Aún así, si encuentra un problema o error con la biblioteca, será difícil investigar soluciones anteriores a su problema, y ​​es por eso que recomiendo hacer un uso mínimo del ecosistema circundante en esta etapa.

Batalla probada

Las bibliotecas de IU populares para React incluyen Material-UI, Semantic-UI, Foundation y Bootstrap (esto y esto), y todas son bastante maduras. La interfaz de usuario de material debe destacarse, ya que eclipsa masivamente a los demás en popularidad, con más de 22 mil observadores de estrellas y más de 600 números abiertos. Pero resulta que Ant.Design es un candidato sorprendentemente digno también. Está probado en batalla por algunos de los sitios más populares de la web (Alibaba, Baidu), y cuenta con una guía de estilo brillante, herramientas personalizadas y, por supuesto, un completo catálogo de componentes. También tiene solo 85 problemas abiertos al momento de escribir, lo cual es bueno teniendo en cuenta su popularidad.

Así que recorramos la biblioteca, veamos qué tiene para ofrecer y cómo comenzar a usarla.

Componentes de hormigas

La lista de componentes de Ant es vertiginosa. Claro, contiene los conceptos básicos: modales, formularios (en línea y verticales), menús de navegación, un sistema de cuadrícula. Pero también contiene una tonelada de extras, como un sistema de @mencionamiento, una línea de tiempo, insignias, un sistema de mesa realmente agradable y otras características pequeñas y elegantes, como un cuadro de dirección involucrado (ver el campo Residencia habitual). Eche un vistazo: tiene todo lo que una aplicación web moderna debería tener, con una estética elegante y minimalista.

Criterios de diseño

Hay una sección agradable y concisa en la documentación sobre los principios rectores de Ant.Design. Me pareció una gran lectura ya que me hizo pensar mucho en las consideraciones de UI / UX, especialmente en la sección "Proporcionar una invitación", donde discuten diferentes formas de hacer que las interacciones sean descubiertas por un usuario. Por cierto, si alguien me puede recomendar un buen libro sobre UX, estaría agradecido.

Sistema de red

El sistema de diseño Ant se compone de una alícuota de 24 partes (una gran palabra nueva que aprendí de la documentación traducida - significa partes de un todo) y un componente de Diseño separado que puede elegir usar. La cuadrícula utiliza el conocido sistema Row / Col, pero también puede especificar un accesorio llamado flex que le permite aprovechar las propiedades de Flexbox para definir una interfaz de usuario receptiva. (Consulte una publicación anterior en mi blog para obtener ayuda sobre el estándar Flex).

Flexbox ahora es totalmente compatible con casi todos los navegadores (con soporte parcial en IE 11, así como en algunos navegadores móviles más antiguos), por lo que debería estar bien usarlo. Si su base de clientes es en gran medida usuarios de Internet Explorer, lo que sucede en algunas industrias o países, sería prudente abstenerse de utilizar Filas flexibles o el componente Diseño, ya que el Diseño se basa estrictamente en Flexbox.

El diseño incluye componentes para un Sider, Encabezado, Contenido y Pie de página. Una vez más, estos se basan estrictamente en Flexbox, por lo que no hay otra opción aquí, pero para ser honesto, no estoy seguro de lo que estos componentes le brindan además del uso del sistema de cuadrícula Row / Col estándar, aparte de un par de accesorios adicionales que puede hacer uso y posiblemente algunas opciones de diseño incorporadas. En general, no me parece muy útil.

Atrezzo de rejilla

Los elementos Col se pueden suministrar con un puntal de expansión para definir cuántas partes alícuotas ocupa una columna y un puntal de compensación para definir una compensación opcional; Row puede usar un accesorio de canal para definir el espacio entre columnas en una fila (en píxeles, no partes alícuotas).

Aquí hay un ejemplo de UI de un proyecto paralelo mío. Contiene una fila con dos columnas:

El código se vería así:

Formas

Ant no te defrauda en lo que respecta a los formularios, con opciones para formularios en línea, horizontales y verticales, cuadros de selección increíbles y mensajes e iconos de validación claros. De hecho, se va un poco por la borda aquí. Le permite envolver todo su componente de representación de formularios en un componente de orden superior à la Form.create () () para obtener acceso a una sintaxis de validación incorporada y un sistema de enlace bidireccional personalizado (cue morderse los labios audible). A continuación, puede especificar reglas estándar como "obligatorio" o proporcionar métodos de validación personalizados. (¿Qué son los componentes de orden superior? Mira esta excelente publicación de James K. Nelson).

¿Necesitas usar su HOC? Absolutamente no, y no estoy seguro de que debas hacerlo. Como dije anteriormente, seguir ese camino podría exponerlo al riesgo del idioma si encuentra errores y no entiendo por qué querría usar un sistema de datos de enlace bidireccional personalizado de todos modos. Pero podría usar fácilmente el HOC y simplemente no usar el enlace de datos bidireccional.

Au Naturel - Formularios de reacción simple

Así que veamos cómo usar los mensajes de validación de Ant sin usar su componente de orden superior.

Ant nos proporciona tres accesorios que podemos suministrar a cada componente de Form.Item para mostrar mensajes o iconos de validación:

  1. validateStatus: determina el esquema de color e ícono del mensaje de validación (ver foto arriba): las opciones válidas son éxito, advertencia, error y validación.
  2. ayuda: el mensaje de validación para mostrar.
  3. hasFeedback: este es uno de los accesorios que no requieren un valor. Solo incluya si desea mostrar el icono asociado y su valor predeterminado es verdadero.
Validaciones más bonitas que he visto.

Aquí hay un ejemplo de un elemento de formulario simple que muestra un mensaje de validación:

Observe que utilicé el nombre de componente Form.Item de formato largo. Puede hacerse un atajo para este y cualquier otro subcomponente Ant de la siguiente manera:

const FormItem = Form.Item;
// .. te permite usar:

Validación de formulario utilizando el componente Ant de orden superior

¿Y si queremos usar el decorador Ant Form? Es bastante sencillo de implementar. Cree su clase de componente React y luego páselo como argumento a Form.create (). El componente se puede exportar a continuación:

La clase SomeComponent extiende React.Component {
  render () {}
}
FancyFormComponent = Form.create () (SomeComponent);
export {FancyFormComponent como predeterminado}; // importado como SomeComponent

Dentro de su formulario, decore sus campos de entrada usando el método getFieldDecorater, que expone una tonelada de accesorios adicionales en su componente. Ahora puede manipular elementos de formulario directamente desde los accesorios (¡eek!).

Este ejemplo en la documentación ofrece una demostración exhaustiva sobre el uso del componente completo de orden superior.

Componentes interactivos - Mensaje (alerta)

Ant proporciona una serie de otros componentes que dan a las aplicaciones web un alto grado de interactividad. Un gran ejemplo son las alertas, o mensajes, como se llaman en Ant. Agregar una alerta es tan simple como llamar a message.success ('¡Genial! El elemento se ha guardado') en su componente. Los tipos de mensajes incluyen éxito, advertencia o error. Simplemente no olvide importar el mensaje (en minúsculas) de "antd".

El minimalismo en su mejor momento

Instalación de Ant.Design

Como mencioné anteriormente, puede acceder al ecosistema Ant (con su adaptador Webpack personalizado) u optar por el marco de diseño. Fui con este último y sospecho que tú también podrías, sobre todo porque usar otras partes del ecosistema podría requerir un conocimiento práctico del chino. Pero cubriré ambas opciones.

Opción 1: usar la CLI

Ant viene con antd-init, una CLI para generar una aplicación React completa con Ant instalado. No recomiendo esta ruta para personas que no hablan chino, pero si quieres probarla, comenzar es fácil. Simplemente instale la CLI usando npm, cree una nueva carpeta y ejecute antd-init:

npm install antd-init -g; aplicación de demostración mkdir; cd $ _; antd-init;

Luego será recibido por el siguiente mensaje:

antd-init @ 2 es solo para experiencia antd. Si desea crear proyectos, es mejor iniciar con dva-cli. dva es un marco de aplicación basado en redux y react. concepto de olmo, efectos secundarios de soporte, hmr, carga dinámica, etc.

Es la madriguera de un conejo. Abra su nueva aplicación y verá que su familiar archivo webpack.config.js ya no le es familiar: la CLI utiliza la herramienta ant, una "Herramienta de compilación basada en Webpack" que mencioné anteriormente. La documentación está en chino, pero parece establecer valores predeterminados comunes para Webpack y luego le permite simplemente proporcionar valores que desea anular. Así es como se ve el archivo de configuración:

// Obtenga más información sobre cómo configurar.
// - https://github.com/ant-tool/atool-build# 配置 扩展
module.exports = function (webpackConfig) {
 webpackConfig.babel.plugins.push ("transform-runtime");
 webpackConfig.babel.plugins.push ([‘import’, {
 libraryName: "antd",
 estilo: "css",
 }]);
 volver webpackConfig;
};

El index.js contiene una página de demostración encantadora que utiliza el estilo sencillo de Ant.

Opción 2: usar paquete web estándar

Esta sería mi ruta preferida, pero al principio puede ser más complicado configurar correctamente su Webpack. La página de inicio incluye algunas buenas instrucciones. Primero instala Ant en tu aplicación React:

$ npm install antd --save

Ant recomienda usar su propio babel-plugin-import en su .babelrc:

"presets": [
    "reaccionar",
    ...
  ],
  "plugins": ["transform-decorators-legacy", ..., ["import", [{libraryName: "antd", estilo: "css"}]]
  ]
}

Asegúrese de que su Webpack incluya cargadores para archivos .js y .css, y que esté listo para comenzar. Para usar un componente Ant, impórtelo en el archivo del módulo. P.ej.

importar {Row, Col, Icon, Button} desde 'antd';

Conclusión

No hay duda de que Ant tiene mucho que ofrecer como marco de UI, con un catálogo formidable de componentes y un ecosistema serio a su alrededor. Sin embargo, conlleva cierto riesgo. Si experimenta un problema con la biblioteca, es posible que no pueda comunicarse en chino. En última instancia, recomiendo probarlo si le gusta la estética minimalista, manteniendo al mínimo el uso del ecosistema periférico Ant.