Aplicaciones Móviles Dirigidas por Servidor con React Native

¡Hola a todos! Gracias por unirse a la sesión. Hoy vamos a explorar la interfaz de usuario impulsada por el servidor, cómo puedes usarla en tus aplicaciones de React Native para crear interfaces de usuario y diseños más escalables y complejos sin incurrir en muchos costos y deudas técnicas. Mi nombre es Mo. Soy el líder del equipo móvil en Theodo. Theodo ha estado trabajando con React Native desde 2015, creo. Fuimos adoptantes tempranos tan pronto como React Native salió unos meses después de que comenzamos a trabajar con React Native. Hemos organizado eventos como el meetup de React Native London desde 2017. Nos apasiona mucho React Native. Hemos estado en este espacio durante un tiempo y hemos visto una gran cantidad de proyectos en el espacio de React Native, desde pequeños hasta grandes. Espero poder compartir algo de esa experiencia con todos ustedes.

La mejor manera de hablar sobre la interfaz de usuario impulsada por el servidor es a través de una historia muy concreta de la industria. Retrocedamos en el tiempo, desde 2024 hasta 2019. Esta fue una época más simple. Era la era antes de la pandemia. La vida era simple. Para los chicos de Facebook, antes de que se llamaran meta, estaban lanzando muchas nuevas características en la aplicación de Messenger. Si recuerdas, el logotipo era azul. No tenía el degradado. Acababan de introducir chats grupales grandes. Habían agregado nuevas funcionalidades y características como encuestas. Incluso agregaron cosas como mapas y juegos a su aplicación. Esta aplicación estaba creciendo muy, muy rápido. Como resultado, tenían más de 1.7 millones de líneas de código en la aplicación de iOS para Messenger. Tenían un tamaño de paquete enorme. Estamos hablando de 130 megabytes. Todo esto resultó en tiempos de inicio lentos de la aplicación y también en un tiempo de ejecución lento de la aplicación. Había múltiples versiones de los mismos componentes de la interfaz de usuario. Una cosa que dieron como ejemplo fue que había 40 pantallas de contacto diferentes, que en realidad eran exactamente el mismo componente con ligeras variaciones. Habían duplicado diseños similares en toda la aplicación con cambios muy menores.

variaciones. Nació Project Lightspeed. El concepto principal detrás de Project Lightspeed era que necesitaban una forma más sencilla de definir diseños, de definir la UI, que no requiriera tanta codificación de diferentes variaciones, tanta duplicación de code. La estrategia en la que se decidieron fue este concepto de una UI impulsada por el servidor, con un poco más de complejidad añadida para cosas como el almacenamiento en caché, el soporte sin conexión. En resumen, el servidor controla la UI. Si observamos los resultados, si nos remontamos a 2020, lo que sucedió fue que esas 1.7 millones de líneas de code se redujeron a 360,000 líneas de code. Eso es una reducción masiva. El tamaño del paquete de 130 megabytes se redujo a 30 megabytes de tamaño del paquete. Tenían un logotipo completamente nuevo, ¿verdad? Todos están contentos. En resumen, lo importante es que pudieron reducir tanto, acelerarspeed up significativamente a su equipo, todo mediante la adopción de

Es una arquitectura y un patrón diferentes para pensar en ello. ¿Qué es la interfaz de usuario impulsada por el servidor? Veamos un ejemplo sencillo y comencemos a pensar y razonar al respecto. Si tienes una plataforma de comercio electrónico, React Cloth, y observas el diseño, a menudo, el diseño se compone de secciones dispersas de una pantalla. Puede haber una sección de ofertas, puede haber productos recomendados, categorías destacadas, testimonios y un pie de página. La idea principal es que podemos definir un objeto JSON que proviene de una API o CMS, y que proviene del servidor, y que define el diseño de la página. Puedes ver que tenemos un objeto de banner dentro de esta matriz en el ejemplo del lado derecho, que tiene un montón de propiedades, como el número de teléfono, la dirección, el correo electrónico, y así sucesivamente. Pero también puede haber un poco más de complejidad allí. Puede haber un encabezado, y algunas de las propiedades incluyen estos objetos como un menú, que es una matriz de diferentes elementos de menú con sus enlaces, y así sucesivamente. Todo esto proviene del backend o de un CMS que tienes. Ahora, si tomamos un ejemplo de este JSON, ¿cómo implementamos el código de React o el código nativo de React para renderizar esto? Entonces, tendríamos un archivo components.ts que importa todos los diferentes componentes que tienes, y estos son componentes individuales, y luego tendríamos un mapeo para decir cuál es la cadena que proviene del servidor que representa ese componente específico. Y luego lo que haríamos es crear una función de renderizado genérica, y esta función utiliza el mapa de componentes para verificar la configuración que proviene del servidor y seleccionar el componente correcto y pasar las propiedades correctas que provienen del servidor, de forma dinámica. Y luego, en algo como nuestra página de inicio, lo que haríamos es obtener los datos JSON, digamos que solo usamos un cargador de algún gancho de consulta de React que hemos creado personalizado, y luego básicamente renderizamos todo en un mapa llamando a la función de renderizado de componentes. Y eso finalmente resulta en el diseño que queremos, y todo eso proviene del lado del servidor. Y si quieres entender qué tan extendido es el uso de la interfaz de usuario impulsada por el servidor, podemos ver algunos de los grandes jugadores de la industria que lo están utilizando. Así que tienes a Shopify, Airbnb, incluso aunque no nos gusta hablar de ellos debido a todo su fiasco con React Native, y Lyft. Si echamos un vistazo rápido a algunas de las aplicaciones móviles que están utilizando esto, para Shopify, tienen una aplicación de tienda que básicamente es un mercado donde diferentes propietarios de tiendas pueden venir y crear sus propias aplicaciones. Y lo que descubrieron fue que las diferentes tiendas con diferentes tamaños de artículos y diferentes cantidades de usuarios necesitarán diseños diferentes que muestren diferentes cantidades de productos y muestren secciones de superventas para aquellos que tienen muchos productos. Por lo tanto, era importante poder personalizar eso para comenzar a usar la interfaz de usuario impulsada por el servidor para brindarles ese nivel de flexibilidad. En el caso de Airbnb, todo su sistema de diseño se basa en la interfaz de usuario impulsada por el servidor, y lo adoptaron porque quieren una consistencia en la plataforma en la web, móvil, en iOS y Android. Obviamente, si usaran React Native, tal vez no necesitarían eso tanto, pero la idea principal aquí era que podían controlar eso con el servidor y no solo sincronizarlo en sus aplicaciones móviles y web, sino también tener componentes unificados en toda la experiencia del anfitrión, hasta la experiencia del usuario, e incluso en diferentes partes de las nuevas funcionalidades que han lanzado, como toda la experiencia y cosas que tienen donde puedes ir, digamos, en un barco o algo así durante una noche o ir a un buen restaurante. Por lo tanto, era más para brindarles flexibilidad a medida que construyen nuevas funciones para no tener que reconstruir todo y caer en el mismo problema que enfrentó el equipo de Messenger. Y por último, en el caso de Lyft, en realidad se debió al hecho de que tienen esta funcionalidad para alquilar bicicletas, y esto es muy común en Europa, especialmente en los Países Bajos. Pero tenían esta funcionalidad donde alquilas bicicletas, pero querían comenzar a agregar scooters y había flujos ligeramente diferentes para las bicicletas en comparación con los scooters. Y luego más tarde también introdujeron bicicletas eléctricas. Y la interfaz de usuario impulsada por el servidor les permitió controlar de manera dinámica ese diseño a medida que los requisitos del usuario iban evolucionando y no necesitar hacer mucho trabajo en ese proceso. Recientemente, Evan Bacon del equipo de Expo dio una charla sobre RSCs dentro del espacio de React Native. Y anteriormente, yo y Evan tuvimos un intercambio en Twitter donde hablaba sobre la interfaz de usuario impulsada por el servidor y cómo, ya sabes, hacer React en el servidor no siempre equivale a RSCs. Y, ya sabes, Evan señaló que los RSCs en realidad son una pequeña parte de la historia de la interfaz de usuario impulsada por el servidor de React universal. Y estoy totalmente de acuerdo. Encajan en una parte muy pequeña de eso. Por lo tanto, recomendaría encarecidamente que veas la charla que Evan dio en ReactConf donde presenta la visión de los componentes universales del servidor de React en Expo Router. Así que, ahí tienes el código QR para que lo escanees si quieres hacer un seguimiento de eso y verlo más tarde. Y de manera más genérica, hablo sobre la interfaz de usuario impulsada por el servidor en el mundo de React, donde también hablo sobre algunos de los desafíos que conlleva y entro en un poco más de detalle con algunos de los casos de estudio. Por lo tanto, también puedes escanear eso si quieres hacer un seguimiento de esa charla para poder revisarla y profundizar un poco más en los desafíos y cómo combatir algunos de esos desafíos a medida que expandes el uso de la interfaz de usuario impulsada por el servidor en tu aplicación. Y muchas gracias por unirte a la charla.