La visión multiplataforma de React Native

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

React Native ha tenido mucho éxito elevando el nivel del desarrollo móvil, tanto en Facebook como en la industria. A medida que interactuamos con computadoras de nuevas formas y se inventan nuevos dispositivos, queremos que React Native esté disponible para todos. Aunque React Native se creó originalmente para construir aplicaciones móviles, creemos que enfocarnos en múltiples plataformas y desarrollar según las fortalezas y limitaciones de cada una tiene un efecto simbiótico. Hemos visto enormes beneficios al extender esta tecnología a escritorio y realidad virtual, y estamos emocionados de compartir lo que esto significa para el futuro de React Native.

Respetando la plataforma

Nuestro primer principio rector es satisfacer las expectativas que las personas tienen para cada plataforma. Los usuarios de Android esperan aplicaciones accesibles usando TalkBack. La navegación debe funcionar como en otras aplicaciones Android. Un botón debe verse y sentirse como los botones en Android. No debe parecerse a un botón de iOS. Aunque buscamos ofrecer una experiencia de desarrollo multiplataforma consistente, resistimos la tentación de sacrificar las expectativas de los usuarios.

Creemos que React Native permite a los desarrolladores cumplir con las expectativas de los usuarios mientras obtienen los beneficios de una mejor experiencia de desarrollo. En esta sección, compartimos lo siguiente:

1. Al adoptar las limitaciones de la plataforma, mejoramos la experiencia en otras plataformas.

2. Podemos aprender del conocimiento institucional para construir abstracciones multiplataforma de mayor nivel.

3. Otros actores en cada plataforma nos inspiran a construir mejores experiencias para desarrolladores y usuarios.

Adoptando las limitaciones de la plataforma

El hardware específico del dispositivo o las expectativas del usuario imponen limitaciones y requisitos únicos. Por ejemplo, la memoria suele estar más limitada en Android y cascos de VR que en iOS, macOS y Windows. Otro ejemplo: los usuarios esperan que las aplicaciones móviles se inicien casi instantáneamente, pero se frustran menos cuando las aplicaciones de escritorio tardan más en iniciar. Hemos descubierto que al abordar estos problemas con React Native, podemos aprovechar más fácilmente las lecciones aprendidas y el código escrito para una plataforma, y aplicarlos a otras plataformas.

React Native and Relay power over 1000 Facebook surfaces on Android and iOS.

Por ejemplo, React Native depende de una optimización llamada "aplanamiento de vistas" (view flattening) que es crítica para reducir el uso de memoria en Android. Nunca construimos esta optimización para iOS porque no tiene las mismas limitaciones de memoria. Durante los últimos años, mientras construíamos nuestro nuevo renderizador multiplataforma, tuvimos que reimplementar el "aplanamiento de vistas". Pero esta vez se escribió en C++ en lugar de Java específico de plataforma. Probar esta misma optimización en iOS ahora era solo cuestión de activar un interruptor. En la aplicación de producción de Facebook, ¡observamos que esto mejoró el rendimiento en iOS! Es probable que nunca lo hubiéramos construido para iOS, pero nuestra inversión en Android pudo beneficiar nuestra inversión en iOS.

Aprendiendo del conocimiento institucional

Una de las razones por las que se creó React Native fue para reducir los silos de ingeniería. Existe una tendencia a que los ingenieros de Android trabajen aislados de los ingenieros de iOS que trabajan en el mismo producto. Los ingenieros de Android revisan código para ingenieros de Android y asisten a meetups y conferencias de Android. Los ingenieros de iOS revisan código para ingenieros de iOS y asisten a meetups y conferencias de iOS. Los ingenieros que trabajan en diferentes plataformas aportan conocimientos institucionales y de dominio únicos sobre cómo construir grandes experiencias de producto.

Uno de los mejores resultados de los frameworks multiplataforma como React Native es cómo unen a ingenieros con experiencia de dominio muy diferente. Creemos que al apuntar a más plataformas, podemos acelerar la polinización cruzada de conocimiento institucional entre expertos en plataformas.

Como ejemplo, las abstracciones de accesibilidad en React Native están influenciadas por cómo Android, iOS y web abordan la accesibilidad de diferentes maneras. Esto nos permitió construir una interfaz común que mejora el manejo de sugerencias de accesibilidad en ambas plataformas móviles.

Como otro ejemplo, nuestra investigación sobre la percepción de velocidad en la web llevó a características concurrentes como Suspense. Durante el último año, estas características fueron validadas por el nuevo sitio Facebook.com. Ahora con nuestro nuevo renderizador, estas características están llegando a React Native e influyen en cómo diseñamos la programación de eventos y prioridades. La inversión del equipo de React en mejorar la experiencia web está beneficiando a React Native para plataformas nativas.

La competencia impulsa la innovación

Además de ingenieros especializados, meetups y conferencias, cada plataforma también cuenta con actores únicos que resuelven problemas similares. En la web, React (que impulsa directamente React Native) frecuentemente se inspira en otros frameworks web de código abierto como Vue, Preact y Svelte. En móviles, React Native se ha inspirado en otros frameworks móviles de código abierto, y hemos aprendido de otros frameworks móviles desarrollados internamente en Facebook.

Creemos que la competencia conduce a mejores resultados para todos a largo plazo. Al estudiar qué hace destacar a otros actores en cada plataforma, podemos aprender lecciones aplicables en otras plataformas. Por ejemplo, la carrera por simplificar sitios web complejos influyó en el desarrollo de React y dio a React Native una ventaja inicial para ofrecer un framework declarativo para aplicaciones móviles. La demanda de ciclos de iteración más rápidos y tiempos de compilación en la web también llevó al desarrollo de Fast Refresh, que benefició significativamente a React Native. De manera similar, las optimizaciones de rendimiento en nuestros frameworks móviles internos —especialmente en torno a la obtención de datos y paralelización— nos desafiaron a mejorar React Native de formas que también influyeron en React cuando construimos el nuevo sitio Facebook.com.

React and Relay powers the Facebook.com website.

Expansión a nuevas plataformas

React y React Native están en un punto de inflexión. React ha iniciado el camino hacia el lanzamiento de React 18, y el nuevo renderizador de React Native ahora impulsa completamente las aplicaciones móviles de Facebook. Nuestro equipo ha crecido sustancialmente este año para apoyar la creciente adopción en Facebook. Los equipos que desarrollan en otras plataformas han notado esta adopción y ven la oportunidad de cosechar también los beneficios de React Native.

Durante el último año, hemos colaborado con Microsoft y el equipo de Messenger para crear una experiencia de videollamadas verdaderamente nativa en Windows y macOS. Debido al alto escrutinio que aplicamos al tiempo de inicio en aplicaciones móviles, nuestra implementación inicial de videollamadas de escritorio usando React Native superó por completo el rendimiento de la implementación Electron que reemplazó. Durante las primeras semanas de desarrollo, grabamos videos redimensionando ventanas con múltiples videollamadas en vivo y nos maravillamos con las tasas de fotogramas fluidas.

Desarrollar para escritorio ha sido muy emocionante. Hemos aplicado nuestro conocimiento sobre experiencias móviles al escritorio con los ojos bien abiertos. Hemos ampliado nuestros horizontes con múltiples ventanas secundarias, barras de menú, bandejas del sistema y más. A medida que continuamos colaborando en nuevas funciones de Messenger para escritorio, esperamos encontrar oportunidades que influyan en cómo construimos para web y móviles. Si deseas mantenerte actualizado, nuestro trabajo de colaboración para escritorio ocurre en GitHub.

React Native powers Video Calling in Messenger for Windows and macOS.

También estamos colaborando más estrechamente con Facebook Reality Labs para comprender cómo React está singularmente posicionado para ofrecer experiencias de realidad virtual en Oculus. Construir experiencias de RV con React Native será particularmente interesante debido a restricciones de memoria más estrictas y la sensibilidad del usuario a la latencia en las interacciones.

Similar a cómo abordamos React Native para móviles, validaremos nuestra tecnología a escala de Facebook antes de compartirla públicamente. Mucho sigue cambiando y aún tenemos muchas preguntas. Queremos tener confianza en que la tecnología esté lista para producción y sea confiable antes de compartirla con la comunidad.

Aunque la mayor parte del desarrollo para RV seguirá siendo interno, esperamos compartir más en cuanto sea posible. También anticipamos que las mejoras de React Native para RV aparecerán en código abierto. Por ejemplo, proyectos para reducir el uso de memoria en casos de uso de RV también disminuirán el consumo de memoria en React Native para experiencias móviles y de escritorio.

React and Relay power the Oculus Home and many other virtual reality experiences.

Cuando reflexionamos sobre cómo la industria ha adoptado React, siempre ha existido un apetito en la comunidad por React en más plataformas. Incluso antes de anunciar React Native a la comunidad, Netflix ya había desarrollado Gibbon, su renderizador personalizado para construir experiencias de TV con React. Y antes de que Facebook comenzara a desarrollar Messenger para escritorio, Microsoft ya usaba React para construir experiencias nativas de escritorio en Office y Windows 10.

Resumen

En resumen, nuestra visión es expandir el alcance de React Native más allá de lo móvil, y ya hemos comenzado asociándonos con los equipos de escritorio y realidad virtual en Facebook. Sabemos que cuando adoptamos las limitaciones propias de cada plataforma, aprendemos del conocimiento institucional y recogemos inspiración de otros actores, esto beneficia a todas las plataformas del ecosistema. Y lo más importante: al hacerlo, seguimos siendo fieles a nuestros principios rectores.

Estamos entusiasmados con lo que está por venir mientras continuamos explorando lo que múltiples plataformas desbloquean para React Native. Conéctate con nosotros (@reactnative) para más actualizaciones y comparte tus ideas.