Fetch Once, Render Everywhere: React Server Components in Expo Router

Cuando React Native fue anunciado por primera vez hace casi 10 años, tenía una premisa muy simple, que era tomar lo bueno de la web. A partir de este concepto básico, React Native se ha convertido en la forma más impactante de construir aplicaciones del lado del cliente. Si avanzamos rápidamente hasta ahora, React Native impulsa cientos de las aplicaciones más utilizadas en la lista de tendencias de la tienda de aplicaciones todos los días. Realmente no muestra signos de desaceleración. Entonces, ¿a dónde vamos desde aquí?

Soy Evan Bacon, un ingeniero y el creador de exporouter. Es el primer mecanismo de enrutamiento basado en archivos para construir aplicaciones de React que se ejecutan tanto en la web como en plataformas nativas desde el mismo código base. Se siente como magia. Simplemente creando archivos en el directorio de la aplicación, exporouter crea instantáneamente una navegación robusta tanto para su aplicación nativa como para su sitio web. Utiliza API web familiares como link y href para moverse entre rutas, y también es un sistema de enrutamiento anidado, lo que le permite organizar las rutas en carpetas para establecer elementos de la interfaz de usuario compartidos como barras de pestañas, encabezados, cajones, etc. También tiene soporte desde el primer día para el nuevo compilador de React, gracias a nuestra colaboración con el equipo de meta. Esto significa que ya no es necesario escribir use memo o use callback en sus aplicaciones, lo que conduce a una experiencia mucho mejor tanto para los usuarios como para los desarrolladores. Instalaremos el compilador de forma predeterminada en la próxima versión de Expo CLI, para que puedas activarlo y desactivarlo. Es realmente genial, porque puedes desactivarlo sin tener que reiniciar el servidor de desarrollo. Muy elegante. Hay muchos aspectos en el desarrollo de aplicaciones y Expo proporciona soluciones universales para la mayoría de ellos. Pero todas estas soluciones están dirigidas principalmente a la construcción de aplicaciones del lado del cliente. Y solo se puede hacer tanto con el cliente por sí solo. Las cosas se vuelven realmente interesantes cuando se incorpora la obtención de datos y el renderizado en el servidor.

Desde una perspectiva de datos, la mayoría de las aplicaciones nativas funcionan esencialmente como sitios web de una sola página. Esto es obsoleto ahora. Esto significa un rendimiento más lento y una conectividad sustancialmente menor. Aplicaciones nativas populares como Lyft, Netflix, Reddit y muchas otras utilizan alguna forma de interfaz de usuario dirigida por el servidor en sus aplicaciones. Pero es muy complicado de configurar y, como resultado, está fuera del alcance de la mayoría de los desarrolladores de aplicaciones.

Lo hacen para realizar pruebas A-B y renderizar la interfaz de usuario con un alto grado de variación basado en todo tipo de criterios, como el tipo de usuario, la ubicación, la moneda que utilizas, la temperatura en tu región, muchas cosas diferentes. Los enfoques varían en muchas pequeñas formas, pero comparten una arquitectura común, como el uso de JSON como representación estática de la interfaz de usuario. Piensa en este JSON como HTML, pero para entornos de ejecución nativos personalizados. Y podemos ver un patrón aquí a partir de la cantidad de aplicaciones que utilizan todos estos sistemas muy similares. Y ese es que la interfaz de usuario dirigida por el servidor es un sistema importante para construir aplicaciones, pero no es muy accesible para los desarrolladores independientes. Todos estos grupos tienen estos frameworks. No son de código abierto.

Entonces, me hizo pensar. ¿Qué pasaría si pudiéramos hacer que la interfaz de usuario dirigida por el servidor esté disponible para todos? Pero también la versión más potente que se haya imaginado. Ese es el objetivo de ExpoRouter. Ahora, para hacer esto, estamos introduciendo componentes de servidor de React, el enfoque más avanzado para el renderizado en el servidor en todas las plataformas, iOS, Android, Web y cualquier otra, a través de ExpoRouter. Esto es una tarea enorme. Requiere mejoras en muchas bibliotecas diferentes en todo el ecosistema universal. Nuestra implementación oficial de componentes de servidor de React para aplicaciones universales está actualmente en desarrollo inicial. Pero vale la pena compartirlo, porque el progreso es realmente emocionante. Y francamente, es bastante inspirador ver de lo que son capaces las aplicaciones cuando utilizan técnicas de renderizado modernas de la web.

Ahora, hay mucho en los componentes de servidor de React, como acciones del servidor, enrutamiento concurrente, vuelos, etc. Pero pensé que sería más fácil mostrarles una demostración de lo que es posible. He estado muy interesado en la IA, al igual que todos. Pero históricamente ha sido muy difícil construir aplicaciones nativas de IA de alto rendimiento. Y esto se debe a que la transmisión y el renderizado en el servidor son aspectos críticos para trabajar con un LLM. Pero con componentes de servidor de React y ExpoRouter, en realidad es muy, muy fácil trabajar con IA. Aquí tengo una aplicación similar a un chat GPT que envía una acción de servidor de React y transmite texto nativo desde el servidor. Así que piensa en esto como una aplicación similar a un chat GPT, ¿verdad? Todo lo que regresa del servidor se renderiza en el servidor, aunque. O al menos parcialmente renderizado en el servidor, porque también tenemos componentes del cliente.

Entonces podemos preguntar algo como, ¿deberían las aplicaciones nativas ser renderizadas en el servidor? Y luego nos devolverá algo sobre cómo las aplicaciones nativas normalmente no se renderizan en el servidor, y cómo eso es más una cosa de la web. Porque todo esto es bastante nuevo.

Ahora, para crear la acción del servidor, tenemos otro archivo que define useServer en una función. Y esta función se extraerá en el paquete del servidor, por lo que nunca se enviará al cliente y se convertirá en un punto final en el cliente, que podemos versionar y hacer específico de la plataforma. Y podemos renderizar texto nativo aquí, texto nativo de React, dentro de un componente recursivo que itera el flujo.

Un aspecto realmente novedoso de este enfoque del servidor en estas acciones del servidor es que se agrupa varias veces según la plataforma, de modo que si el dispositivo iOS lo solicita, muestra la versión del paquete del servidor para iOS, y si muestra la versión de Android, la versión de Android. Y así es como sabe qué texto usar, ya sabes, si es para iOS o Android web.

Ahora, cuando un cliente realiza una solicitud, se envía de vuelta una carga útil RFC con suspense para mantener el flujo abierto. Tiene la representación estática de nuestro JSX raíz cargado en su interior, una URL al cliente necesario para que este RFC se cargue, porque dividimos el paquete, y se puede cargar y recuperar de forma dinámica, y luego el elemento de texto actualmente renderizado. A medida que avanza el flujo, se renderizará más contenido y React actualizará el árbol con las nuevas visualizaciones, por lo que si dijo, ya sabes, una vez, y luego una vez hace mucho tiempo, entonces Y finalmente, el flujo se completará y React cerrará la conexión.

Y esto es solo una parte de un rompecabezas mucho más grande, pero es muy poderoso, porque significa que podemos usar cualquier JavaScript arbitrario, siempre que los enlaces nativos ya estén en nuestro cliente objetivo, por lo que es como crear HTML personalizado en vivo mediante el uso de directivas de cliente y servidor en todas partes. Así que te das cuenta de que aquí no hay código nativo. Es solo JSON, y está delimitado por saltos de línea, por lo que se transmite. Es bastante genial. Y esto es solo lo básico. Podemos escalar este concepto a cualquier interfaz de usuario nativa.

Entonces hagamos algo un poco más emocionante. Cuando se demostró por primera vez React Native, mostraron una aplicación de películas verdaderamente nativa. Así que pensé que sería divertido incorporar películas en este prototipo de alguna manera. Para inspiración, miré lo que ofrecían las mejores aplicaciones de IA de última generación. En el chat GPT-4, cuando pides películas, renderiza una lista con viñetas de markdown después de consultar a Bing. Lo comprobé con GPT-4-0, lo mismo. En Gemini, hace lo mismo, pero con algunas imágenes en línea y algunos enlaces en vivo. Así que básicamente solo envía markdown y luego el markdown se formatea con un formateador de markdown. Ese es su método de transporte.

Y en Xplorerc, podemos hacerlo mucho mejor. Podemos hacer coincidir cualquier consulta para buscar películas, consultar una base de datos de películas, servir una tarjeta de película nativa interactiva, transmitirla al cliente con cosas como menús de interfaz de usuario, cualquier tipo de nueva vista nativa que se envíe y esté disponible en ese dispositivo. Luego podemos volver a enviar más información. Tenemos una acción del servidor que obtiene los miembros del reparto y los miembros del equipo de una película. E incluso podemos crear eventos de calendario donde tenemos una tarjeta que luego consulta los permisos del calendario y abre el cuadro de diálogo del calendario.

Verdaderamente mágico. ¡Gracias! Va a ponerse un poco más interesante, ¡no te preocupes! En general, una experiencia de usuario mucho mejor, mucha menos lectura. Pero aún más emocionante que esta vanguardista experiencia de usuario es la experiencia del desarrollador, porque solo se necesitó un poco más de código que el ejemplo de texto. Aquí utilizamos un límite de suspense para mostrar un cargador de esqueleto en un componente asíncrono, se obtienen los datos y se renderizan las películas, luego se transmiten al cliente.

Te darás cuenta de que, aunque este es código universal de React, hay React Native en él, es solo código de React. Es como si este código de React funcionara en todos los dispositivos. Es muy emocionante. Ahora, para hacer que las tarjetas sean interactivas, simplemente creamos un componente de cliente envolvente que tiene un poco de estado en su interior. La lógica de JS utilizada aquí se separará del paquete principal y se obtendrá condicionalmente cuando rendericemos esta tarjeta por primera vez. Por lo tanto, en las plataformas nativas que utilizan el motor Hermes, dividimos el paquete en un formato de bytecode optimizado, lo que significa que se inicia de inmediato y se mapea en memoria. No es necesario analizar ni nada. Es bastante bueno. Básicamente, significa que estamos entregando las mejores estrategias de los mejores marcos web, pero ejecutándolas en un entorno de JavaScript personalizado que lleva la plataforma en tu mano a sus límites.

Porque después de saltar por todos los aros necesarios para que el renderizado en el servidor funcione, no solo estamos renderizando en el DOM. No, en cambio, obtenemos vistas realmente nativas, como si la aplicación estuviera escrita con herramientas de primera mano. Tenemos un desplazamiento suave, comportamientos de plataforma de alto rendimiento, se renderiza de forma progresiva, las mejores prácticas y realmente ilimitado. ¿Está lloviendo aquí? De acuerdo, perfecto. Pensé que solo era yo. Y, por supuesto, la mejor parte es que funciona así en todas partes. En todas las plataformas. Por lo tanto, Expo admite iOS, Android y web. Tiene soporte multiplataforma de Apple, algunos Mac, Vision Pros. Tengo esto funcionando en todas las computadoras de mi casa. En realidad, es bastante útil porque más tarde te mostraré que hace cosas de Spotify, y hay una aplicación de Spotify. Ahora nuestro enfoque está en construir la mejor experiencia posible, lo que significa nativo en iOS y Android, pero también significa que debemos aprovechar la capacidad que tiene la web para acceder rápidamente al contenido, donde puedes enviarle a cualquier persona en el mundo un enlace, pueden abrirlo y luego ver de inmediato al menos una vista previa de tu experiencia completa. También tenemos soporte web allí. Y luego cada enlace es completamente enlazable porque es un enrutador universal basado en archivos. Entonces, si tienes la aplicación instalada y te envían un enlace, se abrirá la aplicación en esa ubicación exacta. Se siente increíble. Pero sigo hablando de cómo se siente y cómo se ve.

Permíteme mostrarte en vivo, conectado a mi servidor de desarrollo en la red Wi-Fi de la conferencia. Creo que será realmente genial. Aquí tengo el servidor de desarrollo en ejecución. Voy a aumentar un poco el tamaño de fuente. Así puedes ver que tenemos code transmitiéndose aquí. Lo limpiaré. Y luego aquí, tengo una vista previa de mi aplicación en QuickTime en mi teléfono. También tiene la versión beta de iOS 18 porque pensé en cambiar un poco las cosas. Eso significa que también podemos cambiar el ícono de la aplicación para que sea verde. Características nuevas realmente importantes.

Entonces vamos a abrir esto. Lo recargaré para que esté actualizado en el servidor. Verás que obtiene todas las diferentes acciones del servidor en segundo plano. Y esta es la aplicación. Podemos decir `listar nuevas películas`, tal como lo hicimos en el video. Cerraré esto aquí. Y luego veamos. Sigo moviendo esto. Sí, así tenemos nuestras vistas nativas. Podemos seleccionar una de ellas. Y notarás en segundo plano que se obtuvieron más data y se renderizaron más vistas de menú de la interfaz de usuario UI aquí. Es una vista que ni siquiera pensarías que se podría renderizar en el servidor. La estamos renderizando en el servidor. Lo estamos haciendo todo. Así que Justice Owens o Justice Smith, tenemos algunas películas más aquí. Selecciona una, crea un evento. Es bastante rápido, bastante ágil. Es un servidor de desarrollo. Pero también estoy emulando tiempos de espera del servidor allí. Y luego abre un evento del calendario, ya sabes, créalo, lo que sea.

Oh, tenemos un poco de diversión con la alineación de texto allí abajo. Bien, hagamos algo más. Digamos, sabes, muéstrame algunas canciones pop. Y luego esto mostrará una tarjeta que tiene a Spotify allí. Y esto tiene inicio de sesión. Así que puedo cerrar sesión, volver a iniciar sesión. No sé por qué acabo de hacer eso. ¿Qué pasaría si no iniciara sesión?

De acuerdo, podemos iniciar sesión de nuevo. Podemos ver varias músicas aquí. Solo voy a seleccionarla. Se reproducirá music, pero tengo la sensación de que eso no se reproducirá bien mientras estemos reproduciendo en YouTube. ¿Qué más podemos hacer? Podríamos decir, sabes, ¿cuál es el número de teléfono de Charlie? Ahora esto mostrará una tarjeta que enviará información que luego puede consultar mis contactos nativos. Así que no tengo que enviar mis contactos al LLM para que los filtre. Puede, ya sabes, GDPR, puede enviar code a mi dispositivo para hacer ese filtrado, lo cual es bastante genial.

No, no queremos abrir eso. Tengo a mis Charlies aquí. Puedo seleccionar a Charlie Cheever, enviarle un mensaje. Dirá, sabes, ¿qué quieres enviarle? Explica cómo funciona JSX. Haz eso. Luego tal vez, de acuerdo, realmente va en serio. De acuerdo, un poco de markdown. También estamos formateando un poco de markdown allí. De acuerdo, genial. Solo voy a encolarlo, sí, enviarlo, porque imagino que va a ser como, ¿quieres que diga, de acuerdo, wow, realmente va. Sí, claro, envíalo. Bien, y ahora seleccionará este texto. Veamos, todavía lo tenemos ejecutándose en segundo plano aquí, ¿verdad? De acuerdo, bien. Oh, de acuerdo, ahí está. Ahora ha compuesto un mensaje para Charlie. Él es mi jefe.

Él es uno de los co-creadores de Expo. Puedo enviarle eso directamente. Y sí, así de fácil, estamos enviando mensajes.

¿Qué más podemos hacer? Podríamos decir, muéstrame cosas para hacer en la ciudad. Arreglemos eso. Y ahora va a, quiero decir, mira todos esos data que acaba de obtener en segundo plano. Así que está obteniendo todos esos data en la acción del servidor. No tenemos que preocuparnos por optimizarlo y tener algo, porque esto es el middleware, y luego envía la cantidad mínima de JSX requerida, lo que significa que estamos optimizando nuestras solicitudes de red.

Y aquí tenemos un componente cliente para el mapa. Pero este carrusel se renderiza en el servidor. Así que podemos desplazarnos suavemente por todas estas ubicaciones en Ámsterdam, ¿verdad? Es bastante genial. Así que tal vez seleccionemos una, digamos obtén el clima, porque sabe, de nuevo, de qué estamos hablando. Supongo que Ámsterdam, ¿de acuerdo? Podemos tener algunas interacciones nativas allí. Podemos decir reservar un Uber a esta ubicación. Reservar un Uber, solicitar un Uber, abrirme en la aplicación de Uber. Pero no vamos a solicitarlo realmente. Dice cosas como que son 28 euros, 25 centavos. Así que puedes decir convierte 28 euros a USD. No puedo hacer la conversión en mi cabeza. En realidad, eso fue bastante fácil. Probablemente debería haberlo podido hacer. $31. Pero ahora, no tengo un componente de conversión de moneda incorporado, por eso me envió solo texto. Si le pido un componente, simplemente escribirá el componente por mí, lo renderizará en el servidor y enviará texto, o al menos eso espero. Está ejecutando un servidor de desarrollo en vivo. Así que podríamos decir crear un componente para convertir moneda. Ahora se va a renderizar en segundo plano aquí. O al menos eso espero. Espero que sí. Veamos.

Aquí está. Muy bueno. Así que aquí podemos ver todo el texto que acaba de crear. Le pedimos al GPT que renderice este componente. Sabe cómo crear un componente de React Native, lo ejecutamos, lo transmitimos. Así que ahora tenemos un convertidor de moneda.

Podríamos decir, ¿sabes, cuánto son 100 euros en USD? Inmediatamente 112. Así que estamos generando dinámicamente. Básicamente, mi punto aquí es que puedes hacer lo que quieras cuando introduces el renderizado en el servidor en una aplicación nativa. Incluso podríamos decir, sabes, crea un componente de juego de tic-tac-toe. Probablemente no necesitaba ese componente allí. Creo que lo entendió. Y luego lo renderizamos.

Entonces, de nuevo, lo que está sucediendo, como lo que vemos aquí, es que tenemos esta hermosa vista de texto que viene hacia abajo. Esto se transmite. Tengo que asegurarme de agregar use client para obtener componentes interactivos. Oh, okay. Bueno, esto ya está hecho. Es bastante bueno que esto siempre funcione. Puedo hacer... Veamos. Vamos siguiente jugador O. Ok, tiene todo el cambio ahí. Intentemos ganar rápidamente. X. Ganadores. X. Esto es bastante bueno para mí personalmente porque cuando hice mi primera entrevista en una empresa fang, me pidieron que implementara un juego de tic-tac-toe en Swift. Y aquí, simplemente lo hizo automáticamente. Así que, bastante genial.

Muy bueno. Si volvemos aquí, quiero decir, esto es Expo CLI. Si presionamos la tecla W, se abrirá en el navegador. Se abrió en el navegador, pero en esta otra ventana. Así que aquí lo tenemos funcionando en el navegador. Lo mismo. Lista algunas películas. Tenemos las películas funcionando como antes. No voy a hacer toda la demostración de nuevo. Pero entiendes la idea. Quiero decir, incluso se ejecuta aquí en mi escritorio también. Lo ejecutamos aquí en el escritorio, ya sabes, así obtengo la película, lista algunas películas. Sí, es muy bueno. Soy un gran fan.

Muy bien, volvamos a la presentación aquí. Eso es lo que parece cuando llevamos el estado moderno del renderizado en el servidor en AI y los llevamos universalmente a cada plataforma. Por supuesto, ahora comienza a llover. Deslizándose sin problemas entre el servidor y el cliente en un framework basado en archivos completamente tipado. Solo tenemos que configurar las API para una sola plataforma y esa es el servidor. Haciendo que sea más fácil que nunca construir en todas las plataformas. De hecho, por eso pude compartir tanto. Porque estos son solo primitivas base. Toda la funcionalidad se ejecuta en el servidor. Mientras que una aplicación nativa tradicional generalmente ejecuta toda esa lógica en el cliente. Haciendo que sea aún más fácil que nunca hacer que React Native sea perfecto. Todas las cascadas, solicitudes paralelas, son manejadas por nosotros como parte de los React server components. Esto no es solo un renderizado en el servidor cualquiera, estamos utilizando lo mejor que la web tiene para ofrecer. Los secretos están asegurados en el servidor, el código cliente estático se elimina automáticamente del paquete. Lo que significa que solo tienes que agregar algo de code y si se puede eliminar en tiempo de compilación, se eliminará en tiempo de compilación. Por primera vez en la historia.

Hay toneladas y toneladas de nuevos beneficios. Demasiados para mencionar. Simplemente redefine lo que es posible con nuestros dispositivos móviles en nuestras manos. Y habilita nuevos tipos de aplicaciones que se pueden construir en tiempos récord. Entonces, la aplicación que acabas de ver se ejecuta en Expo SDK 51, lo que significa que todo el código nativo está disponible ahora mismo. Esta es solo una aplicación de Expo construida sobre eso.

React 19, nueva arquitectura, todo eso está disponible. El renderizador en el servidor real, soporte de primera clase en Expo Router, aún está en progreso. Trabajamos en ello activamente. Como dije, requiere que abra solicitudes de extracción en todas las demás bibliotecas que puedas usar, si avanzamos rápido, tendremos una versión beta temprana para finales de este año. Considera esto como un RFC. ¿El renderizado en el servidor es algo que quieres ver en aplicaciones nativas? Creo que sí. Me encanta usar esto. Me encanta... Quiero decir, es un cambio de juego, para ser honesto. Y, por supuesto, siempre estoy buscando ingenieros talentosos para unirse a mi equipo. Entonces, si estás interesado en liderar el futuro del desarrollo de aplicaciones, contáctame en X. Soy Evan Bacon, y esto ha sido Componentes Universales del Servidor en Expo Router. Gracias. Muchas gracias por tu increíble charla. Ahora, quiero mencionar algo. Se suponía que debías estar aquí. Quiero decir, no pudiste estar aquí. Pero el año pasado, tuvimos los Premios de Código Abierto de React en 2023, y una cierta herramienta llamada Expo Router en realidad ganó el premio Productivity Booster, y no estabas aquí para recoger eso. ¿Podemos dar un sí, un aplauso a Evan por Expo Router ganando el premio Productivity Booster en 2023? Wow. Eso es hermoso. Gracias. Es un sí, ellos, y justo a tiempo. Muy bien, tenemos que pasar a las preguntas, porque cuando digo que Slido está enloqueciendo, está enloqueciendo.

Puedo ver la lista. Oh, hombre. Tienes algunas buenas preguntas ahí arriba. Hay mucho. Sé que no podremos responder a todas, así que definitivamente puedes preguntarle en la sesión de preguntas y respuestas.

Vamos a empezar con la primera. Esto es muy emocionante. Es increíble. Pero, ¿generar los paquetes en el servidor está cubierto por las políticas de la tienda de aplicaciones? Esa es una pregunta fantástica. Sí. Sabes, lo que sucede con el RFC es que no enviamos ningún code nativo. Y las tiendas de aplicaciones tienen una política que prohíbe cambiar el contenido de tu aplicación, como el contenido aprobado, el comportamiento aprobado. Obviamente, no pueden prohibir la capacidad de hacer solicitudes de red, de lo contrario, aplicaciones como Facebook y Twitter no funcionarían. Y las aplicaciones de hoy en día tienen OTA, tienen vistas web, puedes cambiar las cosas dinámicamente. Y si cambian el comportamiento aprobado, se rechaza. Eso es posible aquí. Es posible utilizar APIs de pagos para cosas no legales. Pero ahora puedes hacerlo de manera mucho más fácil y a una mayor velocidad. Otra cosa es que las tiendas de aplicaciones... Hay muchas configuraciones de compilación que no se pueden cambiar en tiempo de ejecución. Esto se refiere a acceder a contenido o permisos de calendario. Con estas cosas, si envías tu aplicación a la tienda, ellos revisarán y verán, por ejemplo, si puedes acceder a la solicitud que dice que quieren usar tus contactos. Y si no puedes, pueden deducir que estás ocultando funcionalidad y rechazarán ese binario. Por lo tanto, existen políticas establecidas que esto no valida. Pero aún así debes usarlo de manera responsable. Como la mayoría de las APIs. Úsalas de manera responsable.

Estoy totalmente de acuerdo. La gente está muy emocionada por la demostración. Me encanta la demostración. ¿Estará disponible el código code fuente? ¿Podemos tenerlo y ejecutarlo nosotros mismos? No en este momento, sin embargo.

Pero sí, estamos activamente... Así que desde que lo revelé por primera vez en la React Conf, he estado dividiendo la rama y luego abriéndola en el repositorio de Expo. Así que puedes ver todo el progreso que estoy haciendo. GitHub slash Expo. Está en el directorio de aplicaciones. Y sí, simplemente lo estamos fusionando constantemente. Pero tenemos que hacerlo poco a poco.

Muy bien, así que sigue observando en GitHub y en su Twitter. Sí, lo tuitearé seguro. Y definitivamente, podrás tenerlo en tus manos.

La siguiente pregunta es sobre los componentes del servidor en dispositivos móviles. ¿Y por qué los necesitas cuando el tamaño del paquete y la transferencia realmente no importan? ¿O esto solo es para React Native, como en la web? Esa es una buena pregunta. Esperaba que mi charla hubiera respondido esa pregunta. Veamos. Componentes del servidor en dispositivos móviles con un tamaño de paquete... Bueno, el tamaño del paquete realmente importa mucho. El tamaño del paquete inicial no importa tanto, porque tenemos el bytecode de Hermes, que significa que hacemos todo el análisis de antemano y luego lo mapeamos en memoria al instante. Pero si estás dividiendo fragmentos y cargándolos, todavía hay un costo de red que se debe pagar. Y aún tienes que esperar. Así que funciona de manera similar a la web. La misma práctica. Y lo que es realmente importante aquí es que cosas como la política de división de paquetes y los métodos de obtención y renderizado de data no son code que quieras hacer varias veces en una base de código compartida. Estas son las partes que realmente quieres compartir. Cosas como UI pueden ser más universales. Así que sí, pregunta fantástica, pero es muy relevante en dispositivos nativos.

No, seguro, seguro. Y esta pregunta se trata más de cómo construiste la UI. ¿La AI generó toda la UI? Sé que hubo momentos, por ejemplo, donde deliberadamente se generó o creó un componente, seguro. ¿Y el resto? ¿También fue creado por ella? Sí. Así que la mitad de la diversión aquí es que puedes crear tus propios componentes.

Entonces, cosas como el componente de películas era un componente predefinido, y luego al final, donde se genera y puedes ver el code encima de él, todo eso es generado por la IA. Así que eso no está guionizado, y no tenía idea de si realmente se ejecutaría o funcionaría. Ya lo había hecho una vez antes, así que estaba seguro. O si no funcionaba, podría intentar solucionarlo o hacer alguna broma sobre la lluvia. Sí, parte de eso lo fue, pero los componentes generados son difíciles de estilizar para que se vean realmente bien y para esto, solo quería que todo se viera muy bien. Y luego viste al final, era solo un botón y luego una caja de texto sin estilo. Así que, sí.

No, seguro. Muy bien, tenemos otra pregunta, que es especialmente con IA, no siempre sabes con certeza qué va a crear. Sí. Entonces, ¿cómo sabes que la IA no devolverá code o un componente o algo que vaya en contra de las políticas de la tienda de aplicaciones o algo sospechoso que no quieres que suceda? Otra gran pregunta. Realmente están en ello hoy. Sí, esto podría haber sido la singularidad. Imagínate eso. Podríamos hacer que genere cualquier cosa y comience a transmitir code. Sí, no, tienes acceso al code en el servidor antes de ejecutarlo, por lo que podrías ejecutarlo en un entorno contenerizado y ver si accede fuera del sandbox. Apple también tiene sandboxing para su code, lo que evita que simplemente envíes code nativo por el aire. Por lo que puedes confiar en diferentes capas de seguridad. Pero también esta es solo una demostración básica de IA. El punto clave son las cadenas que representan code nativo, lo que significa que puedes construir cualquier tipo de aplicación que desees y puedes construirla mejor que cualquier otra aplicación que hayas visto. Increíble. Y me encanta esta última pregunta. No sé si realmente es una pregunta, más bien una afirmación de que esta es la aplicación al estilo de El Señor de los Anillos. Una aplicación para gobernarlas a todas. Tenemos un increíble orador que gobierna todo ExpoRouter. ¿Podemos aplaudir a Evan Bacon?