lynx-ui: Mejor Lynx en Componentes

Bien, ¿qué tal React Advance London? Así que este es Shun, también conocido como Hux Pro. Solía significar profesional, pero supongo que hoy en día es procrastinación. Así que es genial estar aquí. De hecho, es mi primera vez en el Reino Unido. Así que gracias a GitNation por invitarnos aquí.

Así que hoy, hablemos de componentes. Entonces podrías preguntar, espera, ¿por qué estamos hablando de componentes en 2025? ¿No está ya resuelto por React y Chessie y UI? Quiero decir, en cierto modo. Construir componentes de grado de producción sigue siendo muy difícil. Esta es una cita de Chessie cuando la gente no se daba cuenta de que es bastante difícil.

Así que definitivamente un saludo a Chessie y Redix UI, las personas detrás de esto, porque hicieron un trabajo increíble para que esto sucediera. Pero soy reacio a decir que el problema de los componentes está completamente resuelto debido a la web móvil. Si lo piensas, los componentes solo ayudan desde un lado. Ayudan con la experiencia del desarrollador al encapsular todas las grandes experiencias de usuario en unidades reutilizables y componibles. Pero hay otra mano. Por otro lado, ¿qué pasa si la plataforma no tiene un techo muy alto para la experiencia del usuario? Eso no ayuda.

Así que veamos la aplicación móvil real. Así que tienes una transmisión en vivo allí. Puedes desplazarte, hay algunos encabezados fijos, y luego puedes desplazarte horizontalmente esas pequeñas cosas, y también puedes hacer otro desplazamiento horizontal, y luego desplazamiento automático hacia arriba. Es solo un montón de desplazamientos muy complicados. ¿Puedes imaginar construir esto en la web móvil? Si esto es demasiado complicado para que captures la idea, hay uno más simple. Es muy simple. Son solo dos pantallas que se desplazan concurrentemente a los elementos. Es simple, pero es imposible en la web móvil.

Así que estas dos pantallas son productos reales. TikTok. No están construidos con la web móvil. Está construido con una tecnología llamada LYNX. Espero que ya hayas oído hablar de ella, ya que somos de código abierto desde marzo. Pero si no has oído hablar de ella, LYNX es básicamente como la web. Es una tecnología multiplataforma, lo que significa que puedes escribir código una vez y renderizar en muchas plataformas diferentes. iOS, Android, web, escritorio. Puedes reutilizar tu conocimiento existente para la web, como variables CSS y React use state. Pero también es mejor, en el sentido de que se renderiza a vistas nativas para que puedas hacer todos esos desplazamientos elegantes que mencionamos antes.

Puedes tener scroll view, puedes tener view pager. Suena genial, ¿verdad? ¿Hemos terminado? Parece que ya tenemos lo mejor de ambos mundos. Bueno, solo hasta que ampliamos y echamos un vistazo más de cerca a la verdadera complejidad de construir productos reales. En ese sentido, todavía estamos lejos de la velocidad que tú, los desarrolladores de productos, los desarrolladores web quieren de la web. Así de grande es la brecha. Estamos sentados en un dilema nuevamente.

Así que sí, es muy nativo. Tienes iOS liquid glass en el primer estado, pero casi nunca cambia. No tienes personalización, ¿verdad? Por otro lado, tenemos algo como ShedCN select. Puedes construir todo con React, con JavaScript. Puedes iterar como quieras. Puedes componer como quieras. Es extremadamente personalizable. Simplemente no te da la UX nativa que queremos. Así que este dilema nos hizo comenzar a investigar de nuevo. ¿Es posible que podamos intentar estar más cerca de lo mejor de ambos mundos de nuevo, como una vez más?

Así que hoy, te presentaremos al miembro más nuevo de la familia de tecnologías Lynx. Se llama Lynx UI. Es un conjunto de componentes listos para usar donde intentamos preservar las grandes experiencias de usuario nativas mientras ofrecemos la velocidad y las experiencias de desarrollador de la web. Así que para darte un recorrido por algunos de los componentes, y también un análisis profundo en el diseño, los detalles de ingeniería de estos hermosos componentes de datos artesanales, por favor da la bienvenida a uno de los creadores al escenario, Fangzhou.

Así que, hola, soy Fangzhou. Soy uno de los creadores en Lynx UI. Hoy, me gustaría mostrarte lo que hemos construido en Lynx UI y cómo lo construimos. Así que, sé que un proceso de ingeniería común para los ingenieros de front-end es así. Así que piensas en HTML primero, y luego vienen los estilos, y lo último que te viene a la mente es DGS. Pero como constructor de bibliotecas de componentes, manejamos lo más difícil primero. Esa es la parte de JS. Así que, como infraestructura multiplataforma, el motor Lynx nos proporciona un conjunto de elementos nativos de alto rendimiento y estos elementos nativos son muy buenos. Vamos a mostrarte algunos de ellos. Comencemos con la vista de puntuación. Por ejemplo, esta vista de puntuación, nos proporciona una experiencia de puntuación sin interrupciones que realmente se mantiene a 120fps. Y el siguiente, la lista. También es algún tipo de vista de puntuación, pero también puede ayudarnos a manejar la parte de alto rendimiento que tiene las habilidades de reciclaje y reutilización. Y luego tenemos este coordinador de puntuación. Entonces, ¿qué hace? Este coordinador de puntuación, como su nombre indica, coordina dos contenedores de puntuación que están en la misma dirección de puntuación. Así que, este comportamiento parece normal en el móvil, pero no es una tarea fácil de terminar en la web. Esto es lo que podemos hacer en la web.

El contenedor de puntuación interno puntúa primero, y luego deja el encabezado atrás. Bueno, con el coordinador de puntuación, el nativo te ayuda a solucionarlo. El encabezado tiene la prioridad. Se colapsa completamente antes de que el contenido interno comience a puntuar, asegurando una experiencia fluida e intuitiva. Así que, el móvil incluso puede hacer algo más programable. Como esto. Así que podemos hacer un comportamiento de puntuación no sincronizado aquí. Incluso podemos girar con nuestros dedos y el exterior, el contenedor de puntuación vertical se moverá un poco. Y después de alguna configuración, podemos hacer que se muevan juntos. Es totalmente programable y completamente personalizable. Y cuando añadimos algún comportamiento de puntuación dedicado, comportamientos de ajuste a nuestros contenedores de puntuación, se convierte en el paginador de vista. Con todos esos elementos X bien construidos, tenemos primitivas de UI de grado nativo sólidas.

Entonces, ¿cómo construimos una interacción altamente personalizable en Lynx? Una solución muy directa para esto es añadir algo de JS. Ahí es donde se sitúa Lynx UI. Tomamos estos elementos nativos sólidos y los hicimos aún mejores con JavaScript y también con el ecosistema web. Así que, comencemos con este swiper. Este swiper es un caso de estudio perfecto para derivar una lógica JS limpia desde la base de la rueda nativa. Así que swiper es un tipo de carrusel que muestra una colección de elementos. Los usuarios pueden navegar a través de ellos manualmente o permitir que se ciclen automáticamente. La interacción de deslizamiento manual en el swiper que construimos es una lógica fundamental que adjunta delta en, transforma fuera. Esto significa que el componente rastrea la distancia que el dedo del usuario se mueve, el delta, y traduce directamente eso en una transformación visual correspondiente del contenido.

Pero antes de avanzar, tenemos que recordar que Lynx en realidad tiene un modelo de hilo dibujado, modelo de hilo. Así que, tenemos otro hilo en Lynx. Podemos llamarlo el hilo principal y el hilo de fondo. Si manejamos esos eventos como solemos hacer en el hilo de fondo, el hilo JS, introducirás latencia entre hilos como esta. Pero si los hacemos todos juntos en ese hilo principal, entonces tu adjunto tendrá una experiencia de usuario aún mejor. Entonces, ¿cómo permitir ejecutarlo de manera sincrónica? La mala noticia es que tenemos que hacer algunos cambios en nuestro código. Pero la buena noticia es que el cambio es muy fácil. Así que primero, hacemos que esa referencia de rueda sea la referencia del hilo principal. Luego ponemos esta marca de hilo principal en cada uno de los eventos y las funciones.

Y ahí lo tienes. Ya has movido todo lo que necesitas al hilo principal. Así que, este es un modo muy básico de Swiper. Ahora tenemos la versión MTS del modo básico, entonces, ¿qué tal si introducimos un modo llamado custom? ¿Cómo construir este modo custom? Es muy fácil. Así que, simplemente ponemos otra propiedad de animación personalizada del hilo principal al Swiper. Y gracias a los poderosos scripts del hilo principal que tenemos, cualquier cosa que pase por esa función de animación personalizada será capturada en cada cuadro durante la interacción.

Así que, lo que podemos hacer es esto. Lo que es aún más poderoso es que no estamos limitados solo a esta transformación. Podemos aplicar todos los demás principios a cualquier propiedad como la rotación, la escala, la opacidad. Así que vamos a añadirlos todos. ¿Por qué no simplemente ponerlos todos juntos en esa animación personalizada del hilo principal y ver qué sucede? El Swiper que tienes aquí se convierte en una tarjeta de Tinder. No es como nada en el modo básico, ¿verdad? Así que, eso es lo que podemos construir sobre Vue, el Vue nativo. Estamos usando MTS.

Pero no olvides que tenemos estos elementos nativos aún más poderosos. ¿Qué tal construir algo de lógica MTS sobre esos elementos nativos? Como el fiddlist. Fiddlist es una combinación de MTS y lista. Construimos una capacidad de refresco adecuada sobre él. Así que, lo que sucede en fiddlist es un muy buen caso que muestra cómo un puente sin fisuras entre un elemento puramente nativo y aquellos potenciados por MTS. Así que veamos cómo lo hacemos. Primero escuchamos lo que dice este elemento nativo. Es el hilo principal en scroll hasta el borde superior. Y ponemos un listener aquí. Solo cuando llega al borde entregaremos estas interacciones al MTS. Pero antes de eso, simplemente no hacemos nada. Así que, después de llegar a ese borde, podemos construir otro componente. Eso es MTS más Vue pager, eso es Vue pager dinámico. Lo que puede hacer es manejar diferentes... ¿Qué pasa si tus elementos de Vue pager tienen diferentes alturas? Puede ayudarte a calcular dinámicamente las alturas y hacer todas las funciones de easing de esto...

De su tamaño. El primer paso es obtener un rift no de Vue, sino de Vue pager. Y luego recibir el mensaje de él. El on offset change. Y simplemente hacemos el cálculo y cambiamos la altura del Vue pager. Y eso es todo. El Vue pager cambiará dinámicamente cuando lo desplaces con tu mano.

Entonces, ¿qué pasa si construimos la lógica MTS sobre múltiples elementos nativos? Veamos las tabs. Las tabs son una combinación de Vue pager y score view. El score view es responsable de la parte superior de la barra de tabs y Vue pager es el panel inferior lateral. Y construimos esos lindos pequeños indicadores con solo un Vue nativo.

Y estos indicadores se pueden ajustar con este set indicator left y set indicator con ticks individuales. Y el score view aquí, será responsable de hacer el... De su propio comportamiento de desplazamiento. Por supuesto, tu barra de tabs puede desplazarse, ¿verdad? Y el tamaño y la posición del indicador se calculan por... En realidad no por el score view, sino por el Vue pager. El desafío principal aquí es cómo sincronizar el comportamiento de los indicadores de tabs entre este Vue pager y el score view. Esto requiere implementar una animación suave para el indicador y asegurar actualizaciones de posición.

Por supuesto, aún podemos usar MTS aquí. Así que eso ya lo sabes. Así que en realidad... Después de construir eso, tenemos esta estructura de nuestros nuevos componentes. Que dice las interacciones reutilizables y de alto rendimiento sin retrasos porque tenemos MTS. Después de esta parte, hemos terminado la parte de interacción de nativo a web. Y comencemos la siguiente parte. Así es como construir nuestro componente de una manera más composable. Veamos el ejemplo de un solo diálogo. Entonces, si construimos un diálogo como este, la estructura interna de un componente totalmente encapsulado como este es muy, muy difícil de personalizar. Sí, de hecho puedes poner algunos props encima de él, pero es solo otro agujero de conejo. No puedes simplemente... Lo que estás haciendo aquí es solo forzar tus lógicas a través de un conjunto infinito de posibles estructuras JSX. Afortunadamente, los Chefsian y Redix ya nos dijeron, al exponer las primitivas subyacentes, aunque parezcan más complejas que un diálogo totalmente encapsulado, automáticamente obtenemos una API mucho más poderosa y composable. Así que veamos qué hay dentro. Entonces, para construir un diálogo desde Vue, la lógica central es algo así. Tenemos el handle open. Tenemos el handle closed. Tenemos el Vue bind tab, etcétera. Y primero que nada, tenemos el diálogo abierto, ¿verdad? Así que tenemos los primeros componentes que Vue bind tab. Lo llamamos dialog trigger. Luego, cuando el diálogo ya está abierto, controlamos esta jerarquía de visualización ajustando su nivel con este índice a 100 para garantizar que esté encima de todo lo demás. Llamamos a esta capa el dialog view. Es un nombre muy normal con solo un nivel encima de él. La siguiente parte, si te das cuenta, el diálogo a veces incluye un backdrop. Este backdrop te permite hacer clic para cerrarlo, pero a veces no proporciona esta habilidad, sin embargo. Así que podemos encapsularlo como el dialog backdrop y con props personalizables encima de él. Eso es para hacer clic para cerrar. Luego, finalmente, la parte más importante, el contenido. Una vista colorida enorme para que todos tus usuarios noten lo que vamos a decir.

Así que soy dialog. Llamamos a esta parte el contenido del dialog. Mostrará lo que pongas en estos props de contenido. Y finalmente, a veces si quieres poner un botón de cierre dedicado al dialog para que tus usuarios puedan cerrarlo fácilmente, podemos ponerlo en este cierre de dialog. Envuélvelos juntos, proporcionamos la raíz del dialog como el proveedor de contexto. Así que los desarrolladores ahora tienen la libertad total de personalizar el componente. Aplicar nombres de clase y estilos en línea es bastante sencillo y está totalmente soportado porque Lynx solo soporta CSS.

Y todos los props están categorizados y en diferentes componentes. Si no quieres un backdrop, está bien, simplemente puedes eliminarlo. O si quieres añadir alguna animación, simplemente ponlo en un nombre de clase. Para que tengas el control total del componente, incluso tenemos esto, lo llamamos variantes de UI. Es un nombre de clase dinámico que añadiremos a tu nombre de clase que te permite controlar completamente lo que sucede dentro de ese dialog. Por ejemplo, si el show es verdadero, entonces ponemos un UI open en él. Y si el show es falso, entonces, por supuesto, el UI close.

Y finalmente, con todas esas primitivas compuestas y el soporte de clase de Lynx, y por supuesto de elementos nativos, podemos hacer algo aún más rápido, que es construir tu propio sistema de diseño. Un ejemplo perfecto es construir un tema Lunaris con modos tanto oscuro como claro. Para construir un tema oscuro de Lunaris, simplemente envuelve tu aplicación en root con un nombre de clase llamado LunarisDark. La magia aquí es que el nombre de clase único proporcionará todas las variables CSS necesarias para el tema oscuro. Y aquí está la hoja de estilo que habrías definido.

Luego lo extendemos a cómo funciona en nuestro dialog. Imagina que puedes obtener el mismo nombre de clase y simplemente cambiar el nombre de clase en la parte superior, en la vista raíz de tu aplicación, y cambiará completamente a Lunaris light. De hecho, podemos escalar este poderoso diseño al sistema de diseño de TikTok. Es el mismo dialog que te estamos mostrando, pero es completamente diferente en TikTok. Así que, al encapsular integridad, estructuras componibles y diseño en los componentes cohesivos sistemas, el LYNX UI, podemos estar mucho más cerca de los productos.

Me gustaría invitar a Shen de nuevo para cerrar la charla conmigo. Gracias. ¿Puedes oírme? Bien. Genial. Como siempre, la visión de LYNX es darles a ustedes, como desarrolladores web, la capacidad de expresar experiencias de uso nativas. Y el LYNX UI es un paso más para acercarnos a esa visión. Así que quiero volver a este escenario para darles una actualización más. ¿Reconoces las diferencias? Es como la curva de movimiento. La primera es la basier y las otras dos son un poco más elegantes. Puede parecer sutil, pero hizo grandes diferencias en las experiencias de uso.

A principios de este año, nos asociamos con el equipo de diseño de TikTok para intentar democratizar tener curvas de movimiento basadas en física como la animación de resorte en más interfaces de usuario. En el esfuerzo de hacer esto, comenzamos a explorar cuál es la mejor manera de lograrlo. Nuevamente, podrías haber codificado todo en un componente nativo y darlo por terminado. Pero como mencioné, queremos dar a los desarrolladores web las verdaderas experiencias de desarrollo web. Puedes personalizar todo, puedes ser muy flexible, todo debería ser programable. Si notas que estábamos usando Tailwind nativo para lograr el sistema de diseño para una aplicación nativa, creo que es bastante genial. En un esfuerzo por explorar esto, pudimos construir todas estas demostraciones con LYNX. Si alguno de estos ejemplos te resulta un poco familiar, sí, están adaptados de MotionJS. Me complace anunciar que hemos podido adaptar con éxito la versión imperativa de MotionJS en LYNX. También estoy muy emocionado de decir que comenzamos a patrocinar este proyecto desde el mes pasado también. Lo realmente asombroso de esta adaptación es que es completamente el mismo código, la misma API. Básicamente solo copias este código de Motion.js en la web, y podrás tener la misma animación renderizada en LYNX. Incluso con esta simulación de deslizador de iOS un poco más elegante, el efecto de rebote se crea realmente al tener un valor de movimiento y agregar más efectos para transformar, bla, bla, misma API nuevamente. El video de la izquierda es la demostración, el video diseñado por el equipo de TikTok. Pudimos extender LYNX UI Action Ship con Motion.js para agregar la misma curva de movimiento basada en física.

Así que, también puedes notar que hemos estado usando el mismo tema durante toda la charla. Es el tema de construcción para LYNX UI. De hecho, no es solo un tema. Hay muchas variaciones diferentes. En este momento, puedes decir que estamos realmente, realmente obsesionados con el diseño. En lo más profundo de mi ser, creo que como tecnólogos de UI, el objetivo final es entregar el mejor diseño de producto. Por eso estamos realmente enfocados en ello. Y creemos que para entender cómo construir grandes productos, necesitas realmente conectar con los diseños, construir esa ingeniería de diseño por ti mismo, para que puedas tener ese énfasis y tener ese sentido. Este tema se llama LUNA, significa LYNX UI Neo-Aesthetics.

Puedes realmente expresarlo hoy. Así que, necesitas realmente descargar la app, el LYNX Go en la tienda de aplicaciones, y luego usar esa app para escanear este código QR. Es un poco más elegante. Podemos soportar la renderización en la web, pero esta no es la versión. Porque queremos darte la oportunidad de probar las experiencias de usuario nativas. Así que, un saludo a Guang Yu, nuestro ingeniero de diseño, quien realmente creó todo el diseño. Y también a nuestro diseñador de marca, Zach, quien hizo este hermoso logo y estableció el tono. Pero definitivamente ve a seguir sus apps y vas a encontrar la misma demo y código QR y cómo hacerlo, cómo probarlo por ti mismo.

Y LUNA y el LYNX UI estarán disponibles en diciembre. Vendrá con tres plataformas en el lanzamiento, iOS, Android, Harmony. Soporta parcialmente la web, porque como mencioné, hay algunas limitaciones en la web móvil. Y también porque estamos en el horizonte lanzando LYNX desktop, va a soportar LYNX desktop en el futuro próximo también. Así que, sí. Esto es Shen y Fang, junto con muchos miembros de LYNX UI que no están en el sitio con nosotros. Así que, gracias por escuchar. Disfruta tu React Advance London. Gracias.