Tailwind vs Material UI vs Styled Components vs React Bootstrap
Cuando se trata de Frameworks de UI, hay posiblemente cientos. En este artículo, compararé los que considero los más populares — basándome en los siguientes criterios:
- Facilidad de desarrollo — fácil de escribir, fácil de leer, rápido de cambiar
- Rendimiento — Velocidad de renderizado
- Tamaño de compilación
- Facilidad de aprendizaje
¡Vamos a ello entonces!
TailwindCSS
Tailwind es una librería de clases de utilidad que expone un amplio rango de clases fáciles de usar que te permiten manipular propiedades CSS comunes. Cuando encadenas estas clases, obtenemos el estilo deseado.
Facilidad de desarrollo: En términos de facilidad de desarrollo, ¡me encanta Tailwind! Escribes tus nombres de clase justo donde necesitas los estilos, no necesitas ir a otro archivo (como con CSS) o incluso a otro punto en el mismo archivo (como con JSS) para ver los estilos en acción. Esto ofrece una experiencia de desarrollador fantástica. En algunos casos, es posible que realmente quieras crear una hoja de estilos — por ejemplo, estilos de variantes para un botón. En este caso, simplemente podemos crear una hoja de estilos y usar la directiva de tema para hacer uso de las variables de tema de tailwind y crear estilos consistentes. Aunque, algunas personas pueden encontrar molesto leer la larga lista de clases encadenadas dentro de su marcado — personalmente lo encuentro muy conveniente.
Rendimiento: La velocidad de renderizado es aproximadamente la misma que HTML y CSS nativos, ya que estas son solo clases en una hoja de estilos.
Tamaño de compilación: Para proporcionar clases de utilidad para toda la variedad de casos de uso que encontramos durante el desarrollo, por supuesto, el tamaño de estas librerías debe ser grande. Sin embargo, el uso de librerías como PurgeCSS ayuda a eliminar todas las clases no utilizadas de la compilación final. Tailwind tiene una opción integrada para hacer esto. Por lo tanto, terminamos con un tamaño de compilación que probablemente es muy cercano al uso de clases css nativas.
Facilidad de aprendizaje: Inicialmente puede tomar algo de tiempo acostumbrarse a los nombres de clase para los diferentes atributos. Sin embargo, son bastante intuitivos y fáciles de recordar. Calificaría a Tailwind como muy fácil de aprender.
Tailwind es un favorito personal por 2 razones — 1. sus estilos por defecto se ven increíbles — elegantes y limpios 1. su rango de clases de utilidad es enorme y cubre casi todos los casos de uso comunes de manera efectiva. Estas son las razones por las que elegiría Tailwind sobre otras librerías de clases de utilidad como Bootstrap.
MUI
MUI es un kit de UI que proporciona un marco de temas, marco de estilos y componentes comunes — todos inmediatamente disponibles para usar.
Facilidad de desarrollo: Trabajar con MUI es muy bueno ya que no tienes que escribir mucho del código requerido para funcionalidades comunes como modales, acordeones, desplegables de selección, menús, etc. Sin embargo, MUI es terrible cuando se trata de personalizar estos componentes pre-estilizados. Incluso agregar estilos a componentes regulares es un poco feo de leer debido a JSS. Además, si necesitas usar algunos componentes externos, son muy difíciles de personalizar para que coincidan con la apariencia de MUI.
Rendimiento: MUI es probablemente el más lento en renderizado. Una vez tuve un desplegable con 1000 entradas, y MUI no pudo cargarlo sin al menos un retraso de 1 segundo. Tienen algunos estilos pesados para efectos de desplazamiento, efectos de onda y sombras que lo hacen computacionalmente intensivo.
Tamaño de compilación: El tamaño de compilación de MUI es bastante grande en comparación con otros marcos de UI. Esto se puede manejar usando importaciones de segundo nivel siempre que se importe desde MUI.
Facilidad de aprendizaje: MUI tiene documentación muy compleja con una gran cantidad de opciones para personalizaciones. Esto lo hace muy difícil de aprender. El sistema de estilos también es algo diferente de las opciones generales disponibles. Por lo tanto, acostumbrarse a él lleva tiempo.
MUI se ve bien por defecto. Es una opción muy buena para usar — SOLO SI tu diseño hace uso de sus estilos predeterminados. Sería bueno confirmar de antemano que tienen todos los componentes que necesitas usar. Sin embargo, si tienes un tema personalizado que necesitas desarrollar — esta es la peor opción. Es pesado en renderizado y muy difícil de personalizar. Te iría mejor usando cualquier otra cosa.
Styled Components
Styled components usan CSS en JS para permitirte estilar componentes y pasar props que también afecten el estilo.
Facilidad de desarrollo: Styled components usan CSS en JS. En términos de facilidad de desarrollo, creo que es probablemente el peor. Entonces, mientras escribes el CSS, obviamente necesitas un linter — style lint — para permitir el análisis dentro de un archivo JS. Cualquier lógica que implique props es verbose de escribir ya que necesita ser agregada como una función en cada sitio de interpolación. El único beneficio potencial es que en comparación con CSS regular, es más fácil navegar a un componente estilizado que a una clase en una hoja de estilos. Crear un componente estilizado para cada cambio menor que necesites es definitivamente muy frustrante en comparación con usar algo como Tailwind o Bootstrap.
Rendimiento: Styled components tienen una sobrecarga ligera sobre CSS regular. Sin embargo, esto es bastante mínimo.
Tamaño de compilación: Aquí nuevamente, hay una sobrecarga ligera sobre CSS regular, pero muy mínima. De hecho, en algunos casos donde no hay demasiado estilo, usar styled-components podría ayudarte a tener un tamaño de compilación más pequeño que librerías de clases de utilidad como Tailwind.
Facilidad de aprendizaje: Styled components son bastante fáciles de aprender ya que usan solo algo de sintaxis adicional e interpolación JS sobre CSS regular.
Styled-components como un marco independiente me parece un poco sin sentido. Sin ventaja significativa sobre SCSS y más desorden creado por cada componente estilizado para cada cambio de estilo individual, aconsejaría en contra usarlo. En todos los casos, para mí, simplemente parece agregar sobrecarga. Puedo estar equivocado ya que solo los he usado un par de veces en proyectos. Pero mi experiencia usándolos siempre ha terminado con la pregunta — ¿por qué existe esto?
React Bootstrap
React bootstrap es una librería de componentes construida sobre la librería de clases de utilidad — Bootstrap. Proporciona un equilibrio entre Tailwind y Material UI, donde obtenemos las clases de utilidad de Bootstrap y los componentes listos para usar de React Bootstrap
Facilidad de desarrollo: React bootstrap tiene componentes fáciles de usar para que no tengas que escribir tu propia lógica para componentes comúnmente utilizados como selects, modales, etc. También es fácil personalizar estos componentes usando clases de utilidad y variables de tema. Además, porque tienen clases de utilidad comunes, también se vuelve fácil estilar componentes importados de otras librerías para que coincidan con la apariencia de React Bootstrap.
Rendimiento: Los componentes de React bootstrap tienen casi ninguna sobrecarga sobre usar CSS regular. Su rendimiento es muy cercano al uso de CSS regular.
Tamaño de compilación: Los componentes de React bootstrap, si se importan y empaquetan correctamente, tendrán muy poco impacto en el tamaño de compilación.
Facilidad de aprendizaje: Los componentes de React bootstrap son simples, bien documentados y fáciles de implementar. Las clases de bootstrap son similares a Tailwind y son fáciles de acostumbrarse.
React bootstrap es un equilibrio muy bueno entre rendimiento y amabilidad para el desarrollador. No tienes que escribir código que se usa en componentes comunes, obtienes personalizaciones fáciles con clases de utilidad de Bootstrap, y el rendimiento es cercano a nativo. No tiene un rango tan amplio de clases de utilidad como Tailwind, pero sí te permite agregar todos los estilos y variables que necesitas para crear funcionalidad similar. Esto para mí, se siente como un punto dulce.
Conclusión
Como todo en tecnología, qué marco de UI elijas dependerá de tu caso de uso.
Si necesitas un prototipo rápido — te iría mejor elegir una librería de componentes. Entre MUI, Bootstrap y otros — puedes elegir basándote en consideraciones como la apariencia/sensación predeterminada, rendimiento de renderizado y capacidad de personalización. MUI es pesado en rendimiento y difícil de personalizar, pero si te gusta cómo se ve y no tienes elementos de UI particularmente pesados, es una opción excelente.
Si quieres crear componentes personalizados, te iría mejor con TailwindCSS o React Bootstrap — donde los utilitarios CSS hacen muy fácil inyectar los estilos que deseas. Mi elección personal sería Tailwind — aunque no tiene una librería de componentes de código abierto como React Bootstrap, simplemente me encanta sus estilos predeterminados y la naturaleza exhaustiva de las clases proporcionadas por ellos.
Si necesitas componentes personalizados pero no te gusta el encadenamiento largo de className como en TailwindCSS — podrías ir por Styled Components. Te permiten escribir tus estilos en JS, lo cual es más fácil de navegar en comparación con CSS regular. Personalmente, este es mi menos favorito de todos los marcos, pero algunas personas realmente lo prefieren. Esto se basa puramente en consideraciones de experiencia de desarrollador.
¿Qué marco de UI te encanta usar? ¡Me encantaría saberlo!
