Construyendo UI Interactiva Asíncrona con React 19 y Ariakit

Hola a todos. Gracias por invitarme aquí a React Events London. Es mi primera vez aquí, genial hasta ahora. Voy a hablar sobre la construcción de AZN QIs interactivos con React 19 y R8Kit. Primero sobre mí, mi nombre es Aurora. Soy de Noruega, actualmente viviendo y trabajando en Elzo, soy desarrolladora front-end y educadora de React. Y mi rol principal es consultora en Crane Consulting, sin embargo, también soy la líder de certificación de React en certificates.dev. Y en mi rol principal, estoy construyendo activamente con el Next.js app router, usando React 19 y componentes de servidor y otras características. Así que de ahí obtengo la mayor parte de mi inspiración para mis charlas.

Y en esa nota, ¿cuál fue entonces la inspiración detrás de esta charla? Bueno, estaba trabajando en una función que requería bastantes cosas diferentes y me motivó a recrear la función como una demo, que es lo que voy a mostrar hoy. Así que para la función, necesitaba construir un nuevo componente de UI, dado a mí en Figma por mi diseñador. Se veía algo así. Algo así como un combo box seleccionable con diferentes grupos. Había muchas interacciones con estilos personalizados y estados especificados y ningún componente existente en nuestro sistema de diseño y biblioteca de componentes que pudiera cumplir con estos requisitos. Así que me enfrenté a este problema, creando componentes de UI con diseño personalizado desde cero.

¿Alguna vez has visto esta página antes? ¿Te asusta un poco? Así que ni siquiera sé cómo decir esto. Los estándares WCAG para construir aplicaciones accesibles, definitivamente me asustan. Así que en Noruega, de hecho, tenemos requisitos para seguir este estándar en aplicaciones públicas y podemos incluso ser multados si no lo cumplimos. Pero definitivamente no soy una experta en accesibilidad y no tengo recursos dedicados para ayudarme directamente. Así que tuve otro problema. Construir una UI que sea accesible sin escribir el código para eso tú mismo. Y tuve un tercer problema, uno que comúnmente encontramos en React, que es manejar operaciones asíncronas de manera fluida, evitando estados pendientes parpadeantes y una UX inestable sin pérdida de código. Y aquí hay un ejemplo de esos problemas ocurriendo en este carrito de compras. Como puedes ver aquí, el estado pendiente no está sincronizado con el servidor terminando su actualización y el código también es, ya sabes, regular, no tan bonito código de React.

Así que para resolver todos estos problemas, utilicé una serie de herramientas. Tailwind CSS fue simplemente la mejor manera para mí de estilizar efectivamente el componente. ¡Woo! ¡Tailwind! Escuché un aplauso. La mejor manera de estilizar el componente basado en los bocetos de Sigma. Ya usé esto y quería seguir usándolo con un nuevo componente. Tailwind CSS v4 acaba de salir no hace mucho, así que vamos a usar eso en la demo.

En cuanto a la accesibilidad, utilicé ARIAKit, que proporciona primitivas accesibles sin estilo para componentes como select, menú, diálogos, lo que necesites. Está optimizado para lectores de pantalla, tiene soporte para teclado y sigue el estándar WCAG. Ya usamos esto en el sistema de diseño en mi proyecto y tuvimos una experiencia realmente positiva con ello. Ten en cuenta que esto es solo una opción. Además, RADIX UI puede proporcionar el mismo tipo de funcionalidad, pero en mi caso, ARIAKit fue la única biblioteca que fue capaz de soportar todos estos requisitos personalizados en ese componente.

Así que finalmente, para manejar las operaciones asíncronas, utilicé características de React 19. Hay mucho aquí para ayudarnos con la gestión asíncrona. Específicamente, acciones, usando hooks como use transition y nuevos hooks como use optimistic. Además, las funciones del servidor pueden ayudarnos mucho a simplificar la comunicación con el servidor. Así que básicamente, estas son las características que son las herramientas que me permiten construir esta función. Para ver cómo combinar todo esto, vamos a una demo. Esto es como una aplicación de demostración de tablero de proyecto inspirada en esta función que estaba construyendo en mi proyecto, una versión simplificada. Tengo este selector de cuenta personalizado aquí con la UI personalizada.

Digamos que me dieron un boceto, lo construí, lo estilice bien y todo está bien, ¿verdad? Intentemos interactuar con esto. Espero usar la flecha arriba, flecha abajo para navegar dentro de esto. Eso no está funcionando. Supongo que estoy usando una pestaña. Genial. Ahora estoy fuera del select. Podría intentar hacer clic afuera, podría intentar hacer clic en escape, pero nada me está ayudando aquí. Esto claramente no es accesible, ¿verdad?

Intentemos también ejecutar el interruptor aquí. Tengo un spinner. Desapareció un poco temprano antes de que el tablero se actualizara mientras el servidor se sincronizaba, así que sí, tenemos algunos problemas aquí. El desafío que estoy encontrando es que estoy tratando de construir este componente de UI personalizado y quiero que sea accesible y quiero una UX fluida. No hice un gran trabajo. No es muy accesible, no es súper interactivo. Esto me pasó a mí.

El objetivo de esta demo es hacer esto interactivo y accesible y mejorar esto y una UX estable con ARIA kit y React 19. Vamos al código. La configuración para esto es el enrutador de la aplicación de Next.js. Estoy usando Prisma como un ORM. También tengo Telvan CSS instalado aquí en v4. El punto de partida, ya lo terminé. Solo estamos usando componentes del servidor para obtener datos usando suspense para el fallback. Al cargar la página tengo la agradable transmisión UI con fallbacks. Tengo esta cosa de cuenta actual donde básicamente estoy simulando la autenticación usando cookies. Solo una versión simplificada pretendiendo que tenemos algún tipo de configuración de autenticación aquí.

Esto no es realmente el enfoque porque en lo que nos vamos a centrar es en este componente selector de cuenta, ¿verdad? Que es donde tenemos todos los problemas. Mirando la implementación inicial de esto probablemente se vea muy familiar para la mayoría de los desarrolladores de React. Tenemos un montón de use state. Está expandiéndose. Está expandido. Estamos haciendo un montón de cosas en esta enorme función handle switch account. Usando fetch para llamar a nuestra API. Muchas cosas.

Digamos que acabo de codificarlo. Funciona. Está bien. Podría ser mucho mejor. Vamos también a revisar el JSX, la UI real. Aquí tengo un montón de divs sin nombre. Los marqué con comentarios para poder saber qué es qué aquí en este componente. Tengo todos los elementos. Es bastante desordenado. Es difícil de leer. No es accesible. Definitivamente no hay soporte para lectores de pantalla aquí. Esto es en lo que vamos a trabajar.

¿Y si intentáramos solucionar algunos de los problemas de accesibilidad nosotros mismos? Intentemos manejar la tecla de escape. Bien. Hay un use effect allí. Genial. Funciona. Está bien. ¿Qué tal esta navegación con el teclado aquí? Veamos cómo se verá eso. Bien. No tengo idea si esto está siguiendo el estándar WCAG.

Creo que este no es el enfoque correcto. Intentemos algo más. Estas son dos de las muchas cosas que nos faltan. Como alguien que no conoce la accesibilidad tan bien, no debería estar implementando esto yo mismo. Vamos a importar nuestro React kit. Vamos a obtenerlo aquí. Nuevamente, es una biblioteca que proporciona primitivas de UI sin estilo para crear componentes interactivos accesibles.

Vamos a básicamente reemplazar todos estos divs con nuestro equivalente del kit, permitiéndonos construir aplicaciones interactivas. Comencemos desde arriba aquí. Necesitamos elegir qué tipo de componente estamos creando aquí. Esto es más cercano a un select, diría yo. También podría ser un menú. Vamos a elegir un select para esta demostración. Y hagamos un select provider. Vamos a envolver todo en esto, y manejará todas las interacciones por nosotros. Lo llevaré todo el camino hacia abajo aquí. Y nuestro kit manejará la posición relativa aquí, así que podemos eliminar esto.

Y para la etiqueta, para etiquetarlo correctamente, hagamos un select label. Botón de apertura, bueno, esto es en realidad el select en sí. Así que usemos el kit select aquí. Y el on click expandirá el estado que será manejado por nuestro kit, así que eliminaré esto de mi propio código aquí. Pero ahora que eliminé eso, ya no puedo estilizar con mi variable expander aquí, ¿verdad? Estaba usando esto para estilizar. Necesitamos traer de vuelta este estilo personalizado usando alguna especie de funcionalidad. Echemos un vistazo a este resumen. De hecho, esto podría ser una select arrow.

Así que no tengo que poner nada aquí, y será etiquetado correctamente nuevamente. Y quiero traer de vuelta esta rotación de 180, ¿verdad? Así que voy a hacerlo de una manera diferente. ARIA-kit nos permitirá realmente estilizar basándonos en los atributos ARIA que aplica a cada elemento. Así que puedo continuar y hacer un ARIA expanded aquí. Digamos que queremos estilizar en el estado ARIA expanded. Bueno, está bien, pero no es la select arrow la que está expandida, es el select en sí. Así que podemos continuar y usar el tailwind group para la clase y luego decir que cuando el grupo está ARIA expanded, rotaremos 180 grados aquí, y eso lo traerá de vuelta a rotar nuevamente. Mucho más limpio.

Bien, ¿qué pasa con este? Tengo como un montón de tailwind aquí. Tampoco está funcionando. Vamos a deshacernos de esto y hagamos algo más que ARIA-kit nos permite hacer, que es agregar un render prop. Y simplemente renderizaré un botón select personalizado aquí en su lugar. Este realmente puede ser extraído. Usaré mi ARIA expanded aquí, por todas partes, y traerá de vuelta este estilo personalizado de abrir-cerrar aquí. Genial. ¿Qué pasa con el popover? Actualmente, no hay popover. Vamos a reemplazar esto con un select popover, como se esperaba, y eliminar esta renderización condicional y eliminar el comentario porque ya no lo necesitamos. Y ya, oh, sí, parece que tengo algo de CSS de mi implementación anterior. Ya no necesitamos esta posición absoluta y podemos reemplazar top 20 con un gutter de ocho. Hermoso.

Nota cómo ya tiene esta colocación consciente del viewport aquí y ni siquiera hice nada. Solo he estado reemplazando con componentes de ARIA-kit. Así que ahora es consciente del viewport y tiene click fuera y tecla de escape ya. Así que está mejorando mucho aquí. Sigamos adelante ya que esto está funcionando tan bien. Tenemos este primer elemento de opciones aquí. Voy a convertir esto en un select item. Y ahora mismo, tiene este hover, pero si estoy usando el teclado, también necesito ver dónde estoy, ¿verdad? Así que en lugar de hacer hover, usemos otro atributo que podemos obtener de ARIA-kit, que es data active item. ARIA-kit aplicará estos y nos permitirá estilizar con ellos. Así que ahora tengo mi hover, pero también tengo el teclado dándome mi elemento actualmente seleccionado.

Lo mismo para estos elementos de cuenta aquí abajo. Vamos a hacer estos también. Estos van a ser select items. Y también necesito mover esto aquí así. Nuevamente, tengo este hover, pero también lo necesito cuando estoy usando el teclado. Así que hagamos exactamente lo mismo. No hagamos hover, sino hagamos data active item. Data active item. Intentemos de nuevo. Ahí vamos. Así que ahora también tengo mi teclado dándome este estilo. Pero una cosa que aprendí sobre accesibilidad recientemente mientras hacía esta charla es que cuando estás usando el teclado, en realidad hay una demanda de mayor contraste porque ya no tienes tu ratón mostrándote dónde estás. Así que si estamos usando el teclado, deberíamos estar usando un color diferente. Así que hagamos en lugar de focus visible, hagamos data visible aquí para que podamos marcarlos correctamente. Así que hover es así, mientras que el teclado me dará este mayor contraste.

Y para este estado deshabilitado, simplemente haré esto ARIA disabled para traerlo de vuelta. Así que sí, ahora tengo mi navegación por teclado y el focus trap todo configurado. Finalmente, esta última pieza aquí, esta marca de verificación, esto puede ser simplemente un select item check. Y para traer esta marca de verificación o hacerla funcionar, solo necesitamos un valor en cada elemento y luego hacer coincidir esto con el valor del proveedor real, que podemos agregar en la parte superior aquí. Hagamos la cuenta actual aquí. Muy bien. Así que parece que todo está ahora funcionando de nuevo, excepto que es realmente legible. Es realmente accesible. Y sí, es simplemente mucho más declarativo y componible aquí. Así que creo que esto ya está bien. Y por cierto, estoy usando Tailwind aquí, pero hay mucha documentación sobre cómo estilizar estos componentes de ARIA kit usando CSS regular y en cualquier componente, como un menú o un diálogo, habrá muy buena documentación.

Así que esto ya está bien. Vamos a trabajar en la siguiente parte que necesitamos arreglar, que es esta operación asíncrona, ¿verdad? Así que ahora mismo, el spinner no persiste durante toda la operación porque estamos actualizando los datos del servidor aquí y está tardando un tiempo. Esta actualización del router no está incluida.

los datos del servidor aquí y está tardando un tiempo. Esta actualización del router no está incluida. Ahora, estamos haciendo algunos estados de carga manuales, pero en realidad hay una mejor manera de hacer esto ahora con algunas nuevas características de React. Vamos a usar una transición aquí. Primero, déjame deshacerme de este estado expandido. Así que podemos obtener una transición llamando al hook useTransition.

Y esto nos da un estado pendiente incorporado, y nos da la función para iniciar una transición. Y vamos a usar esto en lugar de nuestro set is pending manual aquí, así que podemos deshacernos de esto también. Y startTransition nos permite marcar algún tipo de actualización de estado y una llamada síncrona como no urgente y coordinar todo junto para que ya no termine temprano antes de que toda la interacción esté completa. Así que usemos esto para coordinar nuestra operación asíncrona con esta actualización de la UI aquí, que será todo este bloque aquí.

Y en React 19, podemos tener funciones de transición síncronas. Podemos seguir adelante y pasar la bandera async aquí. Y lo que realmente estamos haciendo aquí es crear lo que se llama una acción. Eso es solo terminología para una función llamada en una transición, lo que significa que ahora sabemos cómo llamar a este tipo de comportamiento diferente en React. Así que probemos esto. Así que hagamos clic aquí y veamos que el spinner está girando, y luego persiste hasta que todo el dashboard esté actualizado.

es una limitación actual con las transiciones que se eliminará en el futuro. Pero si tienes algún tipo de actualización de UI, después de una llamada asíncrona, necesitas envolver una segunda start transition para integrarla en la coordinación. Así que voy a hacer eso, pero probablemente esto no sea algo de lo que debas preocuparte en el futuro. Vamos a hacer esto también asíncrono.

Y ahora debería estar completamente coordinado aquí. Así que tenemos todo en un gran bloque comprometiéndose al mismo tiempo al final. ¿Qué más podemos mejorar aquí?

Bueno, tengo este use state, ¿verdad? Estableciendo la cuenta actual, haciendo este rollback en caso de error.

Y la razón por la que incluso añadí esto es porque cuando hago clic sin este set state, el select no se actualiza de inmediato. Va a estar esperando que el servidor me dé ese nuevo valor. Así que por eso lo necesito. Pero podemos usar un hook diferente, use optimistic, para hacer esto más fácil.

Y este nuevo hook funciona junto con acciones para simplificar las actualizaciones optimistas. Así que tomará un estado para mostrar cuando no hay ninguna acción pendiente, que será nuestro valor del servidor aquí. Y luego nos dará una cuenta optimista y luego una función setter. Y podemos usar esto como nuestro valor de cuenta actual en toda nuestra aplicación aquí.

Y luego establecer esto. Esto realmente necesita ser coordinado con una transición, así que necesitamos llamarlo dentro de una transición. Queremos coordinarlo con este. Así que use optimistic realmente crea este estado optimista temporal que persiste mientras la transición está en curso. Y luego simplemente se asienta o vuelve a este valor aquí al final.

aquí, me dará esta actualización optimista, y luego simplemente se fusionará sin problemas al final. Y no es muy visible lo que está sucediendo cuando tiene éxito, así que intentemos hacer que falle eligiendo una cuenta inactiva. Y voy a traer esto aquí. Así que si esto va a errar, todavía tenemos esta actualización optimista, pero a medida que la transición termina, simplemente vuelve automáticamente a este valor de paso, porque ya no coincide.

Así que no tenemos que preocuparnos por revertir nada. Así que sí. Observa cómo toda esta interacción aquí es completamente fluida ahora. Usamos transition, use optimistic, y sí. Eso es básicamente lo que podemos lograr aquí.

Pero todavía hay algo que podemos mejorar, porque tengo este await fetch aquí. Y no tengo seguridad de tipos, y es un poco molesto estar escribiendo endpoints de API para algo tan simple como esto, ¿verdad? ¿Qué pasaría si pudiéramos simplemente llamar a una función? Llamemos a switch account en su lugar. Esto es en realidad una función de servidor de React, y lo que eso significa es que podemos ejecutar algún tipo de código de servidor desde el cliente como si fuera solo una función regular. Así que voy a usar este switch account en su lugar, que hace lo mismo que el endpoint de API hizo. Y en realidad me está dando seguridad de tipos a través del límite del servidor aquí.

Se ve así. Así que tengo este error. Y no necesito serializarlo. Eso está sucediendo automáticamente. Así que puedo simplemente seguir adelante y usar este error directamente aquí. Y todo debería seguir funcionando de la misma manera.

Probémoslo. Todo está bien. Y eso significa que puedo simplemente eliminar toda esta capa de API. Ya no voy a necesitar esto. Y finalmente, una cosa más que podemos hacer para simplificar esto es simplemente eliminar o mover este refresh a la función del servidor, porque eso es algo que podemos hacer en funciones del servidor o en acciones del servidor de Next.js específicamente.

Vamos a mover esto aquí y simplemente llamar a refresh, que es el equivalente desde el lado del servidor. Sí, esta es ahora nuestra nueva interacción. Todo está funcionando. Todo ha sido simplificado. Así que finalmente, ya que estamos, sabemos que nuestro kit es muy personalizable. Solo quiero agregar una característica más para mostrarles todo esto de nuevo. Vamos a agregar un botón de logout. Digamos que mi diseñador dice, oye, ¿puedes agregar un botón de logout personalizado aquí? Claro. No hay problema. Estoy usando nuestro kit.

Vamos a añadir también un unclick a esto. Tal vez queramos llamar a algo como logout aquí. Hagamos una función del servidor. Ya estamos bastante bien en ese logout. Y tal vez queramos ver el estado pendiente. Vamos a envolver esto con la transición para obtener este estado pendiente automático. Hagamos una transición de logout así y envolvamos esto para que se rastree automáticamente aquí. Y luego podemos usar esto para deshabilitar el elemento seleccionado.

Y tal vez queramos decir algo más. Tal vez queramos decir cerrando sesión en su lugar. Y de nuevo, estoy usando mi kit ARIA personalizado o los atributos que el kit ARIA está aplicando aquí para agregar mi CSS personalizado. Veamos si esto va a funcionar también. Sí. Así que está funcionando. Así de fácil es construir funciones hoy en día.

Muy bien. Y una cosa que realmente olvidé mencionar. Solo quiero dejarlo más claro. Es que este tipo de código, a medida que las acciones se adopten más por las bibliotecas de componentes, probablemente se moverá a la capa de la biblioteca de componentes. Así que no tendremos que lidiar con esto como usuario. Pero como estamos creando este componente de UI personalizado, lo estamos haciendo manualmente. Hagamos una demostración final de todo lo que hicimos aquí. Así que de nuevo, voy a cargar la página. Tengo este streaming, renderizado de superficie con suspense, mostrando fallbacks. Puedo navegar usando el teclado. Todo está bien. Puedo usar mis teclas de flecha. Tengo mi trampa de enfoque.

Tengo mi trampa de enfoque. Todo está funcionando como se esperaba aquí. Haga clic fuera, tecla de escape. Y si hago mi cambio, va a ser estable, sincronizado. Sí. Así que el resultado de esto es una cuenta seleccionada mantenible, accesible y amigable para el usuario sin comprometer ninguno de mis CSS personalizados usando las mejores prácticas modernas.

Así que volvamos a las diapositivas y resumamos lo que hicimos. Así que con ARIA kit, pudimos construir una UI completamente accesible e interactiva, incluyendo gestión de teclado, clic fuera, gestión de enfoque y soporte para lectores de pantalla. No te mostré el lector de pantalla, pero confía en mí, va a ser bueno porque no lo construí. Solo estaba usando ARIA kit.

Pudimos personalizar fácilmente la UI y estilizarla con nuestro flujo normal de Tailwind CSS usando datos y atributos ARIA proporcionados. Y también obtuvimos este código de componente limpio, declarativo y componible sin ningún código repetitivo. Y con React 19, simplificamos nuestra comunicación con el servidor usando funciones del servidor, omitiendo toda la capa de API. Y utilizamos alternativas a soluciones comunes como use state, use effect, y obtuvimos estas interacciones fluidas y estados de carga simplificados a través de acciones con transición de usuario.

Y tuvimos esa retroalimentación instantánea del usuario y reversión de errores automáticamente con use optimistic. Y solo mira esta hermosa diferencia. Quiero decir, mucho mejor, ¿verdad? Muy bien. Con eso, este es el repositorio de la aplicación en la que estaba trabajando. Si quieres echarle un vistazo. Y también puedes encontrarlo en el código QR junto con mis otros enlaces de redes sociales.

Y finalmente, si estás interesado en verificar y mejorar tus habilidades en React o quieres aprender las mejores prácticas de React o incluso temas avanzados, la certificación de React para la que creé el contenido ahora está disponible. Y pondrá a prueba tu conocimiento a través de preguntas y desafíos de codificación e incluye contenido de capacitación para guiarte mientras te preparas. Así que básicamente leí la creación de contenido y soy muy parcial, pero creo que es una gran manera de aumentar tu conocimiento y obtener credenciales validadas.

Así que gracias por tenerme en React Advanced. Gracias. Me gustaría agradecerte en nombre de la comunidad de desarrolladores por decir que la accesibilidad es difícil. Siento que mucha gente simplemente dirá, deberías hacerlo. Es tan fácil. Y yo estoy como, lo haré, pero no me hagas sentir tonto. Como, no lo es. Sí, eso es cierto. Especialmente si vives en un país que tiene un montón de leyes al respecto. No es fácil. Mi papá está discapacitado. Yo lo hago.

Bien, genial. Tiempo de preguntas. Voy a empezar con esta. ¿Existe una mejor práctica para notificar a los usuarios sobre fallos y éxitos optimistas? No estoy seguro si hay una mejor práctica. Creo que usualmente los toasts son bastante buenos. Pero realmente depende de la complejidad de la característica. Creo que esta es una característica muy simple. Es como claramente solo vas a intentarlo de nuevo. Pero depende de la característica, diría yo. Y tal vez de tus especificaciones y lo que prefieras.

Bien. Bien, pregunta sobre start transition. ¿Deberíamos hacerlo para cada llamada await? Y ¿debería ser la misma instancia de transición? Entonces, lo que pasa con la transición es que el equipo de React ha estado averiguando cada vez más cómo se verá en el futuro. Y creo que la mayoría de las llamadas asíncronas se simplificarán usando una transición. Así que pruébalo y ve si puedes hacer que funcione para ti. Y probablemente hará el trabajo más fácil. Y si estás coordinando con algún otro estado de actualización, definitivamente. Porque entonces realmente obtendrás algunos cambios de UI extraños y un comportamiento descoordinado extraño si no lo estás usando.

Entonces, digamos que tengo dos botones que hacen dos cosas asíncronas diferentes. Debería tener dos transiciones, ¿correcto? Definitivamente, sí. De lo contrario, será lo mismo. ¿Y use optimistic? Está bien. Es solo una pregunta. Depende de, sí. Así que probablemente estarían separados a menos que estés tratando de coordinar todo. Y de nuevo, para todo el tema de agregar use transition, agregar use optimistic, todavía es algo que se está averiguando. Pero, como mencioné, con suerte veremos más y más bibliotecas adoptando este patrón de acción para que no tengamos que escribir este código nosotros mismos. Será solo una parte de los componentes que estamos usando. Sí. Bien.

Genial. Siguiente pregunta. ¿Por qué, en este caso, usaste ARIAKit en lugar de Radex? ¿Hubo alguna razón específica además de que tenían algunos componentes que necesitabas? Bueno, para este componente realmente extraño que intenté demostrar en este boceto al principio, en Xcaladraw, necesitábamos un select que también fuera un combo box dentro. Y lo intenté, intentamos construir, o en realidad, sí. No funcionó con Radex, ese combo específico. Pero además, cuando estábamos creando un componente específico en nuestra biblioteca de componentes, necesitábamos un combo box de selección múltiple. Y eso tampoco, no pudimos hacerlo funcionar de la manera que nuestro diseñador quería con Radex. Así que simplemente, estábamos tratando de encontrar la mejor solución sin decirle a nuestro diseñador, no creo que podamos hacerlo de esta manera. ¿Podemos intentar esto en su lugar? Ya sabes. Y no van a estar contentos. No es que uno sea mejor. Es solo que, en este caso, ARIAKit es mucho mejor para ti. Solucionó nuestros problemas. Y quería mostrarlo porque es nuevo, no es tan familiar para la comunidad de desarrolladores. Sí, genial.

Y alguien está preguntando, qué atajos, no alguien, un montón de personas, qué atajos usaste en la demostración? Y puedes mentir y simplemente decir, no, lo codifiqué mal. No, no. Usé, así que en realidad recibo muchas preguntas sobre esto. Lo que hago siempre que tengo algo que no quiero codificar porque es largo o es molesto o no es importante, simplemente uso un snippet, como snippets integrados de VS Code. Y luego puedes llamarlo lo que vas a decir, para que no tengas que olvidar y recordar lo que vas a decir. Así que solo snippets, eso es todo. Snippets de VS Code. OK, así que vi la animación del avatar cambiando después de que cambiaste la cuenta. ¿Usaste el nuevo componente de transición de vista? Lo hice. Hay una transición de vista muy, muy pequeña. No añadí mucho en esta demostración. Tengo una charla diferente donde hablo sobre transiciones de vista, lo cual es realmente genial. Pero esta es una transición de vista muy pequeña. Así que buen trabajo al notar eso. ¿Sabes si ARIA Kit funciona con gestos de Android e iOS? Como este tipo de cosas.

Sí, no estoy seguro. Creo... Lo siento, hice esto. Porque, de nuevo, no soy un experto en accesibilidad o en bibliotecas de componentes. Pero mi impresión es que, por ejemplo, React ARIA es realmente bueno en esto, ¿verdad? No creo que ARIA Kit esté haciendo lo mismo que React ARIA está haciendo, pero podría estar equivocado. Así que tal vez deberías verificarlo por ti mismo, para estar seguro. Genial.

Uh, ¿qué... Sí, OK. ¿Se necesitan plugins para los selectores de ARIA? No que yo sepa tampoco. Como, ¿verdad?, simplemente funciona. Simplemente funciona. VS Code con una extensión de Tailwind. Sí. Quiero decir, sí. Todo... No añadí nada específico aquí. Es solo Tailwind y ARIA Kit.

Uso Z y también todo simplemente funciona con Tailwind de cualquier manera. Así que se nos acabó el tiempo. Oh, sí. ¿Alguna vez te atrapa tu Git blame? Es como, ¿quién escribió esta mierda? Y luego eras tú, como, hace dos semanas. Oh. Me pasa todo el tiempo. Todo el tiempo. Es la peor sensación, sin embargo, que estás como, maldita sea. Y la gente dice, significa que creciste. Y yo estoy como, significa que era un idiota. Sí.

Y en ese momento, pensaste que era la mejor solución de todas. Oh, Dios mío. Esa fue la mejor utilización del hecho. Porque lo envolviste en un hook, así que sonaba bien. OK.

Muchas gracias, Aurora. Gracias. Muchas gracias por la gran charla. ¿Está tu código en GitHub? Sí, sí, sí. Está ahí, está ahí. Está en el repo fijado. Está en algún lugar ahí. Sí. Está en mi GitHub.

Muchas gracias. Gracias.