Construyendo Componentes de IU Perfectos con Variables CSS

Muy bien, hola a todos. Gente de fiesta en la casa. Wow. Eso es mucha gente ahí fuera. Muy bien.

No estaba seguro de cómo comenzar esta charla. Estaba hablando con un amigo mío que dijo, deberías compartir tu opinión más picante. Así que en la siguiente diapositiva, voy a compartir mi opinión más controvertida en el ámbito del desarrollo web. Esto va a molestar a mucha gente en la audiencia aquí hoy, pero realmente siento que debe decirse. ¿Estás listo? Aquí va. Me encanta CSS. Eso es todo. Esa es la idea principal. Te dije que era picante, pero no estoy aquí para hacer amigos. Estoy aquí para decir la verdad.

Específicamente, lo que me emociona últimamente son las variables CSS y todas las posibilidades que nos abren como desarrolladores de UI. En MUI, estamos aprovechando el poder de las variables CSS para ofrecer una experiencia del desarrollador que genera alegría y deleite al personalizar los componentes de React. Con las variables CSS, podemos crear componentes que son conscientes de su entorno y se adaptan automáticamente para coincidir con los estilos y estructuras de sus padres e hijos. Y lo mejor de todo, todo esto sucede en CSS, no en JavaScript. No envíes JavaScript a hacer el trabajo de CSS. Y el papel de CSS se está expandiendo rápidamente. Así que para nosotros, los desarrolladores, se abren muchas nuevas posibilidades.

Pero antes de explorar algunas de esas posibilidades, necesito compartir un poco de historia aquí. MUI como empresa comenzó con Material UI, que es la implementación de React de Material Design de Google. Hoy en día hacemos mucho más que solo Material Design. Pero Material UI sigue siendo una de las bibliotecas de código abierto más populares en GitHub y tiene una historia que se remonta a los primeros días de React mismo. A lo largo de esos nueve años aproximadamente, hemos aprendido mucho sobre lo que los desarrolladores quieren y necesitan de una biblioteca de componentes. Más que cualquier otra cosa, hemos aprendido mucho sobre lo que los desarrolladores odian. Aquí tienes un ejemplo de la clase de cosas que veo en Twitter de vez en cuando. Lo entiendo.

El rey de los críticos aquí, tiene un punto válido. No está equivocado. Puede ser muy frustrante cuando intentas hacer un pequeño ajuste de dos píxeles a un componente. Y luego te das cuenta de que de repente tienes que hacer 10 ajustes más. Es frustrante. Lo entiendo. Y esa es solo una de las razones por las que estamos construyendo Joy UI, que es una nueva biblioteca hermana de Material UI que implementa nuestro propio sistema de diseño junto con algunas innovaciones de vanguardia en la experiencia del desarrollador.

Y esto es más evidente, creo, en la forma en que hemos construido Joy UI para manejar las variables CSS. Entonces, ¿qué es una variable CSS? Según MDN, las variables CSS son entidades definidas por los autores de CSS que contienen valores específicos para ser reutilizados en todo un documento. Es fácil de entender en el contexto de los colores de marca, ¿verdad? Tienes un conjunto de colores que se reutilizarán en todo el diseño. Y si necesitas cambiar uno, es mucho más simple si tienes una única fuente de verdad para no tener que buscar y reemplazar cientos de instancias del código hexadecimal incorrecto. Tener esa única fuente de verdad es muy poderoso. Y una de las cosas realmente geniales es que puedes nombrar tus variables, ¿verdad? Ayuda mucho a mantener la consistencia en tu sistema de diseño y a proteger tu código en el futuro. En lugar de tratar de averiguar por qué este texto tiene un tamaño de 1.75 rem, puedes ver que tiene este valor dinámico establecido en encabezado de texto, lo que te brinda mucha más información sobre por qué se ha aplicado ese estilo.

Y a medida que te adentras más en el tema, te das cuenta de que las variables CSS tienen algunas aplicaciones realmente interesantes en nuestros sistemas de diseño que van mucho más allá del simple branding. Aquí tienes un ejemplo de lo que está sucediendo en el componente JoyUI, el componente de entrada, que compartí hace unos pocos diapositivas atrás. Es extraño, ¿verdad? Al principio es un poco difícil acostumbrarse. Quiero decir, ¿qué está pasando aquí? Tenemos variables CSS que hacen referencia a otras variables y realizan cálculos matemáticos basados en esas variables. Y todo esto sucede en CSS, ¿verdad? Como señala Josh Como, simplemente no estamos acostumbrados a este concepto, este modelo mental de definir propiedades CSS que tienen valores dinámicos. Y las cosas se vuelven aún más extrañas cuando comienzas a hacer matemáticas con tus variables y hacer referencia a variables dentro de variables. De hecho, en el caso de JoyUI, estamos utilizando variables CSS para crear componentes que pueden adaptar automáticamente sus estilos para que coincidan con los de sus padres e hijos, ya que todos hacen referencia a esa única fuente de verdad para sus números mágicos. Entonces, está bien, suena genial, pero ¿qué diferencia realmente hace, verdad? Consideremos un componente de interruptor y observemos las diferencias en la experiencia del desarrollador entre Material UI y JoyUI. Aquí tienes algunos ejemplos de interruptores.

Estos son todos interruptores de Material UI. Interruptor, obviamente, un simple interruptor de encendido y apagado, está compuesto por una pista y un pulgar. El usuario hace clic en el pulgar para deslizarlo a través de la pista y hacer su selección. Es bastante simple en la superficie, pero puede resultar bastante molesto cuando necesitas hacer ajustes perfectos de píxeles al componente de Material UI. Por ejemplo, si necesitamos cambiar el ancho de la pista aquí, bueno, eso descoloca por completo el pulgar porque no conoce la longitud de la pista. Y si intento cambiar el tamaño del pulgar, bueno, eso también arruina su posición. Y ni siquiera me hagas empezar con los radios de borde. Si necesito ajustar las esquinas redondeadas, no es como si simplemente pudiera pasar los mismos valores a ambas partes.

No, por supuesto que no. Tengo que hacer cálculos para calcular la curvatura precisa. Y no sé ustedes, pero no me inscribí en esta línea de trabajo para hacer matemáticas. No, gracias.

En contraste, veamos el interruptor de JoyUI. Observa lo que sucede cuando hago esos mismos ajustes que mencionamos en el interruptor de Material UI. ¿Notas cómo simplemente funciona, verdad? Y todo gracias a la magia de las variables CSS.

No solo no tengo que escribir ningún JavaScript para lograr esto, sino que ni siquiera tengo que hacer los cálculos para obtener los radios de borde correctos. Simplemente sabe qué hacer. Esos valores que ves dentro de la propiedad SX, son las variables CSS que necesitas para hacer esos ajustes perfectos de píxeles. Literalmente puedes copiar y pegar este código directamente en tu componente después de personalizarlo. Tenemos playgrounds de variables CSS como este en toda la documentación de JoyUI para que sea lo más sencillo posible.

Es bastante genial, ¿verdad? Creo que ayuda a fomentar el tipo de experiencia del desarrollador que genera alegría. Y por eso lo llamamos JoyUI. Esto ha sido solo una pequeña muestra de lo que estamos haciendo con JoyUI. Pero espero que te haya emocionado sobre las posibilidades de las variables CSS al implementar sistemas de diseño personalizados. Y quiero dejarte con esta pregunta, ¿qué más es posible con las variables CSS? Creo que seguiremos viendo muchas nuevas innovaciones en este ámbito. Y no puedo esperar para ver qué crean ustedes.

Si pensaste que esas demos de componentes eran geniales, como dije, tenemos playgrounds en toda nuestra documentación. Este código QR, si quieres escanearlo, te llevará directamente al playground de variables CSS del interruptor que acabo de compartir. Así que espero que te diviertas jugando con eso. Y si te gusta JoyUI, pruébalo. Estamos a punto de lanzar una versión estable y nos encantaría recibir tus comentarios sobre cómo podemos mejorar y qué componentes deberíamos construir a continuación. Si tienes la oportunidad, por favor envíame un correo electrónico. Soy Sam Sycamore. Mi correo electrónico es SamMui.com. Puedes encontrarme en Twitter, BlueSky, etc. Estaré en el stand de MUI durante el resto de la conferencia. Ven, saluda. Eso es todo. Muchas gracias a todos. Gracias. Muchas gracias. Gracias.