Video Summary and Transcription
La charla de hoy profundiza en el desarrollo de React Native, explorando el proceso de desarrollo, la comunicación entre JavaScript y nativo, y la implementación de aplicaciones. Destaca el proceso de construcción de aplicaciones, el comando React Native Run iOS y los gestos de desarrollo para una ejecución eficiente. La charla también enfatiza el proceso recomendado para iniciar y probar tu aplicación, así como manejar el error de la 'pantalla roja de la muerte' instalando bibliotecas faltantes y comprendiendo el papel del administrador de interfaz de usuario en la creación de vistas nativas.
1. Introducción al desarrollo de React Native
Hola a todos, soy Charlotte, una líder técnica de React Native en BAM. Hoy profundizaremos en tu aplicación, entenderemos qué sucede cuando la construyes y aprenderemos a ser más eficientes. Permíteme compartir una historia. Un día, me encontré con un gran error y no sabía cómo resolverlo. Solía eliminar todo y comenzar desde cero, perdiendo tiempo. Mi colega me aconsejó entender qué está sucediendo dentro de la caja negra. Eso es lo que haremos hoy. Un recordatorio rápido: React Native utiliza componentes principales en lugar de elementos HTML. ¡Comencemos!
tu aplicación. Estudiaremos el interior de tu aplicación y qué sucede cuando la construyes. Y luego veremos cómo podemos utilizar esta información para ser más eficientes en nuestro día a día. Pero déjenme contarles una breve historia antes.
Un día estaba trabajando en mi escritorio y apareció un gran error rojo en mi pantalla. El tipo de error que no entendía y no sabía cómo resolver. Ese día hice lo que solía hacer en ese entonces para solucionarlo. Eliminé todo. Mi aplicación, mi simulador, tal vez incluso mi servidor de metro. Y después de ese segundo paso, volví a lanzarlo todo desde cero, completamente nuevo. Ejecuté Yang install, Pod install. Reconstruí toda mi aplicación. No entendía lo que estaba sucediendo dentro de mi simulador. Así que no pude identificar qué pieza del rompecabezas estaba fallando. Así que comencé todo de nuevo. Y funcionó. Pero estaba perdiendo mucho tiempo. Y ese día, una de mis colegas pasó y me vio eliminando todo sin ninguna compasión. Y me aconsejó tratar de entender qué estaba sucediendo dentro de esta caja negra. Así que eso es lo que hice. Y eso es lo que vamos a hacer hoy.
Un recordatorio rápido antes de comenzar. Para aquellos de ustedes que trabajan en la web, lo que deben saber sobre React Native es que en lugar de usar elementos HTML como divs y spans, vamos a usar componentes principales de React Native, como botones y texto. Y a partir de esos componentes, React Native va a pedirle al nativo que cree los componentes nativos asociados de Android e iOS. De acuerdo. Comencemos. Esta es una vista de una aplicación de React Native en nuestro entorno de desarrollo. Hay dos partes en este esquema, una parte de JavaScript y una parte nativa. En el lado de JavaScript, tenemos algo de código.
2. Proceso de desarrollo de React Native
Tenemos código JS, JSX y TypeScript, que se transferirá a JavaScript mediante Babel. Mitro, el empaquetador de JavaScript, empaquetará el JavaScript en un solo archivo llamado bundle. En el lado nativo, tenemos Swift y Objective-C en iOS, y Java y Kotlin en Android. El código nativo debe compilarse, lo que producirá un archivo ejecutable IPA en iOS y APK en Android. Una aplicación de React Native es una aplicación nativa que instancia un motor de JavaScript para compilar y ejecutar el bundle de JavaScript, permitiendo la comunicación entre el mundo JavaScript y el mundo nativo.
Tenemos código JS, JSX, pero también código TypeScript. Este código se transferirá a JavaScript mediante Babel. El JSX se transferirá a JS y el JS se transferirá a un JS más antiguo sin ninguna de las nuevas características que las máquinas antiguas no pueden entender. Luego tenemos Mitro. Mitro es un empaquetador de JavaScript, el equivalente móvil de Webpack. Empaquetará el JavaScript en un solo archivo que se llama bundle. Y React Native solo trabajará con este archivo único. Si realizas cambios en tu código JavaScript, Mitro agregará esos cambios al bundle y actualizará tu aplicación al vuelo. Eso es todo para el JS.
Ahora, echemos un vistazo a la parte nativa. En el lado nativo, tenemos código nativo, ya sea Swift y Objective-C en iOS, y Java y Kotlin en Android. Si abres tu aplicación en tu IDE, verás una carpeta de Android y una de iOS. Y en este directorio de iOS, tienes todo lo que necesitas para crear una aplicación de iOS. Si estás construyendo una en Swift, de hecho, estarías trabajando dentro de este directorio.
Ahora, este código nativo debe compilarse, y este proceso de compilación va a producir una aplicación ejecutable, IPA en iOS, APK en Android. Estas son aplicaciones nativas que podremos instalar en nuestro teléfono. Estas dos aplicaciones, el bundle y el IPA, nos permitirán construir nuestra aplicación de React Native. Echemos un vistazo más de cerca a ellas. Esta es la parte interna de una aplicación de React Native. En realidad, se construye a partir del IPA que se ejecutó. Una aplicación de React Native es realmente solo una aplicación nativa que instanciará un motor de JavaScript que compilará y ejecutará el bundle de JavaScript. El mundo JavaScript podrá comunicarse con el mundo nativo. Esto funciona así. Imagina que tenemos este componente simple que renderiza un botón con un título especial. Primero, el JavaScript renderizará su botón en la pantalla. Para hacer esto, dará instrucciones al nativo para que renderice el componente nativo equivalente. Entonces dice: `Por favor, nativo, ¿podrías renderizar este botón para mí?` Y el nativo responde: `Por supuesto. Aquí lo tienes. El usuario acaba de presionarlo. Tal vez deberías activar esta devolución de llamada cuando se presione.`
3. Comunicación entre JavaScript y Nativo y Despliegue de la Aplicación
El JavaScript se comunica con el lado nativo a través de un puente, que cambiará con la nueva arquitectura. Si quieres saber más, asiste a charlas en React Advanced. Una vez desplegados en las tiendas, el paquete de JavaScript y la aplicación nativa se producen en tiempo de compilación. Antes de continuar, déjame preguntarte, ¿siempre ejecutas React Native Runner OS para iniciar tu aplicación por la mañana?
Y el JavaScript lo hace. En nuestro caso, cambia el título del botón. Entonces el JavaScript dice, oye, nativo, ¿podrías cambiar este título de botón por mí? Y el nativo lo hace. Y así es como, como usuario, ahora puedo ver el nuevo título del botón en la pantalla.
Ahora, la comunicación entre el JavaScript y el nativo actualmente se maneja a través de un puente. El puente es una cola donde el JavaScript y el nativo intercambian mensajes JSON, como por favor cambia este título de botón. Pero esto cambiará con la nueva arquitectura de la que quizás hayas oído hablar. No profundizaremos en este tema, pero las ideas principales de esta charla seguirán siendo válidas dentro de tu arquitectura. Y si quieres saber más sobre lo que cambiará, habrá varias charlas sobre este tema en React Advanced.
Así que te aconsejaría que escuches una de las charlas de Nicola Corti o Gunther Bord. Volvamos a nuestra aplicación React Native. Tenemos nuestra aplicación. Pero tal vez, algún día, nos gustaría tener algunos usuarios y enviarla a algunas tiendas. Dijimos anteriormente que nuestro entorno de desarrollo de JavaScript producía el paquete de JavaScript. Pero una vez que lo desplegamos en las tiendas, ya no tenemos nuestro entorno de desarrollo. No necesitamos que Metro agregue ningún cambio de JavaScript con escrituras. En modo de lanzamiento, el paquete de JavaScript se produce de una vez por todas en tiempo de compilación. Y lo mismo ocurre con la aplicación nativa. Desplegamos eso en las tiendas. Así que genial. Tenemos nuestra aplicación React Native.
Antes de continuar, tengo una pregunta rápida para ti. ¿Cómo inicias tu aplicación por la mañana? ¿Por casualidad siempre ejecutas React Native Runner OS? Espero que no. No, espera. En realidad, sí lo hago. De lo contrario, no tendría nada que enseñarte. De todos modos, eso es lo que solía hacer. Pero no era la forma más eficiente de comenzar mi día. Para aquellos de ustedes que trabajan en la web, React Native Runner OS es el comando que usamos para crear y ejecutar nuestra aplicación. Es un comando muy práctico.
4. Proceso de Construcción de la Aplicación
Cuando construimos nuestra aplicación, lleva bastante tiempo, aproximadamente cinco minutos cada vez. Veamos qué sucede durante este proceso.
Se inicia un simulador. Se construye e instala nuestra aplicación, y estamos listos para comenzar. El problema es que este comando lleva bastante tiempo, aproximadamente cinco minutos cada vez. Pero, ¿qué está tardando tanto? Veamos qué sucede cuando construimos nuestra aplicación, ¿de acuerdo? Aquí encontraremos los mismos elementos que en los primeros esquemas, pero en una vista más cronológica. Además, en este momento estoy hablando mucho sobre iOS. Pero Android es prácticamente lo mismo. Y para esta parte, ten en cuenta que estoy hablando de la architecture heredada, no la nueva , pero las conclusiones serán las mismas. Comencemos.
5. Comando React Native Run iOS
Cuando ejecutamos React Native Run iOS, ocurren dos cosas en paralelo. En primer lugar, un servidor Metro recopila y transpila el código JavaScript en un paquete. En segundo lugar, se lanzan simuladores y se compila el código nativo para producir un IPA ejecutable. Los módulos nativos se cargan y el motor JavaScript solicita el paquete a Mitra. Una vez recibido el paquete, el motor JavaScript lo ejecuta, creando vistas nativas para los componentes de la interfaz de usuario. Tu aplicación está lista para usar.
Esta es una vista de nuestro comando React Native Run iOS. Cuando ejecutamos React Native Run iOS, ocurren dos cosas en paralelo. Por un lado, vamos a ejecutar un servidor Metro. Este servidor Metro va a recopilar todo el código JavaScript en el paquete, transpilarlo con Babel y entregar este paquete. Pero por ahora, es un servidor. Está ramificado en un puerto y está esperando instrucciones para llegar.
Por otro lado, vamos a abrir nuestros simuladores y lanzarlos. Y vamos a ocuparnos de nuestro código nativo. Como dijimos antes, el código nativo debe ser compilado. Y este proceso de compilación va a producir una aplicación, un ejecutable, un IPA que vamos a instalar en nuestro simulador. Una vez instalado, lo vamos a lanzar.
Y ahora ocurren dos cosas más en paralelo. Por un lado, vamos a cargar los módulos nativos. Los módulos nativos exponen clases nativas al JavaScript. Esas son clases. Necesitan ser instanciadas en algún momento. Por otro lado, vamos a iniciar el motor JavaScript que va a hacer una solicitud a Mitra para obtener el paquete. Y en este punto, si miras en tu inspector de red, verás esta solicitud hecha a tu propio localhost. También verás en el servidor Mitra esta barra de progreso. Una vez que el motor JavaScript obtiene el paquete, lo ejecuta. Recorreremos el árbol de componentes JavaScript dando órdenes al nativo para crear las vistas nativas cada vez que se encuentre un componente de la interfaz de usuario. Y eso es todo. Tu aplicación está lista para usar. Felicidades.
6. Gestos de Desarrollo y Arranque de la Aplicación
Vamos a explorar algunos gestos de desarrollo y cómo ejecutarlos de manera eficiente en el mundo móvil. Cuando realizamos un cambio en JavaScript, el sistema de escucha de Watchman de Mitra lo agrega al paquete y activa las recargas. Para los cambios nativos, el código debe compilarse e incluirse en la aplicación, lo que requiere una reconstrucción. La instalación de dependencias de JavaScript se puede hacer con YARN install, mientras que las dependencias nativas requieren ejecutar react native run iOS. Para iniciar la aplicación diariamente solo se necesita un servidor Mitra, el dispositivo anterior y la aplicación instalada.
Ahora que tenemos esto, echemos un vistazo a algunos gestos de desarrollo del día a día y veamos cómo podemos ejecutarlos de manera eficiente en nuestro mundo móvil. Lo primero que haces cuando desarrollas es, bueno, desarrollar. Entonces haces un cambio, un cambio en JavaScript. Esta receta diferente aquí es la de Mitra. Mitra tiene un sistema de escucha llamado Watchman que escuchará los cambios que hagas dentro del código. Y cuando agregas algo de JavaScript, lo agrega al paquete y activa las recargas. Entonces, para ver los cambios en nuestra aplicación, gracias a la recarga en caliente, solo necesitamos guardar nuestro código.
Ahora otro tipo de cambio, uno más complicado que puedes hacer en el código, es un cambio nativo. Este nuevo código nativo que agregaste debe compilarse e incluirse en nuestra aplicación. Corresponde a este paso en nuestro árbol. Lo que debemos entender aquí es que este proceso de compilación producirá una nueva aplicación y la instalará en nuestro teléfono. Sobrescribirá por completo la aplicación anterior que teníamos instalada. Entonces, para ver nuestro nuevo cambio nativo, debemos reconstruir nuestra aplicación, ya sea ejecutando React Native run iOS o construyéndola con Xcode.
Ok, ¿qué más hacemos con frecuencia? ¡Ah, las bibliotecas! Digamos que tu aplicación se está ejecutando, estás programando felizmente y necesitas instalar una nueva dependencia de JavaScript. Lo que debes hacer aquí es simplemente ejecutar YARN install. Ves, Mitro vigila nuestro código fuente pero también vigila nuestros modules de nodo. Entonces ejecutas YARN install y Mitro agregará este cambio al paquete. Pero no solo dependemos de las dependencias de JavaScript. También dependemos de algunas dependencias nativas. Entonces, si agregaste una nueva dependencia nativa ejecutando prod install, que es el comando que usamos para agregar una dependencia nativa de iOS, el equivalente de YARN install en iOS. Si agregaste esta nueva biblioteca, esta nueva biblioteca nativa, este es un nuevo código nativo que también debe compilarse. Corresponde a este paso en R3. Entonces debes ejecutar react native run iOS para reconstruir tu aplicación.
Ahora el gesto principal que quería revisar contigo hoy es este, cómo iniciar tu aplicación diariamente. Porque, como dije, solía ejecutar React native run iOS todos los días para lanzar mi aplicación, pero no era realmente necesario. Ves, cuando ejecutas este comando, pasas por todos esos pasos, incluida la compilación del código nativo, que realmente lleva la mayor cantidad de tiempo aquí. Pero a menos que hayas agregado una nueva biblioteca nativa durante la noche, no necesitas hacer esto. Tu aplicación ya está instalada en algún lugar en un simulador en tu computadora. Lo que necesitas para iniciar tu aplicación son realmente tres cosas. Un servidor Mitra, el dispositivo que usaste el día anterior y la aplicación instalada en ese dispositivo.
7. Starting and Testing Your App
El proceso recomendado para iniciar tu aplicación es ejecutar un servidor Mitra, lanzar tu simulador y hacer clic en tu aplicación para iniciarla. No es necesario ejecutar React Native en iOS todos los días, pero se recomienda hacerlo ocasionalmente. También es importante probar tu aplicación en un simulador diferente. No es necesario compilar tu código nativo nuevamente; puedes instalar el ejecutable en otro simulador. No es necesario cerrar el simulador al encontrar errores. Hay dos errores principales relacionados con el problema de los saldos: uno en JavaScript y otro en el mundo nativo.
Entonces, el proceso que recomendaría para iniciar tu aplicación es el siguiente. Primero, ejecutas un servidor Mitra ejecutando react native start. Luego, lanzas tu simulador. Puedes hacerlo en la línea de comandos o usando Spotlight seleccionando tu aplicación de simulador. Luego, debes hacer clic en tu aplicación en el simulador para iniciarla. Y eso es todo. Ya ahorra mucho tiempo.
Una pequeña advertencia, sin embargo. Aunque te recomiendo encarecidamente que no ejecutes React Native en iOS todos los días para iniciar tu aplicación, aún te recomiendo que lo ejecutes de vez en cuando. Verás, si estás trabajando en un proyecto donde ya no ocultas bibliotecas con frecuencia, el riesgo es que el día que necesites construir tu aplicación, ya no funcione. Y no quieres pasar tres horas depurando este proceso cuando tienes una nueva versión para entregar a las tiendas.
Avancemos al último gesto, probar tu aplicación en un simulador diferente. Eso es algo que tengo que hacer todos los días. Por lo general, trabajo en un simulador específico, pero tengo que probar mi código en diferentes situaciones, con una pantalla más pequeña o sin muesca, por ejemplo. Hasta que aprendí todo esto, solía ejecutar React Native Run iOS todos los días para hacerlo. Pero no es necesario. Puede que empieces a entender por qué ahora. No necesitas compilar tu código nativo nuevamente. Tu código nativo no es específico de un iPhone en particular. Todo lo que necesitas hacer es tomar el ejecutable que ya construiste e instalarlo en otro simulador. En Android, puedes hacer esto ejecutando ADP install. En iOS, puedes hacer esto en Xcode seleccionando Run Without Building.
Es posible que hayas notado que ninguno de estos pasos incluye cerrar tu simulador. Eso es algo que solía hacer cada vez que encontraba uno de esos grandes errores rojos de los que no sabía cómo deshacerme. Pero ahora que sabemos qué hay dentro de esta caja negra, tal vez podamos intentar juntos entender esos errores y ver cómo solucionarlos sin cerrar nada. Básicamente, nos encontramos con dos errores principales relacionados con el problema de los saldos. El primero ocurre en JavaScript, mientras que el otro ocurre en el mundo nativo. Echemos un vistazo al primero. Nos dice que no se pudo encontrar nuestra biblioteca dentro del proyecto. Esto significa que estamos usando una biblioteca que no hemos instalado.
8. Handling Red Screen of Death Error
Para solucionar el error de la 'pantalla roja de la muerte', debes instalar la biblioteca faltante ejecutando 'yarn install'. Si la biblioteca tiene una parte nativa, también debes instalarla usando 'pod install' y reconstruir la aplicación con 'react native run iOS'. Es crucial comprender el papel del administrador de interfaz de usuario en la creación de vistas nativas. Si el administrador de interfaz de usuario no puede encontrar el elemento nativo, significa que la parte nativa de la biblioteca no se instaló correctamente. Asegúrate de instalar tanto las partes de JavaScript como las partes nativas para evitar errores. Gracias por escuchar!
Entonces, solo necesitamos instalarlo ejecutando 'yarn install' y aquí vamos de nuevo. Este error también puede ocurrir en otra situación. Imagina que mientras tu aplicación se está ejecutando, haces pull en tu rama principal y alguien más agregó una biblioteca. Antes de que tengas la oportunidad de ejecutar 'yarn install', estás usando una biblioteca que aún no has instalado. Entonces, JavaScript está diciendo que no conoce esta cosa que estás tratando de usar. Así que simplemente ejecutas 'yarn install'.
Pero, ¿qué pasa con lo instantáneo? Piensa en esto. Esta biblioteca también puede tener una parte nativa. En este caso, también debes instalarla ejecutando 'pod install' y compilarla. Entonces, debes reconstruir tu aplicación ejecutando 'react native run iOS'.
Avancemos al segundo error. Nos dice que no puede encontrar el elemento de nuestra biblioteca en el administrador de interfaz de usuario. El administrador de interfaz de usuario maneja las operaciones de interfaz de usuario, como la creación de vistas nativas. Cuando JavaScript solicita la creación de un elemento nativo, el administrador de interfaz de usuario maneja esa solicitud y la transfiere a la parte nativa. Y en este error, el administrador de interfaz de usuario está diciendo que no conoce el elemento nativo. Por lo tanto, significa que nuestra biblioteca no se ha instalado correctamente. Y específicamente, falta la parte nativa. Estamos seguros de que la parte de JavaScript se instaló. De lo contrario, habríamos tenido un error antes en el lado de JavaScript. El error que vimos justo antes, en realidad. En nuestro caso, este error ocurre después cuando JavaScript solicita al nativo que renderice los componentes. Para solucionar esto, solo necesitamos instalar la parte nativa ejecutando 'pod install' y luego 'react native run iOS'.
Espero que la próxima vez que te encuentres con la pantalla roja de la muerte, entiendas qué está sucediendo detrás de escena. Y sepas cómo manejarlo. Eso es todo por mi parte. Muchas gracias por escuchar. Fue mi primera charla y me alegró mucho darla. Además, por favor no cierres tu simulador. Son personas agradables.
Comments