Lynx: Desbloquea Nativo para Más

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Lynx, una nueva pila multiplataforma adoptada por la aplicación TikTok que permite a los equipos entregar interfaces de usuario verdaderamente nativas a móviles y web desde una única base de código utilizando sus habilidades web existentes como CSS y React, ha sido recientemente de código abierto.

En esta charla, exploraremos qué hace que Lynx sea familiar y qué lo distingue de otras tecnologías multiplataforma; echaremos un vistazo más de cerca a su diseño de doble hilo, y cómo eso permite los lanzamientos instantáneos de Lynx y las interacciones suaves como la seda, además de un adelanto de lo que sigue para Lynx.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

Xuan Huang
Xuan Huang
32 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Primera charla en inglés de Shen en una conferencia presentando el proyecto Lynx con éxito viral, Lynx aprovechando tecnologías web para desarrollo multiplataforma, uniendo fortalezas web con capacidades nativas, mejorando capacidades de desarrollo con elementos de UI nativos, renderizado instantáneo, MTS habilitando scripting de man-thread y soporte CSS, exploración de integración de Tailwind, adoptando Haskell en Lynx para pensamiento multiplataforma.
Available in English: Lynx: Unlock Native for More

1. Shen's Introduction to Lynx Project

Short description:

La primera charla en inglés de Shen en una conferencia, involucrado en la comunidad de React, presentó el proyecto Lynx con un éxito viral inesperado.

Hola chicos, ¿cómo están todos? Así que aquí está Shen. Eso se pronuncia como Shen. La gente también me llama Hux en HuxPro, porque ese es el nombre de Internet que uso en todas partes en Twitter, GitHub, YouTube. Así que no voy a mentir, esta es mi primera charla en inglés en una conferencia presencial. Así que gracias. También muchas gracias a React Summit y Geek Nation por invitarme aquí, y esto definitivamente es diferente.

Así que en realidad he sido parte de la comunidad de React por un tiempo, especialmente durante mi tiempo en Meta. Estuve involucrado con ReasonML muy temprano, y luego ayudé a que Hermes se convirtiera en el mejor motor de JavaScript para React Native. Oye, si no olvidaste esa charla en React Conf 2021, que dejó caer la idea de React Forget. Ese fui yo. Ayudé a iniciar esa idea, y tres años después finalmente tenemos React Compiler. ¿Verdad? Sí, todavía suena real que React con un memo ahora es real.

Pero hoy quiero mostrarles algo nuevo. He estado trabajando con otro equipo increíble durante dos años desde entonces. Se llama Lynx. Lynx no es como React Forget. No es como resolver un PIN que todos ya llenaron. Tengo curiosidad, ¿cuántos de ustedes ya han oído hablar de Lynx? Manos arriba. Bueno, muchos de ustedes. Guau. Eso es increíble. Como, probablemente nadie estaba pidiendo algo, como, gracias. Pensamos. Así que es... Ratter está aquí para más. Es como traer más cosas a la mesa. Y les mostraré lo que eso significa en el resto de la charla. Así que abrimos el código de Lynx en marzo, con este blog. Y honestamente no anticipamos que se volvería viral. Gracias a todas las celebridades de Twitter que tuitearon sobre nosotros.

2. Insights on Lynx Project & TikTok Integration

Short description:

Videos de YouTube en diferentes idiomas, sorprendentes características de video, resumen de Lynx incluyendo soporte de plataforma e integración con TikTok.

Pero personalmente, lo que realmente me impactó es que comencé a ver videos de YouTube aparecer en un idioma que no entiendo en absoluto. Así que no puedo verlos sin las traducciones de YouTube. Y eso fue simplemente por qué. Por supuesto, también hay contenido en inglés. Hicieron una transmisión en vivo realmente perspicaz. Me encantó.

Tampoco esperábamos eso en absoluto. Fireship lanzó un video sobre nosotros al día siguiente de que abrimos el código fuente. Y luego está Phil. Todavía era la versión rubia de Phil. Así que, lanzó un análisis profundo y realmente aprecié que leyera todo el artículo del blog.

Entonces, ¿qué es exactamente Lynx? Si no has oído hablar de él, lo siento, he estado reteniendo hasta este punto. Lo hice a propósito. Quería hacerte sentir un poco formal. En esencia, Lynx resuelve el mismo problema que Web, React Native, Flutter, ¿verdad? Intenta permitirte escribir código una vez y poder construir interfaces de usuario y aplicaciones en cualquier plataforma posible. Actualmente, soportamos iOS, Android y web y habrá más a finales de este año.

Y Lynx está listo para producción. Lynx es utilizado intensamente por TikTok. Así que todos los servicios aquí están construidos con Lynx. Así que, si alguna vez tocas alguno de esos, ya eres como un usuario de Lynx. Hay algo como el panel de búsqueda, las aplicaciones de estudio de TikTok, el sitio de comercio electrónico, el regalo de transmisión en vivo, y eventos interesantes como Disney 100 y MetaGallery. Y en cuanto a la experiencia del desarrollador, porque eso es algo que nos importa mucho. Ya lo sabías, ¿verdad?

3. Lynx: Leveraging Web Technologies

Short description:

Renderizado web de Lynx, estilo CSS, aprovechando tecnologías web para desarrollo multiplataforma, abogando por la escalabilidad, accesibilidad y velocidad de la web.

Y en el lado derecho, solo estoy mostrando cómo las páginas de Lynx se renderizan en la web. Entonces, puedes ver que es muy interactivo. Aquí viene una parte interesante. Cuando se trata de estilizar la interfaz de usuario, puedes usar CSS real. ¿Verdad? Eso significa variables CSS, selectores CSS e incluso ese hermoso degradado y animación de transición. Entonces, en este punto, algunos de ustedes pueden pensar, ¿es Lynx otro navegador web? Quiero decir, si buscas en Google, bueno, probablemente no debería decir eso. Si lo consultas en ChatGPT, probablemente dirá que sí. Porque en realidad hay un navegador llamado Lynx. Lynx equivocado, lo siento. Pero para nosotros, sí. Sí, más o menos. Como, usamos lenguajes de la web como markups, CSS, JavaScript. El propósito, e incluso frameworks como React, ¿verdad?

El propósito es que ustedes y toda la comunidad de desarrolladores puedan reutilizar los conocimientos web existentes y aún así poder construir para cualquier plataforma con capacidad nativa y interfaces de usuario nativas. Entonces, necesitamos hacer algunos cambios. ¿Verdad? Necesitamos asegurarnos de que las cosas existentes existan porque no sentimos que la web sea perfecta. Creemos que la web no está innovando lo suficientemente rápido, así que queremos intentar algo mejor. Quiero decir, me encanta la web, pero si el navegador web es el mejor, ¿por qué no hemos escrito ninguna interfaz de usuario móvil con navegadores web? Estoy apoyando a la web.

4. The Web's Relevance Gap

Short description:

La velocidad y el alcance de la web, desafíos en el mercado móvil, y la necesidad de combinar las fortalezas de la web con capacidades nativas.

Puedes llegar a cualquier usuario en cualquier dispositivo. Esa es la belleza de la web. La otra belleza de la web es que ofrece una velocidad inigualable. Si construyes para nativo, probablemente tomará un tiempo para que tu experiencia llegue a los usuarios. Pero cuando construyes para la web, se distribuye increíblemente rápido. ¿Verdad? Es tan rápido que tenemos que verlo de nuevo. ¿Verdad? Así de rápida es la web. Entonces, amamos la web. Amamos la escalabilidad, la accesibilidad y la velocidad de la web. Y se supone que la web debe ganar.

¿Por qué perdió la web en el mercado móvil, al menos? Una de las figuras clave, él estaba dando otra charla ayer, Alex Russell, una figura clave en nuestra industria que ha trabajado en Blink y Edge y Chromium y muchos estándares web. Compartió sus ideas en su blog. Y lo señaló. Como cualquier otra meta plataforma, meta plataforma significa plataforma, ¿verdad? Como la web, prospera o declina, vive o muere, dependiendo de si puede hacer la mayoría de las cosas que esperamos que la mayoría de las computadoras hagan.

Y esta idea la llamó teoría de la adyacencia de plataformas. Pero cuando construyes una meta plataforma como la web, debe seguir adoptando capacidades de las plataformas anfitrionas para mantener la adyacencia y asegurarse de que la brecha no sea demasiado grande. Pero cuando falla en hacerlo, ¿verdad? , esta brecha de relevancia crecerá más y más y habrá tantas capacidades que faltan allí. La gente deja de preocuparse por ello. Al usuario no le va a gustar, el desarrollador se irá.

5. LYNX: Bridging Web and Native Worlds

Short description:

Desafíos web al combinar fortalezas con capacidades nativas, LYNX aprovechando primitivas nativas para un desarrollo de UI más fácil, y acercándose al desarrollo de aplicaciones completas.

Aunque podríamos ofrecer la experiencia al alcance, a escala, muy rápido, pero la experiencia no es lo suficientemente buena, a nadie le gustará, entonces, ya sabes, todavía no va a ser la plataforma para la que estamos construyendo. Así que eso es, desafortunadamente, lo que la web ha estado sufriendo por un tiempo, y siempre cito a Tom Holmes, como, esta frase de su introducción inicial de React Native, es como 2015, cada vez que alguien intenta implementar widgets nativos con HTML, CSS y JavaScript, siempre se siente como una mierda. Quiero decir, hoy en día, está mejorando mucho. He visto a muchos ingenieros de diseño geniales que comenzaron a, ya sabes, recrear muchas cosas geniales. Pero, cuando se trata de algunas de las partes realmente complicadas, como, desplazamiento, especialmente, como, desplazamiento múltiple y gestos, gestos de varios dedos, eso comenzó a desmoronarse.

Y esto, herramientas como PhoneGap, Quo Java, React Native Flutter, estas herramientas, aparecieron, indican que la brecha de relevancia era demasiado grande. Así que nosotros, como desarrolladores web, tenemos que sacrificar algunas de las mejores partes de la web a cambio de esas capacidades necesarias de la plataforma nativa para que podamos, ya sabes, entregar las cosas reales. Y LYNX no es diferente. Comenzamos desde el lenguaje de la web y necesitamos ir más hacia lo nativo. Así que personalmente, creo que todas estas tecnologías están persiguiendo la misma estrella del norte, que es intentar alcanzar los tres puntos a la vez. Así que, LYNX realmente usa primitivas nativas, como vistas nativas. En LYNX, texto como vista de texto, imágenes, se renderizan en UI nativa, igual que React Native. Podrías tener vista de UI, vista de UI real y grupo de vista real.

Y uno de los ejemplos más frescos de este enfoque es ese vidrio líquido, ¿verdad? Al adoptar este enfoque, es mucho más fácil tener eso, básicamente gratis. El otro ejemplo es ese diseño muy complicado y costoso, como área de animación de múltiples columnas, cascada, como diferentes personas lo llaman de diferentes maneras. Es muy popular pero todavía es muy complicado hacerlo bien y ejecutarlo en la web. Con LYNX, porque usa primitivas nativas, puedes realmente tenerlo incorporado. Así que, en LYNX, es muy fácil. Solo declaras un tipo y lo tienes. La otra parte de las primitivas nativas son los módulos nativos, ¿verdad? Poder acceder a esas API a nivel de sistema operativo. Nuestra documentación solo te da un tutorial sobre cómo podrías construir almacenamiento local con Android share preference en iOS APIs y basado en la declaración compartida de TypeScript. Eso es genial, ¿verdad? Puedes tener esa capacidad.

6. LYNX: Enhancing Development Capabilities

Short description:

LYNX: Transición al Desarrollo de Aplicaciones, Elementos de UI Nativos y Rendimiento Mejorado

Pero si alguna vez has leído la documentación, puedes notar que mencionamos que LYNX no está listo para el desarrollo completo de aplicaciones todavía. Eso es porque LYNX es más como un motor. Deberías pensar en él más como Blink en lugar de Chromium, si sabes de lo que estoy hablando. Esa ha sido la mayor solicitud de características desde que lo hicimos de código abierto. Honestamente, no esperábamos que las cosas crecieran tan rápido y no estábamos súper listos para eso. Así que, estoy emocionado de compartir que a finales de este año, estaremos haciendo de código abierto más elementos de UI nativos un conjunto de componentes de UI avanzados como Swiper, ActionShare, TabBar, ViewPager, ese tipo de cosas.

Y eso no es todo. También haremos de código abierto el framework que TikTok ha construido sobre LYNX para soportar todas sus aplicaciones. Con eso, finalmente podrás construir aplicaciones teniendo todo este conjunto de herramientas. Es como las piezas que faltan ahí. Sí, no puedo esperar a verlo lanzado y ver lo que la comunidad comienza a construir alrededor de ello. Gracias. Gracias.

Así que ahora que hemos completado el panorama de las primitivas nativas, no es suficiente. Para ser verdaderamente nativo, también quieres un rendimiento similar al nativo, cercano al rendimiento nativo. Y nuestra salsa secreta, como una decisión arquitectónica muy notable que tomamos es que tenemos dos entornos de ejecución de JavaScript ejecutándose en dos hilos separados, los hilos de fondo y el hilo principal. Lo llamamos scripting de hilo de fondo, así que BTS, BTS, y scripting de hilo principal, MTS. Pero volveremos a eso más tarde. Cuando decimos rendimiento, me refiero a dos cosas. Primero, el rendimiento de carga. Internamente, con el mismo producto migrando a LYNX, se vuelve significativamente más rápido.

7. LYNX: Instant Rendering and Interactivity

Short description:

LYNX: Renderizado Instantáneo del Primer Fotograma y Mayor Interactividad

Y solo para ser claros, la versión web la estamos cargando desde archivos locales, no desde IO de red, así que estábamos midiendo el tiempo de renderizado, básicamente. Y estos son números promedio. En algunos casos, podemos ver cosas como diez segundos convertirse en un segundo, ese tipo de cosas. Así que es, sí, es solo un promedio. Así que es más fácil creer con tus ojos, en lugar de esos dígitos, supongo. Y puedes ver que es como el primer tutorial que mostramos en el sitio web, y así de rápido es. El primer fotograma casi aparece instantáneamente. Y esto es como el tres, 0.3 veces cámara lenta, y aún puedes ver que es como casi instantáneo.

Así que esta característica ganó su apodo internamente, antes de que incluso comenzáramos a pensar en el concepto. Y internamente, la gente comenzó a llamarlo Instant First Frame Rendering, o IFR. Y esa fue como la característica clave para que LYNX fuera ampliamente adoptado dentro de TikTok y cualquier otro producto. Realmente no tenemos tiempo para profundizar en ello, pero a un alto nivel, hace muchas cosas. LYNX ha sido un proyecto de varios años. Toma tu código fuente, ¿verdad?, y lo pre-renderiza, piensa en SSR, o el pre-renderizado parcial de Next.

js, lo pre-renderiza a un nivel más bajo de abstracción, que está más cerca de la estructura de HTML o las operaciones de árbol. Y luego el Prem.js, que es el motor de JavaScript que bifurcamos de Quake. js para ser más optimizado para LYNX, digamos añadiendo un nuevo GC y cambiando el FFI, ese tipo de cosas. Así que también tiene los beneficios de precompilar el código fuente en bytecode. Al tener esos dos niveles de preprocesamiento, en tiempo de ejecución, lo que realmente necesita hacer es solo la pequeña parte roja, esa pequeña flecha roja. Así que por eso el primer fotograma se renderiza tan instantáneamente. Si estás en React LYNX, obtendrás esto gratis, el compilador y el empaquetador simplemente lo harán por ti. No hay nada que necesites hacer. No hay API. Pero la segunda parte del rendimiento se trata de la interactividad, ¿verdad? Quieres que tu interacción se sienta ágil.

8. MTS: Man-Thread Scripting and Elm API Usage

Short description:

MTS: Man-Thread Scripting & Elm API Usage

Así que tienes el control total de ello. No es como algunos de los sistemas de animación preprogramados. Así que llamamos a esa característica MTS, Man-Thread Scripting. Vamos a echar un vistazo rápido al código para que puedas tener una idea. Así que en este ejemplo, se demuestra la diferencia entre tener el hilo de JavaScript en segundo plano para gestionar un juggable, versus tener el mantra para gestionar un juggable. Y con MTS, se mantiene perfectamente sincronizado con el desplazamiento nativo. Y la versión BTS se retrasa como un fotograma o así.

Y la API es como usar esta directiva mantra para marcar una cierta función que debe ser dividida en código y programada para el tiempo de ejecución del mantra. Y en ese tiempo de ejecución, tienes acceso a algunas de las API para obtener los nodos DOM, como nuestra versión de nodos DOM. Y puedes comenzarlo a envolverlo en el ref, por supuesto. Y puedes usar una API similar a DOM, la llamamos Elm API, para hacer algunas operaciones imperativas. Así que un saludo a Reanimator de Software Mansion y React Server Component, Next.js, por toda la inspiración. Así que sí, definitivamente tomamos mucha inspiración de ellos. Gracias.

Y si vienes del entorno web, MTS podría sonar un poco confuso, ¿verdad? Porque en la web, todo sucede en un mantra. La web ha sido históricamente de un solo hilo. Así que tiene que hacer todo el trabajo pesado. La desventaja es que cuando algo, ya sabes, está muy ocupado, entonces todo es lento, ¿verdad? Y es por eso que links quiere hacer esta diferencia. Al enviar dos tiempos de ejecución de JavaScript en dos hilos separados, podemos minimizar la carga de trabajo en el mantra al descargar más trabajo al hilo de JavaScript en segundo plano siempre que sea posible. Pero no es como si no tuvieras web worker en la web, ¿verdad? Tenemos web worker desde hace años.

9. MTS: Run-Time Enforcement and CSS Support

Short description:

MTS: Run-Time Enforcement and CSS Support

Y de hecho, el equipo de Chrome dev rel ha abogado por algo similar. Como ellos lo llaman arquitectura de hilo bajo demanda, OMT. Pero el problema es que nunca realmente despegó en el ecosistema web principal. Creo que la razón es que estamos demasiado acostumbrados al modelo de un solo hilo y es simplemente súper conveniente y fácil de usar. Así que es bastante complicado para todos averiguar manualmente, de acuerdo, qué código debería ejecutarse en qué tiempo de ejecución y cómo hacer la sincronización. ¿Verdad? Hay mucha carga mental en la que pensar. Así que lo que hicimos es que no solo proporcionamos dos tiempos de ejecución. También impusimos cómo deberían usarse. A nivel de APIs, como qué tipo de API exponemos a ese tiempo de ejecución, hasta cómo los frameworks pueden diseñarse para imponer esas imposiciones estáticas, como la seguridad concurrente y cómo sincronizar una UI, ese tipo de cosas.

El BTS es donde va la mayor parte del código de usuario, como la re-renderización, la reconciliación, efectos secundarios como obtener algo, y el procesamiento de datos. Y MTS está reservado para el acceso privilegiado y sincronizado a la UI, ¿verdad? Puedes, por ejemplo, el IFR es un pase de código MTS, y puedes hacer MTS. Y esa también es una tarea de UI de muy alta prioridad. Y así es como los hacemos muy eficientes, porque no hay nada compitiendo con ello. Y también por eso MTS es un concepto en primer lugar. Nuevamente, no entraremos en demasiados detalles, pero la arquitectura nos da muchas oportunidades. Probablemente lo guardaré para la próxima charla.

Pero realmente se reduce a un principio. Usa el hilo principal de manera más intencionada y responsable. Solo accede a él cuando sea necesario. Y hemos construido esta plataforma y framework para ayudarte a llegar allí. Así que para concluir, intencionalmente repensamos y cambiamos algunas de las prácticas web existentes, pero no porque no amemos la web, sino más bien porque queremos llenar el vacío y acercar esta comunidad al ecosistema nativo con relevancia nativa. Pero hay una cosa más, ¿verdad? Algo a lo que realmente queremos decir sí a la web. Y esa es la comunidad web. Una cosa de la que estoy súper, como, todo el equipo está realmente orgulloso de Lynx es lo avanzado que soporta muchos efectos visuales de CSS, ¿verdad? Tienes gradientes y máscaras, rutas de clic, incluso añadimos curva de super elipse como extensión. Así que la mejor parte de este enfoque es que no necesitas empezar desde cero. Puedes reutilizar código del ecosistema web, ¿verdad? Porque las tecnologías de UI, cuando lo pienso, en su núcleo, se trata de entregar un diseño y producto excepcionales, ¿verdad? No deberíamos perder tiempo reconstruyendo todo una y otra vez. Así que si podemos compartir, como, activos y ecosistema, eso sería lo mejor. ¿Qué tal Tailwind? ¿Verdad? Ha sido la mejor, como, biblioteca de estilos más popular, especialmente en la era de la IA. Porque Lynx soporta CSS de forma nativa, puedes usar herramientas como SASS, módulo CSS, e incluso Tailwind. La única cosa a tener en cuenta es que nuestra cobertura de características CSS es definitivamente diferente de todos los navegadores.

10. MTS: Tailwind Integration & Library Support

Short description:

Experimentando con Tailwind e Integración de Bibliotecas

Así que estamos experimentando con mantener un preset de Tailwind, y definitivamente damos la bienvenida a las contribuciones allí. Guanyu, uno de los ingenieros de diseño del equipo, pudo portar Shed-CN UI, Twig-CN Daisy UI, y construir un generador de temas para Lynx. Puedes verlo desde allí. Y el código es básicamente solo Tailwind puro. Y usas la misma variable CSS, las mismas clases de Tailwind, la misma configuración de Tailwind. Simplemente funciona. Sí, va a ser de código abierto, así que definitivamente revisa su, Herd, para el trabajo.

¿Y qué hay de las otras bibliotecas muy populares en el ecosistema web? Motion, ¿verdad? Motion. Soy un gran fan de Motion. ¿Cuántos de ustedes son fans de Motion? Es tan bueno. Así que Yang, también conocido como Fordream en Twitter, experimentó con llevar Motion a Lynx. Y además de ajustar algunas de las API del DOM, porque no tenemos exactamente la misma firma, todo el núcleo de Motion simplemente funciona. Solo le tomó uno o dos días hacer esa demo. Espera, probablemente debería... Bien, ahora ves la demo. Sí, y ese es el código.

Cuando diseñamos MTS por primera vez, naturalmente queríamos algo de bajo nivel y más imperativo, porque queríamos dar a los autores del framework más control. Pero resulta que es realmente bueno integrarse con este tipo de ecosistema universal, como bibliotecas que usan JavaScript puro. Y finalmente, la web no se limita a una sola biblioteca, ¿verdad? La comunidad puede construir las bibliotecas que quiera en el framework. Y queremos abrazar ese mismo espíritu en Lynx. Por eso decimos que queremos democratizar las tecnologías multiplataforma en primer lugar. No tengo tiempo, así que solo voy a pasar por esto rápidamente. Vue ha sido uno de los frameworks más solicitados, y Evan también compartió esta idea de tener Vue nativo, y están comenzando a tener algo de participación y contribución de la comunidad. Y sí, eso es muy emocionante. Otra cosa es Svel. Rich Harris también mencionó Lynx en su charla muy reciente en Svel Summit, y el tema principal está liderando este esfuerzo, y si estás interesado, definitivamente habla con ellos. Es súper inspirador ver que eso suceda. Pero personalmente, estoy más sorprendido de ver esto. ¿Cuántos de ustedes pueden reconocer este logo? No muchos, supongo. Es Haskell.

11. LYNX: Embracing Haskell & Cross-Platform Thinking

Short description:

Abrazando Haskell en Lynx y Fomentando la Creatividad de la Comunidad

Es uno de los lenguajes más extraños del mundo, muy utilizado por la academia. Soy fan de la programación funcional, por eso sé un poco al respecto. Pero sí, alguien de la comunidad llevó un framework de Haskell a Lynx, y eso funciona. Sí, ese es el código de Haskell. Así que ese es el poder de, diría yo, abrazar algo de una manera muy abierta. Sí, esa es la comunidad web. Esa es la comunidad web abierta, diría yo.

En este punto, espero que la respuesta a qué es Lynx sea un poco más clara para ti. Así que sí, reservamos el lenguaje porque queremos preservarte. Me he dado cuenta de que lo que hace increíble a la web no es solo la tecnología. Se trata de esta comunidad que es tan increíblemente creativa. ¿Ves cuántas personas están recreando liquid class en los Estados Unidos? Eso es una locura. Realmente queremos que tú... Y también, de alguna manera, ha creado una generación de desarrolladores que pueden pensar en multiplataforma por defecto, porque venimos de allí.

Así que realmente queremos que pienses en Lynx espiritualmente como una web alternativa para el desarrollo de aplicaciones. Para que tú, como desarrolladores web, puedas construir con confianza. La razón por la que divergemos es porque queremos darte este nuevo vocabulario, nuevos primitivos para alcanzar las experiencias nativas y el rendimiento nativo. Y tal vez una mejor pregunta a hacer no es sí o no, es cómo podemos derribar mejor el muro entre la web y lo nativo para que juntos podamos hacer más. ¿Es fácil pasar de React Native a Lynx? Oh, tengo el micrófono. Sí, creo que sí.

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced 2022React Advanced 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
Workshop
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas