Descripción general de la biblioteca de componentes de la interfaz de usuario en 2023, ¡que florezcan cien flores!

16833200:

La biblioteca de componentes de la interfaz de usuario proporciona una variedad de elementos de la interfaz de usuario comunes, como botones, cuadros de entrada, menús, etc. Solo necesita llamar a los componentes correspondientes y configurarlos según sus necesidades, y podrá crear rápidamente una interfaz de usuario completamente funcional.

Aunque hay muchas bibliotecas de componentes de interfaz de usuario diferentes en el mercado para elegir, a finales de 2023 no habrá una o dos soluciones claras que puedan aplicarse a todas las situaciones. Debido a que los diferentes marcos de front-end (como React, Angular, Vue, etc.) tienen sus propias ventajas y escenarios aplicables, las bibliotecas de componentes de UI correspondientes también serán diferentes.

Este artículo proporciona una breve descripción general de las soluciones de estilo del ecosistema front-end actual y presenta algunas bibliotecas de interfaz de usuario comunes y populares.

Descripción general de la biblioteca de interfaz de usuario

Marco CSS e historial de la biblioteca.

En el pasado, los diseñadores web necesitaban escribir estilos CSS a mano, lo cual era un proceso tortuoso. Posteriormente, aparecieron algunos marcos CSS, como Blueprint, 960 Grid System, YUI Grids, etc., que introdujeron cuadrículas responsivas y elementos de interfaz de usuario simples, cambiando la forma en que se hacía el diseño web.

Luego surgieron gigantes como Twitter Bootstrap, Foundation y Bulma. Ofrecen un desarrollo rápido y un estilo consistente, pero también generan algunos problemas donde los sitios comienzan a parecer demasiado similares y uniformes.

Para resolver este problema, la comunidad ha introducido algunas metodologías, como BEM, para inyectar singularidad y estilo modular para hacer que el diseño web sea más personalizado y flexible.

Con todo, los marcos y bibliotecas de CSS han evolucionado desde satisfacer inicialmente las necesidades de diseño hasta proporcionar kits de herramientas de interfaz de usuario completos. Al mismo tiempo, están surgiendo más métodos y técnicas para permitir estilos más personalizados y modulares.

Los marcos de JavaScript cambian las reglas

Con la aparición de marcos de JavaScript como Angular, React y Vue, los desarrolladores necesitan un enfoque más detallado para lidiar con estos nuevos modelos de componentes. Una de las características más importantes del CSS tradicional es la cascada, pero para estos nuevos marcos, el mecanismo de cascada ha traído algunos problemas.

Para resolver este problema, surgió una nueva solución, CSS en JS. En el ecosistema React, bibliotecas como Styled Components y Emotion se han vuelto muy populares, lo que permite a los desarrolladores asociar estilos con el alcance del componente, resolviendo así el problema en cascada.

diseño atómico

El diseño atómico es un método de diseño de componentes propuesto por Brad Frost. Su idea central es descomponer los elementos de la interfaz de usuario en diferentes niveles y tratarlos como componentes diferentes, como átomos, moléculas y organismos.

Un átomo representa el elemento más básico e irreducible, como botones, cuadros de entrada, etc. Una molécula está compuesta de múltiples átomos y representa un componente relativamente complejo, como una tarjeta con imágenes, texto y botones. Los organismos, por otro lado, están compuestos de múltiples moléculas y representan elementos de la interfaz de usuario de nivel superior, como páginas enteras o aplicaciones.

Al dividir el diseño de la UI en una jerarquía de componentes, los desarrolladores y diseñadores pueden crear y administrar UI de manera más sistemática. Este enfoque promueve la reutilización y la combinación, lo que hace que el proceso de desarrollo sea más eficiente y que la interfaz de usuario sea más fácil de mantener y ampliar.

Los marcos CSS como Tailwind CSS adoptan el concepto de diseño atómico y proporcionan una serie de clases de estilo atómico. Los desarrolladores pueden combinar estas clases de estilo según sea necesario para crear una interfaz de usuario. Este enfoque hace que la reutilización y el ajuste de estilos sean más flexibles y precisos, y puede reducir el código de estilo redundante.

¿Realmente necesitas una biblioteca de UI?

Entonces, ¿realmente necesitamos una biblioteca de componentes de interfaz de usuario? La respuesta es probablemente no.

En el desarrollo de software, a menudo depende de la situación, y el uso de la biblioteca de componentes de la interfaz de usuario también depende de la situación. Si desea poder iniciar su proyecto rápidamente sin requerir demasiada personalización, entonces usar una biblioteca de componentes de UI madura y fácil de usar es una buena opción. Pero si busca un diseño único y una apariencia totalmente personalizada, es posible que la biblioteca de componentes de la interfaz de usuario no sea para usted.

Clasificación de bibliotecas de UI

Las bibliotecas de UI se pueden dividir en los siguientes tipos:

Extensiones CSS : herramientas como Sass, Less, Tailwind y CSS Modules pueden ayudar a los desarrolladores a agregar estilos a las páginas web de forma personalizada. Proporcionan funciones CSS más potentes y flexibles, lo que permite a los desarrolladores gestionar y reutilizar estilos más fácilmente.
Bibliotecas de comportamiento/bibliotecas sin estilo : como HeadlessUI, Radix y React Aria, que se centran en implementar la lógica de comportamiento de los elementos de la interfaz de usuario sin prestar atención a sus estilos específicos. Puede utilizar estas bibliotecas para gestionar la interacción del usuario, la validación de formularios, la gestión del estado y más.
Sistemas de estilo : por ejemplo, TailwindUI y DaisyUI, que proporcionan un conjunto de plantillas de estilo y comportamiento integradas, lo que le permite crear rápidamente una interfaz de usuario con una apariencia y un comportamiento unificados. Estas plantillas de estilo se pueden seleccionar y combinar según sea necesario, lo que ahorra tiempo y esfuerzo de desarrollo.
Bibliotecas de componentes : las bibliotecas de componentes como MUI, Ant Design y Mantine son entidades independientes que proporcionan un conjunto completo de componentes de UI reutilizables, como botones, cuadros de entrada, tablas, etc. Debe aprender a utilizar estos componentes correctamente y desarrollarlos de acuerdo con su documentación y ejemplos.

imagen

¿Qué es una buena biblioteca de UI?

Las consideraciones clave para una buena biblioteca de componentes de UI son las siguientes:

Coherencia : las bibliotecas de UI deben proporcionar elementos, patrones y comportamientos de UI consistentes en toda la aplicación. Esto ayuda a los usuarios a comprender rápidamente cómo utilizar la biblioteca de UI.
Flexibilidad : manteniendo la coherencia, la biblioteca de UI también debe permitir la personalización y extensión para satisfacer las necesidades específicas de diferentes aplicaciones. Los componentes modulares y personalizables son ideales.
Rendimiento : las bibliotecas de UI deben optimizarse para el rendimiento. Factores como el tamaño del archivo, la velocidad de renderizado y la eficiencia son importantes, especialmente en dispositivos móviles.
Accesibilidad : seguir las pautas de accesibilidad web garantiza que su biblioteca de interfaz de usuario funcione para todos los usuarios. Los roles ARIA, HTML semántico y compatibilidad con teclado son algunos ejemplos.
Documentación : una buena documentación y ejemplos hacen que las bibliotecas de UI sean más fáciles de aprender e implementar. Las referencias de API, las guías de estilo y los ejemplos de código ayudan a acelerar el desarrollo.
Compatibilidad con navegador : las bibliotecas de interfaz de usuario deberían funcionar correctamente en los navegadores modernos y degradarse gradualmente en los navegadores más antiguos. El principio de mejora progresiva también se aplica a las bibliotecas de UI.
Comunidad : una comunidad activa detrás de la biblioteca de UI proporciona foros de discusión, complementos y mantenimiento continuo. Esto ayuda a garantizar la disponibilidad a largo plazo.
Intuitividad : las bibliotecas de UI deben ser coherentes con los modelos mentales y las expectativas de los usuarios. Aproveche las asignaciones naturales, la coherencia, los estándares y los patrones familiares.
Responsive : las bibliotecas de UI deben adaptarse a diferentes tamaños de pantalla y métodos de entrada. Utilice diseños fluidos y centrados en dispositivos móviles como prácticas recomendadas.

En resumen, una buena biblioteca de UI debe optimizar el rendimiento, la accesibilidad y la compatibilidad con dispositivos, manteniendo al mismo tiempo la coherencia y la flexibilidad. También son muy importantes una excelente documentación, una comunidad activa y un diseño intuitivo. La implementación de principios y heurísticas de la experiencia del usuario puede ayudar a garantizar resultados de calidad.

Biblioteca de componentes de interfaz de usuario popular

Reaccionar

Debido a su gran ecosistema y popularidad, el ecosistema React probablemente tenga la mayor cantidad de bibliotecas de interfaz de usuario.

Biblioteca de componentes

Material UI : una implementación popular basada en el diseño Material Design de Google. Ofrece una gran cantidad de componentes y opciones de temas y existe desde hace mucho tiempo, y los desarrolladores deben desarrollarlo de acuerdo con su sistema.
Ant Design : una opción de biblioteca de componentes confiable utilizada por muchas grandes empresas como Tencent, Baidu, Alibaba, etc. Admite todos los navegadores modernos, renderizado del lado del servidor, esm e incluso Electron. También se proporcionan implementaciones comunitarias para Angular, Vue y otros marcos. Utiliza CSS-in-JS, por lo que puede agregar cierta sobrecarga adicional en tiempo de ejecución y tiene su propia forma única de desarrollo.
ChakraUI : enfatiza la accesibilidad (A11y), cumple totalmente con los estándares de accesibilidad WAI-ARIA, ha ganado premios de código abierto y tiene una comunidad activa. Es una excelente opción para crear interfaces de usuario reutilizables, tiene ganchos integrados y admite muy buen modo oscuro. El equipo también desarrolló Zag.js, que maneja la interfaz de usuario como una máquina de estado. Puede llevar algún tiempo aprender su API y puede haber algunas dificultades para cambiar a otras bibliotecas.
Mantine : otra biblioteca de componentes con todas las funciones y buena accesibilidad, que proporciona más de 100 componentes y ganchos. Mantine se basa completamente en TypeScript y puede anular los estilos predeterminados. Debe aprender a utilizar sus funciones y API para lograr sus objetivos.
Blueprint : un conjunto de componentes para crear una interfaz de usuario con uso intensivo de datos en el escritorio. Es especialmente adecuado para crear herramientas internas, paneles de control y aplicaciones electrónicas. Blueprint es una de las pocas bibliotecas en esta lista que viene con un componente de selección de fechas.
NextUI : No debe confundirse con el metamarco de React Next.js, esta biblioteca está construida con Tailwind CSS. Afirma que la curva de aprendizaje es mínima. El tema se tailwind.config.jsmaneja mediante archivos, tiene buena accesibilidad y todos los componentes admiten temas oscuros. Simplemente use un nombre de clase Tailwind diferente para anular los estilos.

Sin cabeza

HeadlessUI : proporciona la funcionalidad principal necesaria para crear componentes accesibles, pero no proporciona estilos específicos. Está diseñado específicamente para funcionar con el marco CSS Tailwind, pero existen opciones para utilizar otras soluciones CSS. Su objetivo es proporcionar una forma flexible de construir y brindar a los desarrolladores control total sobre la apariencia y el estilo de los componentes.
React Aria : una biblioteca desarrollada por el equipo de Adobe, es una solución HeadlessUI completa. No sólo se ocupa del comportamiento y funcionalidad de los componentes, sino que también se centra en su accesibilidad e internacionalización. La API de la biblioteca consta principalmente de un conjunto de enlaces que se pueden utilizar para crear sus propios componentes. Aunque todavía está en la versión alfa, su objetivo es proporcionar componentes predefinidos listos para usar.
RadixUI : anteriormente una biblioteca de componentes HeadlessUI, pero recientemente agregó temas y algunos estilos. Es conocido por sus excelentes características de accesibilidad y componibilidad. Cuando se utiliza RadixUI, todos los temas se exponen a través de propiedades personalizadas de CSS, lo que significa que puede anular fácilmente los estilos predeterminados con sus propios estilos CSS. El objetivo de esta biblioteca es proporcionar una forma sencilla pero potente de crear componentes y al mismo tiempo permitir la personalización y ampliación de su apariencia.

métodos mixtos

ShadCN/UI : proporciona un enfoque de desarrollo diferente al de otras bibliotecas. En lugar de instalar componentes o bibliotecas completas a través de npm, puede copiar y pegar el código directamente en su propia base de código. La idea es dar a los desarrolladores la propiedad total del componente y su diseño e implementación por separado. Está construido con Tailwind y proporciona una herramienta CLI que puede generar código de componentes y ajustar tailwind.config.jsarchivos.
KumaUI : utiliza tecnología CSS-in-JS de tiempo de ejecución cero para crear componentes de interfaz de usuario sin cabeza, lo que proporciona mucha flexibilidad. Su diseño está inspirado en otras soluciones CSS-in-JS de tiempo de ejecución cero como PandaCSS, Vanilla Extract y Linaria, así como en Styled System, ChakraUI y Native Base.

vista

En el ecosistema Vue, la documentación de muchas bibliotecas está escrita en chino en lugar de inglés.

Biblioteca de componentes

Quasar : No se considera una biblioteca per se, sino más bien un marco. Está basado en Vue, pero la idea es que puedas usarlo para crear sitios web y aplicaciones, lo que significa que usa la CLI para generar para web, dispositivos móviles, escritorio, SPA (aplicación de una sola página), SSR (renderizado del lado del servidor), etc. Salida diferente.
Vuetify : afirma ser una biblioteca de interfaz de usuario de código abierto que no requiere habilidades de diseño y presenta componentes Vue cuidadosamente diseñados. Tiene todas las funciones como la mayoría de las bibliotecas de componentes maduras. Nuevamente, es necesario comprender la API de la biblioteca y estar "bloqueado" en su modelo de composición de componentes para poder utilizarla.
Element Plus : como se indica en el sitio web oficial, Element Plus es una "biblioteca de componentes basada en Vue 3 para diseñadores y desarrolladores". No estoy seguro de en qué se diferencia de otras bibliotecas, pero ofrece el mismo tipo de selección de componentes. Tiene más de 20.000 estrellas y más de 150.000 descargas por semana, lo que demuestra su popularidad.
VueMaterial : como sugiere el nombre, VueMaterial es la implementación de Vue de Material Design. La documentación es simple, liviana, responsiva y tiene una API fácil de usar, lo que parece ser las ventajas de una biblioteca de componentes completa.

Angular

Angular está experimentando un renacimiento y todavía hay muchas empresas que lo utilizan.

Biblioteca de componentes

Material angular : Igual que la implementación de Material de varios otros marcos. Todos afirman ser de alta calidad y versátiles.
PrimeNG : Lo bueno de esta colección es la elección de los temas básicos. Se pueden elegir opciones de diseño entre otros marcos de diseño populares, como Material Design, Bootstrap, Soho, Fluent, Nano y más. Esto se hace a través de un editor visual, que forma parte de las opciones del tema. PrimeNG también proporciona un kit de herramientas Figma UI, plantillas listas para usar y una API SASS.
NG Bootstrap : es un enlace angular con Twitter Bootstrap (4.0). Sin embargo, cabe señalar que los desarrolladores deben aprender la API de la biblioteca y dominar el uso de los nombres de clases de Bootstrap al mismo tiempo.

Esbelto

Svelte tiene muchas funciones integradas para manejar estilos y animaciones. Para los estilos, simplemente use la etiqueta en el archivo del componente styley su alcance se limitará únicamente a ese componente. Además, Svelte tiene motionmodelos para manejar animaciones de relajación y primavera, lo cual es excelente para la experiencia de desarrollo.

Componentes sin cabeza

Svelte Headless UI : Totalmente portado desde React Headless UI, compatible con SvelteKit (meta framework Svelte).

Biblioteca de componentes

SvelteUI : una biblioteca de componentes con todas las funciones escrita en TypeScript. Contiene más de 50 componentes altamente personalizables, que cubren varios elementos comunes como diseño, operación, entrada y tipografía en una biblioteca de componentes.
Smelte : un marco de interfaz de usuario basado en Svelte y Tailwind CSS, que cumple con las especificaciones de Material Design. Proporciona un complemento Rollup donde puede definir temas, colores y otros estilos. ¡Simplemente importe el CSS de la biblioteca y comience a usarlo! Esta biblioteca también proporciona algunos componentes que son menos comunes en otras bibliotecas, como selectores de fechas, cajones de navegación y vistas de árbol.

Sólido

SolidJS es un marco relativamente nuevo y existe por menos tiempo que la mayoría de los marcos mencionados anteriormente. Es una opción sólida para su próximo proyecto.

Componentes sin cabeza

Kobalte : un conjunto de herramientas de interfaz de usuario sin estilo, accesible y componible para construir bases de sistemas de diseño. Inspirado en AriaKit, RadixUI, React Araia y Zag. Según la documentación oficial, se parece mucho a la implementación de Radix. NOTA: Aún en versión beta.

Biblioteca de componentes

SUID : versión portada MUI de SolidJS. Como dice la documentación "misma API, mismo diseño", si vienes de React y has usado MUI, esto te hará sentir como en casa. Se aplican las mismas advertencias. Tienen una herramienta genial que convierte el código React en código Solid.
Solid Bootstrap : como sugiere el nombre, este es un contenedor Bootstrap sobre SolidJS. La diferencia es que necesitas usar props(por ejemplo variant) en lugar de clases para manipular la mayoría de las cosas. También existe una versión "Core", que contiene componentes implementados sin cabeza.

Rápido

Como marco más reciente para este artículo, el ecosistema Qwik es todavía muy nuevo. Así que aquí hay relativamente pocas opciones. Pero es posible aprovechar el ecosistema React para utilizar bibliotecas de componentes en aplicaciones Qwik.

Componentes sin cabeza

QwikUI : aunque todavía está en versión beta, QwikUI proporciona un conjunto sin interfaz gráfica para crear componentes totalmente compatibles con WAI-ARIA. La versión beta actual tiene cuadros desplegables, pestañas y acordeones. También desarrollaron borradores de información sobre herramientas, selectores y ventanas emergentes. El equipo también está desarrollando su propio enfoque ShadCN/UI, cuyo nombre en código es "Fluffy".

Marco cruzado

Recientemente, también se han creado algunas bibliotecas independientes utilizando cadenas de herramientas CSS:

ArkUI : proporciona componentes accesibles sin cabeza para React, Vue y SolidJS mediante máquinas de estado. Creado por los creadores de Zag.js y Chakra UI, este parece ser un buen compromiso entre los dos productos.
Flowbite : un componente construido sobre Tailwind, no solo adecuado para marcos de JavaScript como React, Qwik, Vue, Svelte, Angular y SolidJS; sino también adecuado para metamarcos populares como Astro, Next.js, Remix, Nuxt, Meteor. ; y marcos que no son JS como Laravel, Symfony, Ruby on Rails, Pheonix, Django y Flask.

Resumir

Como mencionamos anteriormente, hay muchas opciones disponibles para nosotros. Elegir la solución adecuada puede mejorar significativamente la productividad, mientras que una elección incorrecta puede generar una serie de problemas.

Por tanto, tenga cuidado a la hora de hacer su elección. Con suerte, este artículo le brindará una descripción general clara y le hará pensar seriamente si necesita utilizar una biblioteca o si vale la pena invertir el esfuerzo en desarrollar su propia solución. No se trata solo del equipo de producto, sino también de la experiencia del usuario.

Recuerde, a los usuarios no les importa qué solución utilice. Elegir una solución que se adapte a su proyecto y necesidades es lo más importante.

Referencia: https://www.builder.io/blog/25-plus-ui-component-libraries