Qué Sucede Cuando Construyes Tu Aplicación

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.

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.`

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.

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.

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.

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.

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.

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.