Optimizing React Native with C++

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

Construir módulos C++ para React Native es más fácil de lo que podrías pensar (si sabes cómo). En esta charla compartiré las mejores prácticas actuales sobre cómo iniciar los módulos nativos C++ para React Native.

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

Kræn Hansen
Kræn Hansen
17 min
22 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
En esta charla, el orador discute el proceso de construcción de módulos nativos C++ para React Native. Explican que los módulos nativos permiten una integración más estrecha con la plataforma y acceso a código de rendimiento independiente de la plataforma, pero tienen sus desventajas, como tiempos de compilación más largos y posibles problemas con bloqueos y dependencias de paquetes. El orador aclara las diferencias entre la arquitectura antigua y nueva de React Native, destacando la introducción de la interfaz de JavaScript (JSI) y sus beneficios. También exploran opciones de arquitectura alternativas para React Native, incluyendo TurboNativeModules y LegacyNativeModules. El orador discute los desafíos de trabajar con módulos nativos heredados y los beneficios de usar NitroModules y precompilar código nativo. Concluyen con recomendaciones para usar módulos Nitro, precompilar y utilizar una caché del compilador para optimizar los tiempos de compilación.

1. Introducción a los módulos nativos de C++

Short description:

En esta charla, te inspiraré a construir módulos nativos de C++ para React Native. Se está volviendo más fácil y no es tan difícil como podrías pensar. Los módulos nativos son contenedores de código nativo relacionado que son descubribles por la aplicación durante la compilación y ejecución. Construir un módulo nativo permite una integración más estrecha con la plataforma y acceso a código de rendimiento independiente de la plataforma. Sin embargo, tiene sus inconvenientes como tiempos de compilación más largos, menos carga en caliente y posibles problemas con bloqueos y dependencias de paquetes.

Hola, con esta charla, espero inspirarte a construir módulos nativos de C++ para React Native. Es difícil, pero se está volviendo más fácil y no es tan difícil como podrías pensar. Mi nombre es Cain Hansen, trabajo para MongoDB, construyendo herramientas para desarrolladores. En mi trabajo en MongoDB, también mantengo una biblioteca de React Native para una base de datos móvil de código abierto llamada Realm.

Hablando de Realm, también tengo que mencionar que MongoDB ha decidido descontinuar Realm para enfocar su energía. Así que basta de hablar de mí, basta de hablar de Realm. ¿Qué es un módulo nativo? Vamos a desglosarlo, comenzando con nativo. Es el nativo en React Native. Es todo lo que se ejecuta en el dispositivo y no está escrito en JavaScript. ¿Qué es un módulo entonces? Piensa en esto como un contenedor de código nativo relacionado. Debe ser descubrible por la aplicación cuando la compilas, utilizando la vinculación automática a través de CocoaPods y Gradle, pero también en tiempo de ejecución cuando el código JavaScript de la biblioteca lo necesita.

¿Por qué construir un módulo nativo? Bueno, puedes escribir código de módulo nativo en varios lenguajes diferentes. Puedes usar Kotlin y Java, Swift o Objective-C para lograr una integración más estrecha con la plataforma, como acceder a periféricos del dispositivo, cámaras, etc. C++ y Rust puedes usarlos para acceder y construir código de rendimiento independiente de la plataforma. Me enfocaré en el resto de mi charla en C++. Entonces, ¿por qué no un módulo nativo de C++? Te da tiempos de compilación más largos, no es tan fácil ni rápido como JavaScript, que es mucho más rápido que reconstruir y volver a lanzar una aplicación. También presenta más problemas cuando se producen fallas catastróficas y bloqueos, porque no siempre obtienes una pila agradable, de la misma manera que estás acostumbrado en JavaScript. Gestionar las dependencias de paquetes entre tu código y tus dependencias de C++ también puede ser doloroso a veces, y tiene una curva de aprendizaje más alta, según dicen muchas personas. Y esto, en última instancia, a menudo conduce a una menor productividad del desarrollador. Pero como con cualquier cosa en el software, es un compromiso y depende.

2. Aclarando la Arquitectura Antigua y Nueva

Short description:

La antigua arquitectura de React Native implicaba el análisis de mensajes a través del puente, lo que resultaba en copias costosas y un aumento en el uso de memoria. La nueva arquitectura introduce la interfaz de JavaScript (JSI), una abstracción sobre los motores de JavaScript, y proporciona una API de tiempo de ejecución más simple. Esta API permite la preparación y evaluación de JavaScript, la gestión de microtareas, el acceso al objeto global y la manipulación de los valores de JSI. Además, el objeto JSI permite el almacenamiento de estado nativo y una recolección de basura eficiente a través de la comunicación de la presión de memoria.

Entonces, ¿cómo llegamos hasta aquí? No creo que una charla sobre React Native en estos días sea una charla sobre el React Native anterior a menos que aclaremos la arquitectura antigua y la nueva. Así que repasemos la arquitectura antigua aquí. En realidad es extraño llamarla antigua, porque recién se desactivó de forma predeterminada en la versión 0.76 de React Native. Solíamos realizar análisis de mensajes sobre lo que llamábamos el puente, y esto resultaba en copias costosas y un aumento en el uso de memoria, ya que JSON no almacena datos binarios de manera eficiente. Y esto ha tenido un impacto en el diseño de muchos de los primeros módulos nativos para React Native, dejando amplias oportunidades para innovar.

Y uno de los pilares de la nueva arquitectura es la interfaz de JavaScript, JSI abreviado. Es una abstracción sobre los motores de JavaScript, JavaScript Core y Hermes. Y el puntero de tiempo de ejecución de JSI es inicializado por React Native. El objetivo del módulo nativo es interactuar con él, ya sea directamente o a través de algún código generado, llamando a C++ y traduciendo los valores de retorno y los argumentos en y desde los valores de JSI. Este es el encabezado de JSI, y al menos las clases exportadas por el encabezado de JSI. Y solo tiene 1,500 líneas de código, pero tiene muchos comentarios. Y esta es la lista de todas las clases, ¿verdad? Sumergámonos en el tiempo de ejecución. La API pública del tiempo de ejecución es bastante simple. Obtienes la capacidad de preparar y evaluar JavaScript, gestionar microtareas. Esto es el bucle de eventos. Y también acceder al objeto global en el tiempo de ejecución. Luego el valor de JSI aquí. Puedes construirlos a partir de primitivas de C++, o puedes proporcionar una cadena de JSON y creará un valor a partir de ella. También puedes comparar la igualdad de estos valores usando la igualdad de JavaScript. Y finalmente, puedes leer los valores primitivos nuevamente en C++. Aquí vamos.

De acuerdo. Objeto JSI. Este es un tipo especial de valor y tiene métodos para obtener y establecer propiedades. También puedes almacenar estado nativo en ellos. Comparte punteros con algún objeto de C++ que controlas. Puedes usar otro método para comunicar la presión de memoria externa desde este estado nativo que has asociado con el objeto JSI. Esto permite que el motor de JavaScript realice una recolección de basura eficiente. Este es mi método. Esto es lo que voy a hacer.

3. Considerando Alternativas de Arquitectura de React Native

Short description:

Al considerar alternativas para la arquitectura de React Native, hay dos criterios importantes a considerar: el soporte para arquitecturas antiguas y nuevas y la necesidad de una tipificación fuerte entre JavaScript y el código nativo. Las opciones para la generación de código incluyen generar paradas a partir de declaraciones de TypeScript o Flow, o generar declaraciones de TypeScript a partir de código C++. La alternativa predeterminada es TurboNativeModules, que requiere la nueva arquitectura y ofrece seguridad de tipos con generación de código. LegacyNativeModules, aunque obsoleto, es compatible con Forge y se puede usar en ambas arquitecturas, antigua y nueva. Los módulos Legacy y Turbo también se pueden combinar para facilitar la adopción de la nueva arquitectura. Por último, se recomiendan XperModules para módulos nativos en C++.

Voy a presentar dos criterios que creo que son importantes cuando decides qué alternativa elegir. Y luego {{^}}voy a presentar las alternativas disponibles tal como las veo ahora. Así que el primer criterio, necesitas decidir si quieres soportar la arquitectura antigua, la nueva, o ambas arquitecturas. ¿Tienes, por ejemplo, usuarios existentes y quieres facilitar una transición suave? ¿O estás de acuerdo con una actualización importante y forzada donde dices que esta es solo la nueva arquitectura? En última instancia, es un compromiso entre la disponibilidad para los usuarios frente a obtener tu mantenimiento como autor de la biblioteca. Si envías para la arquitectura antigua, también podrías necesitar probar en la arquitectura antigua y obtendrás errores en la arquitectura antigua. Como ya mencioné, la nueva arquitectura acaba de convertirse en predeterminada.

Segundo criterio, ¿necesitas una tipificación fuerte entre tu JavaScript y tu código nativo? Y probablemente sí, para limitar los fallos catastróficos por bloqueos. También reducirá tu carga de mantenimiento para mantener estos dos lados sincronizados. He visto dos enfoques para la generación de código. Así que algunas alternativas, permitirán la generación de código desde TypeScript o Flow en paradas que necesitas implementar en el lado nativo. Otras alternativas, que es la que usa Realm, es generar declaraciones de TypeScript desde el código C++ o algún lenguaje específico de dominio, ya sea algo personalizado o algo como WebIDL. Y no solo generará paradas que necesitas implementar, sino código de enlace real entre la biblioteca C++ y JSI. Luego se basa en el código generado para fallar la compilación si los dos no coinciden.

Bien, así que la primera y ahora la alternativa predeterminada es TurboNativeModules. Requiere que la nueva arquitectura esté habilitada. Logra la seguridad de tipos a través de una herramienta de generación de código desde declaraciones de TypeScript o Flow en paradas que necesitas implementar en el lado nativo. TypeScript es bastante limitado en la expresividad en comparación con otras alternativas en términos de qué tipos puedes comunicar a través de este límite. Y genera estas paradas para C++, Objective-C y Java, pero los módulos puros de C++ no son compatibles en iOS todavía, mientras grabo esto.

La segunda alternativa es LegacyNativeModules. Está obsoleto una vez que se considera estable la nueva arquitectura, y supongo que eso es ahora que se convirtió en predeterminada. Y aún no es compatible con Forge, lo que significa que no requiere que la nueva arquitectura esté deshabilitada. Y esto se debe a una capa de compatibilidad. Así que puedes usar estos en la arquitectura antigua y nueva. No proporciona ninguna seguridad de tipos, y es anterior a JSI, lo que lo hace un poco más complicado acceder al puntero de tiempo de ejecución de JSI. La tercera alternativa, combina los dos. Así que el módulo Legacy y el Turbo. Es un patrón anunciado para facilitar la adopción de la nueva arquitectura. Utiliza macros y configuración de Gradle para cambiar entre la implementación en el momento de la compilación para elegir la implementación correcta para la aplicación que está utilizando la biblioteca. Y probablemente podrás llamar a algún tipo de implementación compartida entre los dos. Así que la cuarta alternativa, XperModules, tengo que mencionar esto para completar, pero solo para resumir de sus propios documentos y también de los equipos de React que he visto en los marcos de React Native, se afirma que si tienes la intención de usar C++ en tu módulo nativo, usa Turbo modules.

4. Legacy Native Modules and JSI Runtime Pointer

Short description:

Los módulos legacy no soportan la generación de código para la seguridad de tipos y acceder al puntero de tiempo de ejecución de JSI puede ser un desafío. Este enfoque se basa en APIs privadas y requiere generación de código manual. En Android, el módulo se carga justo a tiempo y un método nativo se implementa usando JNI. Sin embargo, los módulos legacy son anteriores a JSI.

Tampoco soporta la generación de código para garantizar la seguridad de tipos de extremo a extremo. Bien, mencioné que obtener el puntero de tiempo de ejecución de JSI era difícil desde un módulo Legacy, y quiero explicar eso ahora. Este es un enfoque que Realm ha estado usando durante mucho tiempo, y fue bien codificado por Ditto, también, en su blog. Y he enlazado a eso en esta diapositiva.

Los principales inconvenientes son que se basa en APIs privadas, que podrían romperse en cualquier momento, y necesitas traer tu propia generación de código para obtener esta seguridad de tipos de extremo a extremo. Como un extra, puedes diferir la carga del módulo nativo real en la aplicación en Android hasta que realmente se acceda desde JavaScript.

Bien, así que voy a explicar esto en Android primero. Comenzamos registrando un método sincrónico bloqueante, invocable desde JavaScript. Y cargamos el archivo de objeto compartido justo a tiempo. Accedemos al contenedor de contexto de JavaScript, y luego sincronizamos en eso para asegurar que ningún otro hilo de Java lo acceda mientras inicializamos. Y esto es importante porque no es seguro para hilos. Luego llamamos a get, que devuelve una dirección de memoria del puntero de tiempo de ejecución de JSI. Y finalmente llamamos a injectModuleIntoJSGlobal, que es un método nativo que implementamos en el lado de C++ usando JNI, lo cual veremos en la siguiente diapositiva aquí. Idealmente, simplemente devolveríamos el valor ahora mismo, como el enlace inicializado, pero el problema aquí es que los módulos nativos legacy son anteriores a JSI.

5. Alternative: NitroModules and Pre-Building

Short description:

En el lado de C++ JNI, implementamos el método nativo injectModuleIntoJSGlobal. En iOS, accedemos al campo de tiempo de ejecución del puente RCT CXX. NitroModules es una nueva alternativa que soporta múltiples lenguajes y aprovecha el estado nativo de JSI. Pre-construir código nativo en tu máquina puede reducir el tiempo de construcción y la complejidad. Las limitaciones incluyen la incapacidad de Xcode y CocoaPods para manejar un proyecto CMake y la necesidad de declarar la compatibilidad de versión en decay.

Bien, entonces en el lado de C++ JNI, implementamos este método nativo injectModuleIntoJSGlobal. Toma esta dirección de memoria del puntero de tiempo de ejecución como argumento, y luego lo reinterpret convierte. Luego crea un objeto que podemos usar para almacenar nuestro enlace. Y luego llamamos a una función que hemos generado llamada RealmJSIInit. Es mucho C++ generado que básicamente almacenará el enlace entre nuestra biblioteca C++ y JSI. Y finalmente, establecemos una propiedad en el global a la que podemos acceder desde JavaScript después.

En iOS, tenemos que hacerlo un poco más sucio en el sentido de que necesitamos acceder al campo de tiempo de ejecución del puente RCT CXX, que es una API privada, y declaramos esto con un simple puntero. Y más tarde, básicamente, de nuevo, declaramos una función sincrónica bloqueante que podemos llamar desde JavaScript. Obtenemos el puntero de tiempo de ejecución de JSI desde el puente, y luego lo convertimos, y luego creamos el sujeto de exportación. Nuevamente, llamamos a la función RealmJSIInit para poblarlo, y finalmente, lo almacenamos en el global para que podamos acceder a él desde JavaScript. Luego finalmente retornamos.

Bien, la última y más reciente alternativa que voy a presentar es NitroModules. Es el nuevo en el bloque introducido por Marcello y Mark Rosevie. Es muy rápido en benchmarks sintéticos. Soporta C++, Swift, Kotlin. Es mucho más expresivo en la parte de generación de código que las otras alternativas. Aprovecha el estado nativo de JSI y establece correctamente la presión de memoria externa. También soporta tanto la nueva como la antigua arquitectura desde hace unos días, a lo cual volveré. El único inconveniente que puedo ver ahora mismo al usar esto es que requiere que los desarrolladores de aplicaciones como tus usuarios de biblioteca instalen una dependencia de pares llamada React Native NitroModules, pero creo que esto es solucionable en el futuro.

Bien, así que mi conclusión es que, o al menos hasta hace unos días, sería usar el patrón de módulo TurboNative compatible hacia atrás. Esta es la forma oficial bendecida de hacer las cosas, pero NitroModules cambió y ya no solo soporta la nueva arquitectura. Así que diría que uses NitroModules si te sientes aventurero, pero entonces ¿a quién estoy engañando? Estás usando React Native, así que por supuesto te sientes aventurero. Así que básicamente, el último consejo antes de irme, pre-construir es una forma de tomar una parte de tu código nativo y construirlo en tu máquina en lugar de en la máquina del usuario final. El beneficio de esto es reducir el tiempo de construcción en las máquinas de tus usuarios de biblioteca y también la complejidad en sus cadenas de construcción. Otro beneficio es que obtienes fallos de tipo en tu tiempo de desarrollo en lugar de hacerlo en las máquinas de los desarrolladores, como las máquinas de tus usuarios. Una limitación de Xcode y CocoaPods es que no pueden manejar un proyecto CMake. Y esta es una forma de solucionar eso, básicamente usar CMake para generar un proyecto Xcode que básicamente pueda pre-construir un marco XE, por ejemplo. Eso es lo que estamos haciendo en Realm. Luego, una limitación aquí en el lado de Android es que estos están en decay, como todos estos pre-construidos son específicos de ABI en decay, lo que significa que tienes que enviar múltiples pre-construidos, uno por en decay, pero generalmente no es un problema muy grande porque las versiones en decay no cambian tan a menudo. O eso, necesitas entonces, si no envías múltiples, entonces necesitas declarar, supongo, con qué versión en decay es compatible tu biblioteca.

6. Conclusion and Final Remarks

Short description:

Asume o afirma en el momento de la construcción. No accedas a las APIs de React Native desde pre-construcciones. Usa una caché de compilador para acelerar la compilación. Conclusión: Usa módulos Nitro, considera pre-construcciones y utiliza una caché de compilador. Contacta para preguntas o comentarios.

Y luego, asume o afirma eso en el momento de la construcción. Bien, otra limitación es que, y esto es súper importante, no deberías acceder a las APIs de React Native desde tus pre-construcciones. Y esto se debe a que el límite de ABI o el ABI no es estable a través de las versiones de React Native. Súper importante.

Bien, por último, si sientes que está tomando demasiado tiempo compilar cosas, entonces en Android puedes usar una caché de compilador o puedes hacerlo tanto en Android como en iOS, pero usa una caché de compilador. En Android, es bastante simple. Son solo estas líneas en tu archivo CMakeList. En iOS, solía ser un poco más difícil, pero luego con esta solicitud de extracción que realicé, es más fácil. Solo puedes declarar usar C cache uno al instalar el pod. Si tienes C cache instalado, eso va a dirigir y hacer que el compilador compile a través de C cache. Y luego, las compilaciones subsiguientes de tu módulo nativo serán mucho más rápidas.

Bien, así que la conclusión final. Usa módulos Nitro. Si tu proyecto C++ es complejo, puedes usar pre-construcciones, pero ten cuidado. Si te cansas de esperar, usa una caché de compilador. Esa es mi conclusión por ahora. Si quieres aprender más, he incluido un par de enlaces aquí. Muchas gracias por tu tiempo y atención. Es un bien escaso en estos días. Contacta si tienes alguna pregunta o comentario sobre esta charla y nos vemos más tarde.

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

Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
React Advanced 2023React Advanced 2023
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Llevando los Componentes del Servidor React a React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Llevando los Componentes del Servidor React a React Native
Top Content
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
Herramienta Multiplataforma de React Native Kotlin
React Day Berlin 2022React Day Berlin 2022
26 min
Herramienta Multiplataforma de React Native Kotlin
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
“Microfrontends” para móviles en React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” para móviles en React Native
Top Content
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
React Advanced 2021React Advanced 2021
21 min
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

Workshops on related topic

Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
React Summit 2022React Summit 2022
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
Cómo construir una animación interactiva de “Rueda de la Fortuna” con React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Introducción - Cleo & nuestra misión- Lo que queremos construir, cómo encaja en nuestro producto & propósito, revisar los diseños- Comenzando con la configuración del entorno & “hola mundo”- Introducción a la animación de React Native- Paso 1: Hacer girar la rueda al presionar un botón- Paso 2: Arrastrar la rueda para darle velocidad- Paso 3: Agregar fricción a la rueda para frenarla- Paso 4 (extra): Agregar hápticos para una sensación inmersiva
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Pruebas Efectivas con Detox
React Advanced 2023React Advanced 2023
159 min
Pruebas Efectivas con Detox
Workshop
Josh Justice
Josh Justice
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
Llevando tu aplicación web a nativa con Capacitor
JSNation 2023JSNation 2023
111 min
Llevando tu aplicación web a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación web que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu código base sea lo más cercano posible en la Web, Android e iOS. Afortunadamente, con Capacitor, puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuir en tu App Store favorita.
Contenido: Este masterclass está dirigido a desarrolladores principiantes que tienen una aplicación web existente o están interesados en el desarrollo móvil. Repasaremos:- ¿Qué es Capacitor?- ¿Cómo se compara con otras soluciones multiplataforma?- Usando Capacitor para construir una aplicación nativa utilizando tu código web existente- Organizando nuestra aplicación para su distribución en tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más