Expo Prebuild, Desmitificado

♪ Expo pre-build desmitificado. Ahora, esta es una charla no solo para principiantes, sino también para usuarios avanzados de Expo, porque creo que el comando pre-build es confuso. Hay bastante profundidad en él, y podemos tener algunas ideas erróneas o supersticiones al respecto. Así que, esta charla va a cubrir primero, ¿qué es Expo pre-build? Te introducirá a las plantillas, ya que es un poco difícil discutir una sin la otra. Y luego, basándose en eso, te enseñará cómo construir tus propias plantillas personalizadas. Y finalmente, reuniremos todas esas habilidades introduciendo la generación continua de naturaleza.

Así que, primero, ¿qué es Expo pre-build? Creo que la forma más fácil de explicar esto es simplemente demostrar lo que sucede cuando creas una aplicación Expo y luego ejecutas pre-build en ella. Así que, haremos eso. Ejecuta este comando, crea expo app, simplemente crearemos expo para abreviar, y terminarás con una carpeta así. Lo que es, es una aplicación Expo Go basada en Expo template default. Sin embargo, hay algunas restricciones con esto. No puedes usar código nativo, o más bien, las únicas APIs nativas que puedes llamar son las del Expo SDK. Así que, solo una aplicación JavaScript.

Entonces, ¿qué pasa si quieres ir más allá de una aplicación Expo Go? Bueno, ahí es donde entra pre-build. Ejecutas el comando Expo pre-build, y lo que tiendes a ver y de lo que tiendes a ser consciente es, este es el comando que genera esas carpetas de iOS y Android. Y el efecto de esto es que crea una compilación de desarrollo. Y esta es una aplicación independiente, que no depende del cliente Expo Go, donde puedes usar cualquier módulo nativo que desees. Y la plantilla en la que se basa este pre-build es Expo template bare minimum. Así que, tenemos dos plantillas aquí. ¿Qué está pasando? Es hora de hablar sobre plantillas.

Así que, en mi mente, hay dos tipos de plantillas. Estos no son términos oficiales, pero creo que ayuda a discutirlo. Hay plantillas de aplicación y plantillas de pre-construcción. Primero hablaremos de las plantillas de aplicación. Así que, las plantillas de aplicación proporcionan la base inicial para una aplicación, normalmente una aplicación Expo Go, pero entraremos en eso. Estas serán familiares. Está la plantilla por defecto, que hoy en día hace una aplicación Expo router. Hay en blanco, pestañas de escritura en blanco. Ya sabes, las que son. Una plantilla de aplicación se verá así.

Tienes una carpeta de assets, tienes tu archivo de punto de entrada app.js, y tienes el package.json, por supuesto. Bueno, una cosa que destaca, sin embargo, es que no tiene carpetas de Android o iOS. Entonces, ¿de dónde vienen esas? Ahí es donde entran las plantillas de pre-build.

Las plantillas de pre-build son las plantillas que proporcionan las carpetas nativas. También pueden especificar algunas dependencias nativas en package.json. Y en realidad solo hay una plantilla de pre-build de la que estoy al tanto. Estoy seguro de que hay otras flotando por ahí, pero esta es la que viene con el SDK de Expo. Y así es como se ve. Tiene, como se anuncia, las carpetas de Android e iOS. También tiene un package.json. Pero tiene algunas otras cosas. ¿Por qué es eso? Eso es simplemente porque bare minimum también puede usarse como una plantilla de aplicación. Si ejecutas create Expo app y especificas la plantilla bare minimum, en realidad puedes hacer una aplicación a partir de ella. Y lo genial de esto es que la aplicación que obtienes se convierte en una pre-construida lista. Ves las carpetas de Android e iOS justo ahí. Eso es bastante genial. No es de mucha utilidad, porque a menudo bare minimum no es la plantilla de aplicación que deseas. Tal vez quieras una aplicación de Expo router o quieras TypeScript o lo que sea. Pero solo para mostrarte el concepto de que puedes hacer una plantilla de aplicación pre-construible.

Pasando al siguiente punto. Este es el núcleo de la charla. ¿Qué sucede realmente cuando ejecutas Expo Pre-build? Son bastantes cosas, creo que encontrarás. Así que digamos que tenemos una aplicación basada en cualquiera de esas plantillas de aplicación. La llamamos MyApp y le faltan estas carpetas de Android e iOS. Así que queremos ejecutar pre-build para generarlas. Elegiremos bare minimum como la plantilla para pre-construir. Y como se discutió, tiene todos esos archivos. Tiene un montón de archivos que pueden no entrar en juego, pero mantén tus ojos en las carpetas de Android e iOS en particular.

Así que el conocimiento superficial que todos sabemos es que pre-build copia las carpetas de Android e iOS si faltan. Si ya tienes carpetas de Android e iOS, omitirá ese paso a menos que pases esta bandera clean, que eliminará las carpetas de Android e iOS y luego continuará como de costumbre. Así que puedes usar la bandera clean para sobrescribir tus carpetas de Android e iOS existentes.

Pero queda mucho espacio en esta diapositiva. Entonces, ¿cuáles son todas las otras cosas que hace pre-build? Bueno, la primera es bastante aburrida. Si las carpetas de Android e iOS tienen un archivo gitignore en ellas, en realidad va a tomar los detalles de esos, elevarlos al nivel superior y fusionarlos en el gitignore de nivel superior. También se asegura de que tengas un app.json si eso falta en tu aplicación ya. Y es en esta etapa del proceso que si tienes algún archivo dentro de la carpeta iOS o Android, que se llame Hello World, o tenga algún contenido que use la cadena Hello World, todos esos se renombrarán al nombre de tu aplicación. Recuerda que create expo app también hace esto cuando está creando la aplicación. Así que cuando estés creando plantillas, solo recuerda que puedes usar la cadena Hello World como una palabra mágica para algo que se reemplaza por el nombre real de la aplicación del usuario y el identificador de paquete en el contexto correcto.

La otra cosa que hace es que actualiza tus scripts de iOS y Android, si es aplicable. Así que si ya tienes scripts de Expo Go, que digan expo start Android, expo start iOS, estos se actualizarán a scripts de expo run. ¿Qué más hace? También fusiona la plantilla, es decir, las dependencias de las plantillas pre-construidas, en el package.json de tu aplicación. Así que cualquier plantilla que difiera entre ellas, simplemente las fusiona. Y esto es útil si, en tu plantilla pre-construida, quieres especificar algunos paquetes nativos como dependencias. Por último, en realidad no del todo por último, va a instalar los módulos de node y CocoaPods a menos que pases esta bandera no install. Y finalmente, si hay algún plugin de configuración o mods para ejecutar, esta es la etapa en la que los ejecutará, el paso de pre-build.

Así que ahora sabemos cómo funciona pre-build. Aprendamos un poco más sobre las plantillas mientras estamos aquí. ¿Cómo construirías tu propia plantilla personalizada? Primero, hagamos un fork de una plantilla existente. Así que puedes tomar una copia de una plantilla existente, dependiendo de si quieres trabajar con una plantilla pre-construida o una plantilla de aplicación.

Vamos a usar este expo-template-bare-minimum que se encuentra aquí en el monorepo de Expo. Haz cualquier cambio que desees. Y luego hay un par de maneras en que podemos compartirlo. Ambos comandos, create-expo-app y expo-prebuild, pueden consumir plantillas. Y todo lo que tienes que hacer es pasar un valor para esta bandera de plantilla. Puede tomar uno de dos formatos. Puede ser una ruta de archivo a una tabla local, que puedes hacer simplemente usando npm pack. O puede ser una URL a un repositorio de GitHub, siempre que sea público. Ahora, esto es realmente poderoso. Y creo que deberíamos usar mucho más esto porque nos permite compartir algunas aplicaciones de Expo realmente pesadas en boilerplate de una manera realmente fácil.

Así que un ejemplo real de esto sería, ejecutas create-expo-app en esta plantilla mía. Y puedes ver cada una de estas diferentes partes de la URL porque es una URL estándar de GitHub. Puedes especificar un nombre de usuario o repositorio, una rama y una ruta de archivo, por lo que es realmente flexible. Y me gustaría repasar cómo funciona volver a ejecutar Prebuild. Así que, si tienes una plantilla personalizada en particular, Expo no recuerda la última plantilla con la que preconstruiste. Así que si preconstruiste tu aplicación desde una plantilla personalizada, solo recuerda especificar esa misma plantilla en el futuro al volver a ejecutar una preconstrucción. Te mostraré a qué me refiero. Si preconstruiste desde una plantilla personalizada, no ejecutes expo-prebuild-clean porque eso te dará el mínimo por defecto. En su lugar, deberías ejecutar expo-prebuild-clean y especificar esa misma plantilla antigua o una versión más nueva de esa plantilla. Así que es tu responsabilidad mantener una versión actualizada de ese fork de plantilla.

Y usando todas estas habilidades, podemos entender un poco más sobre la generación nativa continua. Entonces, primero, ¿qué es? A medida que pasa el tiempo, tus proyectos nativos pueden quedar desactualizados. La generación nativa continua es la idea de mantener tus proyectos nativos actualizados al regenerarlos. Y se sugiere fuertemente que Prebuild es la forma en que deberías hacer esto. ¡Cha-ching! ¡Cha-ching! Así que, veamos qué quieren decir con eso. ¿Cómo puede Prebuild ayudarte a realizar este flujo de trabajo de CNG? Ahora, la plantilla mínima se actualiza junto con el SDK de Expo. Verás una etiqueta para cada versión principal del SDK. Cuando ejecutas expo-prebuild, por defecto, usa la versión mínima que corresponde a cualquier paquete de Expo que tengas instalado. Así que mantenerse actualizado es simple. Solo mantén Expo actualizado, y luego ejecuta Prebuild cada vez que lo actualices.

Solo asegúrate de que sea un Prebuild limpio. Lo último es evitar perder modificaciones manuales, solo recuerda declararlas a través de expo-config plugins. Pero si las pierdes, no es el fin del mundo, porque puedes simplemente controlar las carpetas de iOS y Android con control de versiones. E incluso si pierdes esas modificaciones manuales con la actualización de Prebuild, puedes intentar averiguar cómo volver a aplicarlas. Pero es por eso que hacer esto de manera declarativa te ahorra muchos problemas.