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

Cuando React Native fue anunciado por primera vez hace casi 10 años, tenía una premisa muy simple, que era web the good parts. A partir de este concepto básico, React Native ha crecido hasta convertirse 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 cada día. Realmente no hay señales 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 plataformas web como nativas desde la misma base de código. Se siente como magia. Al simplemente crear archivos en el directorio de la aplicación, exporouter crea instantáneamente una navegación robusta tanto para tu aplicación nativa como para tu sitio web. Utiliza APIs web familiares como link y href para moverse entre rutas, y también es un sistema de enrutamiento anidado, permitiéndote organizar rutas en carpetas para establecer una interfaz de usuario compartida como barras de pestañas, encabezados, cajones, etcétera. Y también es un... 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 necesitas escribir use memo o use callback en tus aplicaciones, lo que lleva a una experiencia mucho mejor tanto para los usuarios como para los desarrolladores. Instalaremos el compilador por defecto 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. Realmente 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 principalmente dirigidas a construir aplicaciones del lado del cliente. Y hay un límite en lo que puedes hacer solo con el cliente. Las cosas se ponen realmente interesantes cuando incorporas la obtención de datos y el renderizado del servidor.

Desde una perspectiva de datos, la mayoría de las aplicaciones nativas operan esencialmente como sitios web de una sola página. Lo cual es ahora datos antiguos. Esto significa un rendimiento más lento y sustancialmente menos red. Aplicaciones nativas populares como Lyft y Netflix, Reddit, y muchas otras utilizan alguna forma de UI impulsada 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.

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

Así que me puse a pensar. ¿Y si pudiéramos hacer que la UI impulsada por el servidor estuviera disponible para todos? Pero también la versión más poderosa jamás imaginada. Y ese es el objetivo de ExpoRouter. Ahora, para hacer esto, estamos trayendo React server components, el enfoque más avanzado para el renderizado del servidor a todas las plataformas, iOS, Android Web, y cualquier otra cosa, a través de ExpoRouter. Este es un gran esfuerzo. Esto requerirá refinamiento en muchas bibliotecas diferentes a través del ecosistema universal. Nuestra implementación oficial de React server components para aplicaciones universales está actualmente en desarrollo temprano. 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 RSE, como acciones del servidor, enrutamiento concurrente, vuelos, etcétera. Pero pensé que sería más fácil simplemente mostrarles una demostración de lo que es posible. Así que he estado realmente interesado en la IA, como 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 del servidor son aspectos críticos al trabajar con un LLM. Pero con React server components y ExpoRouter, en realidad es realmente, realmente fácil trabajar con IA. Así que aquí tengo una aplicación estilo chat GPT que envía una solicitud a OpenAI con una acción del servidor de React y transmite texto nativo desde el servidor. Así que piensa en esto como una aplicación estilo chat GPT, ¿verdad? Todo lo que regresa del servidor es renderizado por el servidor, sin embargo. O al menos parcialmente renderizado por el servidor, porque también tenemos componentes del cliente.

Entonces, podemos preguntarle algo como, ¿deberían las aplicaciones nativas ser renderizadas por el servidor? Y luego transmitirá algo acerca de cómo las aplicaciones nativas normalmente no son renderizadas por 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 será extraída en el paquete del servidor, por lo que nunca se envía al cliente y se convierte 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 diferentes en función de la plataforma, de modo que si el dispositivo iOS lo pings, entonces muestra la versión iOS del paquete del servidor, y si la versión Android muestra, versión Android. Y así es como sabe qué texto usar, ya sabes, si es para iOS o Android web.

Ahora, cuando un cliente hace una solicitud, se envía una carga útil RFC con suspense para mantener el flujo abierto. Tiene la representación estática de nuestro JSX raíz cargado dentro de él, una URL al cliente código necesario para que este RFC se cargue, porque dividimos el código del paquete, y se puede cargar y buscar dinámicamente, 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 imágenes, así que, si dijo, ya sabes, una vez, y luego una vez había una vez, 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 súper poderoso, porque significa que podemos usar cualquier JavaScript arbitrario, siempre que los enlaces nativos ya estén en nuestro cliente objetivo, por lo que esto es algo así como crear HTML personalizado en vivo utilizando directivas de uso del cliente y uso del servidor en todas partes. Así que te darás cuenta de que aquí no hay código nativo. Eso es solo JSON, y está delimitado por nuevas líneas, por lo que se transmite. Es bastante dulce. Y esto es solo lo básico. Podemos escalar este concepto a cualquier UI nativa.

Así que hagamos algo un poco más emocionante. Cuando se mostró por primera vez React Native, mostraron una aplicación de películas verdaderamente nativa. Así que pensé que sería divertido incorporar películas a este prototipo de alguna manera. Para inspiración, miré lo que las mejores aplicaciones de AI tenían para ofrecer. En el chat GPT-4, cuando pides películas, renderiza una lista con viñetas de markdown después de hacer ping a bing. Consulté con GPT-4-0, mismo trato. En Gemini, hace lo mismo, pero con algunas imágenes en línea y algunos enlaces en vivo. Así que básicamente solo está enviando markdown, y luego el markdown se está formateando 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, hacer ping a una base de datos de películas, servir una tarjeta de película nativa interactiva, transmitirla al cliente con cosas como menús de UI, cualquier tipo de nueva vista nativa que baje y esté disponible en ese dispositivo. Luego podemos volver a recurrir con más información. Tenemos una acción de servidor que está obteniendo miembros del reparto y miembros del equipo de una película. Y luego incluso podemos crear eventos de calendario donde tenemos una tarjeta que luego hace ping para el permiso del calendario y abre el aviso del calendario.

Verdaderamente mágico. ¡Gracias! ¡Va a ser un poco más genial, no te preocupes! En general, una mejor user experience, mucha menos lectura. Pero incluso más emocionante que esta vanguardista user experience es la developer experience porque sólo tomó un poco más de código que el ejemplo de texto. Así que aquí, usamos un límite de suspense para mostrar un cargador de esqueleto en el componente asíncrono, obtiene data y renderiza las películas, luego las transmite al cliente.

Te das cuenta de que esto es, aunque esto es código universal de React, hay React Native ahí, es sólo código de React. Como este es código de React verbatim trabajando en todos los dispositivos. Es muy emocionante. Ahora para hacer las tarjetas interactivas, simplemente creamos un componente cliente de envoltura que tiene un poco de estado dentro de él. La lógica JS utilizada aquí será separada del paquete principal y obtenida condicionalmente cuando renderizamos esta tarjeta por primera vez. Así que en las plataformas nativas que están usando el motor Hermes, dividimos el paquete en formato de bytecode optimizado, lo que significa que se inicia inmediatamente y sólo se mapea en memoria. No tienes que analizar nada. Es bastante dulce. Esencialmente significa que estamos entregando las mejores estrategias de los mejores frameworks sólo para la web pero corriendo en un entorno personalizado de JavaScript que empuja la plataforma en tu mano a sus límites.

Porque después de saltar a través de todos los aros necesarios para hacer que el renderizado del servidor funcione, no estamos sólo renderizando al DOM. No, en cambio, obtenemos vistas verdaderamente nativas, como si la aplicación fuera escrita con herramientas de primera parte. Tenemos desplazamiento suave, comportamientos de plataforma de alto rendimiento, es renderizado progresivamente, best practices, y verdaderamente ilimitado. ¿Está lloviendo aquí? Okay, perfecto. Pensé que era sólo yo. Y por supuesto, la mejor parte tiene que ser, funciona así en todas partes. Todas las plataformas. Así que Expo soporta iOS, Android y web. Tiene soporte multiplataforma de Apple, algunos Macs, Vision Pros. Lo tengo funcionando en cada ordenador de mi casa. Es realmente ú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 necesitamos aprovechar la capacidad que la web tiene para acceder rápidamente al contenido, donde puedes enviar a cualquier persona en el mundo un enlace, pueden abrirlo, y luego ver inmediatamente al menos una vista previa de tu experiencia completa. Así que también tenemos soporte web ahí. Y luego cada enlace es totalmente enlazable porque es un router basado en archivos universales. Así que si tienes la aplicación instalada y te envían un enlace, abrirá la aplicación en esa ubicación exacta. Se siente loco. Pero sigo hablando de cómo se siente y de cómo se ve.

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

Así que lo abriremos. Voy a recargarlo para que esté fresco justo allí en el servidor. Ves que busca todas las diferentes acciones del servidor en el fondo. Y esta es la aplicación. Así que podemos decir listar nuevas películas, tal como lo hicimos en el video. Cerraré esto aquí. Y luego veamos. Sigue moviendo esto. Sí, así tenemos nuestras vistas nativas. Podría seleccionar una de ellas. Y notarás en el fondo, esa fue la acción del servidor buscando más data y luego renderizando más vistas de menú de UI aquí. Así que es una vista que ni siquiera pensarías que podrías renderizar en el servidor. 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 rápido. Es un servidor de desarrollo. Pero también estoy emulando tiempos de espera del servidor allí también. Y luego abre un evento de calendario, ya sabes, créalo, lo que sea.

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

Bueno, podemos volver a iniciar sesión. Podemos ver varias músicas aquí. Solo voy a seleccionarlo durante mucho tiempo. Reproducirá música, pero tengo la sensación de que eso podría no caer bien con nosotros 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 va a renderizar una tarjeta que envía información que luego puede consultar mis contactos nativos. Así que no tengo que enviar mis contactos al LLM para que los filtre. Es capaz de, ya sabes, GDPR, es capaz de enviar código a mi dispositivo para hacer ese filtrado, lo cual es bastante dulce.

No, no queremos abrir eso. Así que tengo mis Charlies aquí. Podría seleccionar a Charlie Cheever, enviarle un mensaje. Dirá, ya sabes, como, ¿qué quieres enviarle? Explica cómo funciona JSX. Haz eso. Entonces tal vez, está bien, realmente está yendo por ello. Bueno, algo de markdown. También estamos formateando algo de markdown allí. Está bien, genial. Solo voy a poner en cola, sí, envíalo, porque imagino que va a ser como, ¿quieres que diga, vaya, realmente está yendo. Sí, seguro, envíalo. Muy bien, y ahora, ya sabes, seleccionará este texto. Veamos, todavía lo tenemos funcionando en segundo plano aquí, ¿verdad? Está bien, bien. Oh, está bien, ahí está. Así que ahora ha compuesto un mensaje para Charlie. Él es mi jefe.

Es un co-creador de Expo. Puedo simplemente enviárselo. Y sí, así de simple, estamos enviando mensajes.

¿Qué más podemos hacer? Podríamos decir, muéstrame cosas que hacer en la ciudad. Arreglemos eso. Y ahora va a, quiero decir, mira todos esos data que acaba de recuperar en segundo plano. Así que está recuperando todos esos data en la acción del servidor. No tenemos que preocuparnos por optimizarlo y tener algo, porque este 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 de 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 dulce. Así que tal vez seleccionemos uno, digamos obtener el clima, porque sabe, de nuevo, de lo que estamos hablando. Supongo que Ámsterdam, ¿verdad? Podemos tener algunas interacciones nativas allí. Podemos decir reserva un Uber a esta ubicación. Reserva un Uber, solicita un Uber, ábreme en la aplicación Uber. No lo solicitemos 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 haber podido hacer eso. $31. Pero ahora, no tengo un componente de conversión de moneda incorporado, por eso simplemente me envió texto. Si le pido un componente, simplemente escribirá el componente para mí, lo renderizará en el servidor y transmitirá texto, o al menos eso espero. Está ejecutando un servidor de desarrollador en vivo. Así que podríamos decir crea un componente para convertir la moneda. Ahora se va a renderizar en segundo plano aquí. O al menos eso espero. Eso espero. Veamos.

Ahí está. Bastante impresionante. Así que aquí podemos ver todo el texto que acaba de crear. Le pedimos a GPT que renderice este componente. Sabe crear un React Native component, lo ejecutamos, lo transmitimos. Así que ahora tenemos un convertidor de moneda.

Así que podríamos decir, ya 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 del servidor a una aplicación nativa. Incluso podríamos decir, ya sabes, crea un componente de juego de tic-tac-toe. Probablemente no necesitaba ese componente allí. Creo que lo entendió. Y luego renderiza esto.

Así que de nuevo, lo que está pasando, como lo que vemos aquí es que tenemos esta hermosa vista de texto que viene abajo. Esto se transmite. Tengo que asegurarme de que añade use client para que obtengamos componentes interactivos. Oh, está bien. Bueno, esto ya está hecho. Es bastante impresionante que esto siempre funcione. Puedo hacer... Veamos. Vamos al siguiente jugador O. Bueno, tiene todo el cambio allí. Intentemos ganar rápidamente. X. Ganadores. X. Esto es bastante impresionante 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, sí, lo hizo automáticamente. Así que, bastante genial.

Bastante dulce. Si volviéramos a cambiar aquí, quiero decir, esto es Expo CLI. Si simplemente presionamos la tecla W, se abrirá en el navegador. Se abrió justo en el navegador pero en esta otra ventana. Así que aquí lo tenemos funcionando en el navegador. Mismo trato. Enumera 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 en, lo tengo aquí en mi escritorio también. Lo ejecutamos aquí en el escritorio, ya sabes, así que obtengo la película, enumera algunas películas. Como, sí, es bastante dulce. Soy un gran fan.

Muy bien, volvamos a la presentación aquí. Ahora, eso es lo que parece cuando llevamos el estado moderno del renderizado del servidor en AI y los llevamos universalmente a todas las plataformas. Por supuesto, ahora comienza la lluvia. Deslizándose sin problemas entre el servidor y el cliente en un framework basado en archivos totalmente tipado. Solo tenemos que configurar las API para una sola plataforma y esa es el servidor. Haciéndolo más fácil que nunca para construir a través de plataformas. De hecho, es por eso que pude compartir tanto. Es porque estas son solo primitivas base. Toda la funcionalidad se está ejecutando en el servidor. Mientras que una aplicación nativa tradicional generalmente está ejecutando toda esa lógica en el cliente. Haciéndolo aún más fácil que nunca antes para hacer que React Native sea perfecto. Todas las cascadas, solicitudes paralelas, son manejadas por nosotros como parte de React componentes del servidor. Esto no es solo cualquier renderizado del servidor, estamos utilizando lo mejor que la web tiene para ofrecer. Los secretos están asegurados en el servidor, el código del cliente estático se elimina automáticamente de el paquete. Lo que significa que simplemente sueltas algo de código y si puede ser eliminado en tiempo de construcción, será eliminado en tiempo de construcción. Por primera vez en la historia.

Hay toneladas y toneladas de nuevos beneficios. Demasiados para entrar en detalles. Simplemente redefine lo que es posible con nuestros dispositivos móviles en nuestras manos. Y simplemente permite que se construyan nuevos tipos de aplicaciones en tiempos récord. Entonces, la aplicación que acaban de ver está ejecutando Expo SDK 51, lo que significa que todo el código nativo es en realidad ya está disponible. Esta es solo una aplicación Expo construida sobre eso.

React 19, nueva architecture, todo eso ya está disponible. El renderizador del servidor real, soporte de primera clase en Expo Router, aún en progreso. Trabajando en ello activamente. Como dije, me requiere abrir solicitudes de extracción a todas las demás bibliotecas que podrías usar, si nos movemos rápido, tendremos una beta temprana para finales de este año. Considera esto un RFC. ¿Es el renderizado del servidor algo que quieres ver en aplicaciones nativas? Creo que sí. Me encanta usar esto. Me encanta... Quiero decir, es simplemente 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 inaugurar el futuro del desarrollo de aplicaciones, contáctame en X. Soy Evan Bacon, y esto ha sido Componentes del Servidor Universal en Expo Router. Gracias. Muchas gracias por tu increíble charla. Ahora, quiero señalar 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 al Impulsor de la Productividad, y no estabas aquí para recoger eso. Entonces, ¿podemos dar un sí, aplausos para Evan por Expo Router ganando el Premio al Impulsor de la Productividad en 2023? Wow. Eso es hermoso. Gracias. Es un sí, ellos, y justo a tiempo. Bueno, tenemos que saltar a las preguntas, porque cuando digo que el Slido se está volviendo loco, se está volviendo loco.

Puedo ver la lista. Oh, hombre. Tienes algunas buenas preguntas ahí. Hay muchas. Entonces, sé que no podremos pasar por todas ellas, así que definitivamente puedes atraparlo en la sesión de preguntas y respuestas.

Vamos a empezar con la primera. Esto es tan emocionante. Esto es increíble. Pero, ¿está cubierto por las políticas de la App Store generar los paquetes en el lado del servidor? Esa es una pregunta fantástica. Sí. Ya sabes, lo del RFC es que no estamos enviando ningún código nativo. Y las tiendas de aplicaciones, la política es que simplemente no puedes 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, como Facebook y Twitter no funcionarían. Y las aplicaciones de hoy tienen OTA, tienen vistas web, puedes cambiar cosas dinámicamente. Y si cambian el comportamiento de lo que fue aprobado, sí se rechaza. Eso es posible aquí. Es posible usar APIs de pagos para cosas no legales. Pero ahora puedes hacerlo mucho más fácil y a un ritmo más alto. Otra cosa es que lo que harán las tiendas de aplicaciones es que... Hay muchos ajustes de tiempo de construcción, que no puedes cambiar al aire. Así que esto va a ser como acceder a contenido o permiso de calendario. Con estas cosas, si envías tu aplicación a la tienda, pasarán por ella y verán como, okay, ¿puedo acceder al mensaje que dice que quieren usar tus contactos? Y si no puedes, entonces pueden deducir que puedes estar ocultando funcionalidad y rechazarán ese binario. Así que hay políticas en su lugar, que esto no valida. Pero todavía tienes que usarlo de manera responsable. Como la mayoría de las APIs. Úsalas de manera responsable.

Estoy totalmente de acuerdo. La gente está realmente emocionada con la demostración. Me encanta la demostración. ¿Estará disponible el código fuente? ¿Podemos poseerlo y ejecutarlo nosotros mismos? No por ahora, sin embargo.

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

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

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

No, seguro, seguro. Y esta pregunta es más sobre cómo construiste la UI. ¿La AI generó toda la UI? Sé que hubo momentos, por ejemplo, donde deliberadamente provocaste la generación o creación de un componente, seguro. ¿Qué pasa con el resto? ¿También fue creado por ella? Sí. Así que la mitad de la diversión aquí es que haces tus propios componentos.

Así que cosas como el componente de películas fue un componente pre-hecho, y luego al final allí donde se genera y puedes ver el código por encima de él, eso es todo generado por AI. Así que eso no está guionizado, y no tenía idea de si realmente se ejecutaría o correría. Lo he hecho una vez antes, así que estaba confiado. O si no funcionaba, podría intentar mitigar la solución o hacer alguna broma sobre la lluvia. Sí, así que parte de ello fue, pero los componentes generados, es difícil hacer que el estilo se vea realmente bien y para esto, sólo quería que todo se viera muy bien. Y luego viste allí al final, era sólo como un botón y luego como una caja de texto sin estilo. Así que, sí.

No, seguro. Muy bien, tenemos otra pregunta, que es especialmente con AI, no siempre sabes con seguridad lo que va a crear. Sí. Entonces, ¿cómo sabes que la AI no devolverá código o un componente o algo que vaya en contra de las políticas de la tienda de aplicaciones o algo sospechoso que no quieras que suceda. Otra gran pregunta. Ustedes realmente están en ello hoy. Así que sí, esto podría haber sido la singularidad. Imagina eso. Podríamos hacer que genere cualquier cosa y empiece a transmitir código. Sí, no, tienes acceso al código en el servidor antes de ejecutarlo, así que podrías ejecutar en un entorno contenerizado y ver si accede fuera de la caja de arena. Apple también tiene cajas de arena para su código, lo que te impide simplemente enviar código nativo al aire. Así que puedes confiar en muchas capas diferentes de seguridad. Pero también esto es sólo una demostración básica de AI. La clave es que las cadenas representan código nativo, lo que significa que puedes construir cualquier tipo de aplicación que quieras y puedes construirla mejor que cualquier otra aplicación que hayas visto. Genial. Y me encanta esta última pregunta. No sé si es realmente una pregunta, más bien una afirmación de que esta es la aplicación estilo El Señor de los Anillos. Una aplicación para gobernarlas a todas. Tenemos un orador increíble que gobierna todo ExpoRouter. ¿Podemos darle un aplauso a Evan Bacon?