Construyendo Componentes de IU Perfectos con Variables CSS

Rate this content
Bookmark

Las variables CSS se han vuelto tan sofisticadas en los últimos años que ahora nos permiten hacer cosas que no son posibles con JavaScript. En esta charla relámpago, explicaré cómo los ingenieros de MUI están aprovechando el poder de las variables CSS en nuestra nueva biblioteca de componentes de React, Joy UI, para ofrecer componentes que se adaptan automáticamente a su estilo y estructura según el contexto en el que se renderizan.

9 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Las variables CSS y sus posibilidades para los desarrolladores de IU, la historia de MUI y su comprensión de las necesidades de los desarrolladores, el enfoque de Joy UI en la experiencia del desarrollador y el uso de variables CSS para la consistencia y la futura compatibilidad, la eliminación de cálculos manuales y JavaScript con variables CSS en JoyUI, y la disponibilidad de entornos de prueba y una versión estable para explorar.

Available in English

1. Introducción a CSS y MUI

Short description:

Me encanta CSS. Eso es todo. Esa es la idea principal. Específicamente emocionado por las variables CSS y sus posibilidades para los desarrolladores de UI. MUI aprovecha las variables CSS para una experiencia del desarrollador encantadora. El papel de CSS se está expandiendo, abriendo nuevas posibilidades. Historia de MUI y comprensión de las necesidades de los desarrolladores.

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.

2. Variables CSS y Joy UI

Short description:

Puede ser frustrante cuando hacer pequeños ajustes a un componente requiere múltiples cambios. Presentamos Joy UI, una biblioteca hermana de Material UI, con un enfoque en la experiencia del desarrollador. Joy UI aprovecha las variables CSS, lo que permite tener una única fuente de verdad y variables nombradas para consistencia y protección futura. Las variables CSS tienen aplicaciones más allá del branding, permitiendo valores dinámicos y cálculos matemáticos. Joy UI utiliza variables CSS para crear componentes que se adaptan a sus padres e hijos. Comparemos Material UI y Joy UI con un componente de interruptor.

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.

3. Variables CSS y JoyUI

Short description:

Las variables CSS en JoyUI eliminan la necesidad de cálculos manuales y JavaScript. La propiedad SX contiene las variables CSS necesarias para ajustes perfectos de píxeles. JoyUI tiene como objetivo mejorar la experiencia del desarrollador y generar alegría. Esto es solo una pequeña muestra de lo que JoyUI ofrece, con más innovaciones por venir. Hay disponibles playgrounds y una versión estable para explorar. Agradecemos los comentarios por correo electrónico o en persona en el stand de MUI.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.

Workshops on related topic

React Summit 2023React Summit 2023
137 min
Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI
WorkshopFree
Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&A