Construyendo una aplicación móvil con Expo, EAS y React Native

Rate this content
Bookmark

Nunca ha sido tan fácil para los desarrolladores de React construir aplicaciones nativas para iOS y Android. En esta charla, veremos lo rápido que puedes lanzar tu aplicación con las herramientas de código abierto de Expo, Expo Application Services (EAS) y React Native. También discutiremos algunas de las mejoras recientes que hemos realizado y lo que viene a continuación.

35 min
14 May, 2021

Video Summary and Transcription

Esta charla proporciona una visión general de la construcción de aplicaciones React Native con Expo y Xcode. Cubre proyectos gestionados por Expo, XO, Turtle, personalización de tiempo de ejecución, Expo Development Client y EAS. La charla también menciona las ventajas de Expo Updates, el enfoque en un tiempo de ejecución personalizable y la adición de bibliotecas nativas. Se recomiendan aplicaciones y bibliotecas favoritas de React Native, y los objetivos futuros incluyen mejorar el rendimiento y mejorar la experiencia de desarrollo a través de EAS.

Available in English

1. Introducción a React Native y Xcode

Short description:

Esta charla proporciona una descripción general de la construcción de aplicaciones React Native con Expo y EAS. React Native es una buena opción para construir aplicaciones Android, iOS y web. Es necesario tener familiaridad con el código y las herramientas nativas, y Xcode puede ayudar con eso. Exploraremos lo que Xcode puede hacer, sus abstracciones y cómo resuelve las limitaciones.

Hola a todos. Mi nombre es Brent. Soy un Gerente de Ingeniería en Expo. Esta charla es una descripción general de alto nivel de la construcción de aplicaciones React Native con Expo y EAS. No vamos a hablar de cómo manejar gestos y animaciones, navegación, ni siquiera vamos a hablar de una sola línea de código React Native. Hay excelentes recursos sobre estos temas a los que enlazaré al final. Esta charla trata más sobre el proceso. Si quieres construir una aplicación para Android y iOS y usar React en la web, React Native probablemente sea una buena opción. Gran parte del conocimiento será aplicable a React Native. La API de componentes es la misma, puedes seguir usando tu biblioteca de gestión de estado favorita, las herramientas de desarrollo de React y muchas otras cosas. Otra cosa que React Native tiene en común con React DOM es que hay un núcleo pequeño y sin opiniones. Gran parte del trabajo que necesitas hacer para construir una aplicación web existe fuera de React DOM y en mayor medida con React Native. React Native no pretende proporcionar una abstracción de todo lo que necesitas hacer para construir una aplicación. Esto significa que necesitarás tener cierta familiaridad con el código y las herramientas nativas. Tendrás que aprender algunas cosas sobre Xcode, Cocoapods, Android Studio y Gradle. Tendrás que poder distinguir entre una clave de almacén y un certificado de distribución. Dependiendo de lo que estés construyendo, es posible que incluso necesites familiarizarte con la escritura de código nativo. Puedes manejar esto de varias formas. Puedes ampliar el conjunto de habilidades nativas en tu equipo de desarrolladores de React. Puedes traer expertos nativos para gestionar el lado nativo, y puedes usar las herramientas de Xcode. Xcode continúa donde React Native termina y te ayuda a ser productivo en React. Xcode es un conjunto de proyectos de código abierto y servicios alojados para ayudarte a manejar la complejidad accidental del desarrollo de aplicaciones multiplataforma.

En el resto de esta charla, veremos lo que Xcode puede hacer, cómo funcionan sus abstracciones, cómo estas abstracciones a veces pueden quedarse cortas y lo que estamos haciendo para resolver estas limitaciones. Entonces, he dicho que Xcode continúa donde React Native termina. Permíteme explicarlo. Xcode hace posible escribir tu aplicación solo en TypeScript o JavaScript y configurarla en JSON. Observa los directorios de Android e iOS en la terminal a la izquierda. Para ejecutar este proyecto, abriríamos los directorios de proyecto de Android e iOS en Android Studio y Xcode, luego compilaríamos y ejecutaríamos los proyectos. Pero no tenemos ningún proyecto nativo en la terminal a la derecha.

2. Proyectos gestionados de Expo y XO

Short description:

Esta es una descripción general de cómo funciona un proyecto gestionado de Expo. Implica abrir el proyecto en Android o iOS, descargar Xcode e instalarlo como un navegador web para el desarrollo de React Native. El tiempo de ejecución, proporcionado por Expo, incluye APIs para notificaciones y hápticos. El tiempo de ejecución es similar a la biblioteca estándar de ECMAScript en los navegadores web y se puede ampliar con extensiones nativas. Los proyectos gestionados de XO permiten cambiar el tiempo de ejecución enviando solicitudes de extracción al repositorio de XO. Otras aplicaciones de React Native requieren módulos nativos y recompilación. La instalación de XO permite instalar bibliotecas sin recompilar el código nativo. XO Go y XO publish proporcionan capacidades de vista previa y uso compartido. Snack es un entorno de sandbox para editar y ejecutar código. XpoBuild Android o iOS empaqueta la aplicación en un binario independiente para enviarlo a una tienda.

Esto se parece mucho a un proyecto de React DOM. Así es como se ve un proyecto gestionado de Expo. Lo abres en Android o iOS, descargas una aplicación de la App Store llamada Xcode e instalas. Esto es como un navegador web para desarrollar aplicaciones React Native. Incluye el tiempo de ejecución con un amplio conjunto de APIs construidas por el equipo de Expo para agregar capacidades como notificaciones y hápticos. Y el propio React Native.

Permítanme aclarar lo que quiero decir con un tiempo de ejecución. En un navegador web, el tiempo de ejecución incluye la biblioteca estándar de ECMAScript junto con las APIs web estándar. Como desarrollador que ejecuta un sitio web, no puedes cambiarlo sin enviar una solicitud de extracción al motor del navegador. El tiempo de ejecución está controlado por los proveedores de navegadores. Incluye todas las APIs que puedes usar desde JavaScript. Puedes reconocer estas como las funciones que se convierten en código nativo entre corchetes cuadrados cuando las registras constantemente. Exponen el acceso al DOM, la red y otras cosas como la ubicación del dispositivo. En Node.js, tienes la biblioteca estándar de Node en lugar de las APIs web y puedes ampliar el tiempo de ejecución mediante la creación de extensiones nativas en lenguajes como C++ o RAS. En un navegador web, el tiempo de ejecución es proporcionado por los proveedores de navegadores. En proyectos gestionados de XO, el tiempo de ejecución es proporcionado por XO. Puedes cambiarlo enviando una solicitud de extracción al repositorio de XO en GitHub. En otras aplicaciones de React Native, para cualquier cosa más allá de las APIs principales, necesitas crear o instalar módulos nativos escritos en lenguajes como Swift o Kotlin y recompilar la aplicación para poder usarlos con JavaScript. Para instalar una biblioteca en un proyecto gestionado de XO, ejecuta XO install. XO install toma una versión de la biblioteca que coincida con la versión del tiempo de ejecución utilizada por el proyecto. Llamamos a la versión del tiempo de ejecución la versión del SDK de XO. Podemos usar la biblioteca desde JavaScript sin recompilar ningún código nativo. Todos estos pueden previsualizar tu trabajo en progreso en XO Go. Para hacer esto, agrega a tu colega a tu equipo en el sitio web de XO y publica tu aplicación con XO publish. Luego, comparte la URL. Puedes configurar esto para que se ejecute automáticamente en las solicitudes de extracción y obtener un flujo de trabajo de vista previa similar a lo que puedes hacer en la web con servicios como Netlify y Vercel. También puedes compartir código en Snack. Es un tipo de entorno de sandbox que te permite editar y ejecutar código directamente en un navegador web. Cuando estés listo para enviar tu aplicación, ejecuta XpoBuild Android o iOS. Llamamos a esta herramienta de compilación Turtle porque toma tu aplicación y la empaqueta en un binario precompilado.

3. Creación de aplicaciones independientes con Turtle

Short description:

Turtle es una herramienta que ayuda a crear aplicaciones independientes para Expo. Carga el paquete de la aplicación, descarga los archivos necesarios, configura la aplicación shell y firma la aplicación con tus credenciales. Una vez completado, la aplicación se puede enviar a las tiendas. Las actualizaciones se pueden realizar descargando e intercambiando nuevo código JavaScript. Sin embargo, el tiempo de ejecución de Expo puede no cumplir con todos los requisitos de la aplicación, lo que lleva a solicitudes de funciones para bibliotecas personalizadas y código nativo.

La aplicación shell de Expo. El resultado es una aplicación independiente, un binario que puedes enviar a una tienda. Se llama una aplicación independiente porque se mantiene por sí misma. Ya no depende de Xpogo para ejecutarse. Así es como funciona Turtle. El comando de construcción carga tu paquete de aplicación JavaScript, el manifiesto y los activos, como imágenes y fuentes. Luego, Turtle crea un nuevo trabajador y descarga los archivos que acabas de cargar. También descarga nuestra aplicación shell precompilada. Luego, configura la aplicación shell en función de las propiedades del manifiesto, como el nombre y el icono. Copia el código JavaScript y los activos descargados en los recursos de la aplicación shell. Y por último, firma la aplicación con tus credenciales de firma de la aplicación. Cuando se completa todo este proceso, podemos proceder a cargar esta aplicación independiente en las tiendas. Para enviar tu aplicación, ejecuta EAS submit para PHP, Android o iOS. Bueno, más o menos. En realidad, tendrás que enviar tu aplicación a través de la consola de Google Play la primera vez que lo hagas en Android porque aún no es posible a través de ninguna API pública. Si lanzas accidentalmente tu aplicación con un error, puedes solucionarlo localmente y luego ejecutar Expo publish para actualizar el código JavaScript a través del aire. Puedes actualizar de forma segura las aplicaciones gestionadas a través del aire porque el código que posees es solo JavaScript. Es similar a actualizar un sitio web. Para actualizar la aplicación, simplemente descargamos el nuevo código JavaScript y lo intercambiamos por el paquete de JavaScript que se está utilizando actualmente en la aplicación shell. Normalmente hacemos esto cuando se reinicia la aplicación, pero puedes configurarlo de manera diferente si lo deseas. En resumen, así es como enviamos una aplicación gestionada con Expo y React Native hoy en día. Cada semana, millones de personas utilizan aplicaciones construidas por decenas de miles de desarrolladores de esta manera. Miles de aplicaciones se construyen con Turtle para su implementación en las tiendas de aplicaciones cada día. Ahora que hemos visto el camino dorado, podemos echar un vistazo a dónde estas abstracciones comienzan a quedarse cortas. Recibimos muchas solicitudes de funciones de los desarrolladores que construyen aplicaciones gestionadas de Expo, pero podemos resumirlas en uno de tres problemas. Primero, quiero usar una biblioteca que no está incluida en el SDK de Expo. Por ejemplo, React Native web RPC. Segundo, quiero eliminar bibliotecas que no estoy utilizando. Por ejemplo, para reducir el tamaño de la aplicación. Y tercero, quiero incluir código nativo que voy a escribir yo mismo y que no está en ninguna biblioteca existente. Estas tres solicitudes apuntan a un problema. Un tiempo de ejecución de Expo de talla única en realidad no`

4. Personalización de tiempo de ejecución y Cliente de Desarrollo de Expo

Short description:

Los desarrolladores tienen diferentes preferencias cuando se trata de gestionar proyectos nativos en aplicaciones React Native. Algunos eligen tomar el control de sus proyectos nativos utilizando expoeject, mientras que otros prefieren que Expo siga gestionando sus proyectos. Para abordar esto, Expo está trabajando en hacer que todas las herramientas funcionen en cualquier proyecto React Native y hacer que el tiempo de ejecución nativo sea personalizable en proyectos gestionados. Esto implica construir nuevas versiones de herramientas como Turtle Build y Expo Go, así como introducir EAS Build, un servicio que permite la construcción sin problemas y personalizada de aplicaciones React Native. El Cliente de Desarrollo de Expo se está desarrollando como un equivalente a Expo Go.

No todas las aplicaciones se ajustan a todas las aplicaciones. Las personas necesitan poder personalizar el tiempo de ejecución en las aplicaciones React Native para Android e iOS. Actualmente, si llegas al punto en el que necesitas modificar el tiempo de ejecución, incluso si es solo para eliminar algo de código o agregar un solo módulo nativo, debes tomar el control de tus proyectos nativos. Puedes hacer esto con expoeject. Expoeject es un comando que instancia y configura los proyectos nativos de iOS y Android en tu máquina. Ahora tienes un proyecto nativo estándar, y no solo los archivos JavaScript. Entonces, el nombre suena muy similar, pero es un poco diferente de createReactAppsEject porque después de ejecutarlo, aún estás utilizando la mayoría de las herramientas de Expo. Dicho esto, aún no se admite todo. Tomar el control de tus proyectos nativos es una solución muy razonable para muchos desarrolladores, y algo que todas las herramientas de Expo deberían admitir. Otros desarrolladores prefieren que Expo siga gestionando sus proyectos nativos. Quieren agregar y eliminar bibliotecas nativas, y dejar que Expo se encargue de cómo funciona eso en realidad. Entonces, hay dos partes en nuestra solución a este problema. Pero pronto verás que la primera parte es en realidad un requisito previo para la segunda. Primero, necesitamos hacer que todas las herramientas de Expo funcionen en cualquier proyecto React Native, y luego podemos hacer que el tiempo de ejecución nativo sea personalizable en proyectos gestionados. Si podemos hacer que el tiempo de ejecución sea personalizable, entonces los desarrolladores pueden agregar o eliminar cualquier módulo nativo en sus proyectos gestionados. La mayoría de las herramientas de Expo ya funcionan fuera de los proyectos gestionados, por ejemplo, los paquetes SDK de Expo como Notificaciones y Haptics. Lo que nos falta es el servicio Turtle Build y Expo Go. Estas herramientas fueron construidas específicamente en torno a un tiempo de ejecución fijo, por lo que necesitaremos construir nuevas versiones de estas herramientas desde cero que puedan proporcionar una experiencia equivalente. Turtle no puede admitir ninguna aplicación React Native arbitraria porque está diseñado para ensamblar aplicaciones shell. Esto es muy diferente de compilar una aplicación, por lo que construimos un nuevo servicio desde cero llamado EAS Build. EAS significa Servicios de Aplicación Expo. Ejecutar una compilación de Android o iOS en algún servidor en la nube no es exactamente una idea novedosa, pero necesitamos construirlo para proporcionar una experiencia sin problemas y personalizada, una que esté profundamente integrada con los servicios de Expo y React Native. Así es como funciona EAS Build. Ejecutas EAS Build-P android o iOS, creas un clon superficial del repositorio Git de tu proyecto, lo comprimes y lo subes. EAS Build configura una nueva máquina virtual, luego descarga el archivo de tu proyecto. Instala las dependencias de JavaScript y las dependencias nativas, luego inicia una compilación nativa. Cuando la compilación se completa, firma el binario resultante con las credenciales de tu propia aplicación. Como la mayoría de las cosas en esta charla, hay un poco más que eso, pero esos son los pasos generales. Usando EAS Build ahora podemos construir y firmar cualquier proyecto React Native. La otra pieza que falta es un equivalente a Expo Go. Así que hemos estado construyendo algo.

5. Personalización del tiempo de ejecución en proyectos gestionados de Expo

Short description:

La biblioteca React Native proporciona la misma experiencia que Expo Go, pero con un tiempo de ejecución personalizado. Los desarrolladores pueden personalizar los tiempos de ejecución para agregar o eliminar bibliotecas. Los errores con las actualizaciones por aire se pueden manejar con las herramientas proporcionadas por EAS Update. El cliente de desarrollo de Expo permite la personalización del tiempo de ejecución en el entorno de desarrollo.

Lo que llamamos Cliente de Desarrollo de Expo es la biblioteca React Native que te brinda la misma experiencia que Expo Go, pero con tu propio tiempo de ejecución personalizado. Es mínimamente opinativo para admitir el conjunto más amplio de casos de uso. Cuando creas una compilación de depuración de tu aplicación, obtienes la experiencia del Cliente de Desarrollo. Cuando creas una compilación de lanzamiento, todo el código del Cliente de Desarrollo se elimina. Puedes construir el Cliente de Desarrollo una vez y centrarte en el lado JavaScript de tu aplicación, y luego volver al Cliente de Desarrollo cuando quieras escribir o instalar algún nuevo código nativo. Entonces, con las soluciones para Turtle y Expo Go, podemos pasar a la Parte Dos, la personalización del tiempo de ejecución en proyectos gestionados de Expo. En los proyectos gestionados de Expo, hay dos lugares donde necesitamos poder modificar el tiempo de ejecución. En nuestro entorno de desarrollo local y en nuestras aplicaciones independientes. Comencemos con las aplicaciones independientes. Necesitamos un servicio de compilación en la nube capaz de construir proyectos con código nativo arbitrario. Esto suena como un trabajo para EAS Build. Podemos reutilizar el comando eject para generar y configurar los proyectos nativos de iOS y Android basados en la aplicación JavaScript. Llamaremos a este nuevo comando prebuild. En EAS Build, solo necesitamos ejecutar prebuild y luego construir el proyecto resultante como lo haríamos para cualquier aplicación React Native. Aquí no hay aplicaciones shell. Con esto en su lugar, los desarrolladores pueden eliminar bibliotecas que no estén utilizando, porque el comando prebuild solo enlaza y configura las bibliotecas que están instaladas en el proyecto. En casos simples, agregar bibliotecas también funcionará bien, porque React Native las enlaza automáticamente a través de Gradle y Cocoapods. Pero la instalación de bibliotecas de módulos nativos a menudo implica alguna configuración adicional de los proyectos de datos, prebuild solo sabe cómo hacer esto para los paquetes XOSDK. Podemos resolver esto dando a los desarrolladores ganchos en el proceso de prebuild y documentando públicamente las herramientas que usamos para configurar los paquetes XOSDK. Llamamos a estas herramientas complementos de configuración. Los complementos de configuración son funciones que se ejecutan durante el proceso de prebuild. Tienen acceso a utilidades que facilitan las tareas de configuración más comunes. Y si eso no resuelve tu caso de uso, puedes acceder directamente al proyecto en el sistema de archivos como una salida de emergencia. Los desarrolladores pueden pasar opciones a los complementos de configuración como claves de API y mensajes de permisos. Ahora que los desarrolladores pueden personalizar sus tiempos de ejecución para agregar y eliminar bibliotecas, si ves que cometen accidentalmente algunos errores con las actualizaciones por aire, puedes encontrarte en una situación en la que el código JavaScript de una actualización no es compatible con el tiempo de ejecución en el binario. Necesitamos proporcionar herramientas que faciliten hacer lo correcto en estos escenarios. No entraremos en detalles aquí, pero vale la pena mencionar que este es un problema nuevo que surge con los tiempos de ejecución personalizados, y estamos trabajando en soluciones en un nuevo servicio llamado EAS Update. Para personalizar el tiempo de ejecución en nuestro entorno de desarrollo, podemos usar el cliente de desarrollo de Expo. Teóricamente, y esto aún no está implementado en el momento en que digo esto, hay dos pasos para crear una compilación personalizada del cliente de desarrollo para un proyecto gestionado. Primero, instala los paquetes del cliente de desarrollo en nuestro proyecto gestionado.

6. Construcción de aplicaciones gestionadas con Expo y React Native

Short description:

Ejecuta una compilación de depuración en EAS Build y utiliza la distribución interna para compartir compilaciones del cliente de desarrollo. La construcción de aplicaciones gestionadas con Expo y React Native será más fácil en el futuro. EAS Build reduce el tamaño de la aplicación y tiene una capa gratuita. El cliente de desarrollo de Expo y EAS Update están en datos cerrados. React Native se puede construir con TypeScript utilizando un cliente de desarrollo y Expo SDK. Estas herramientas permiten una mejor carga de trabajo y separan el tiempo de ejecución del código de la aplicación.

. Segundo, ejecuta una compilación de debug de nuestro proyecto en EAS Build. Podemos depender de los complementos de configuración incluidos en los paquetes del cliente de desarrollo para configurar automáticamente el cliente durante la fase de precompilación. Eso es todo. Ahora, debe ser muy fácil compartir tus compilaciones del cliente de desarrollo de expo, por lo que hemos creado algo que llamamos distribución interna en EAS Build. Puedes usarlo para compartir compilaciones del cliente de desarrollo con tus amigos y colegas. Para hacer esto, primero, si estás distribuyendo en iOS, agrega el dispositivo a una lista de permitidos, para que se incluya en el perfil de aprovisionamiento. Esto no es necesario para Android. Ahora, puedes crear una compilación. Cuando la compilación se complete, envía la URL de la compilación a tu colega. Ellos pueden instalar directamente desde esa página.

En el futuro, una vez que todo esto esté listo, la construcción de aplicaciones gestionadas con expo y react-native se verá mucho más así. Podrás instalar una biblioteca de módulos nativos, luego ejecutar una nueva compilación del cliente de desarrollo localmente o en EAS Build para agregarla a tu cliente de desarrollo tiempo de ejecución. Luego puedes continuar construyendo tu aplicación en TypeScript o JavaScript. EAS Build y los complementos de configuración están disponibles ahora. Si expo-sdk41 ha sido lanzado en el momento en que se emite esta charla, puedes probar EAS Build con tu proyecto SDK41 y debería reducir el tamaño de tu aplicación significativamente al incluir solo las bibliotecas nativas que estás utilizando. Si lo haces, ten cuidado al realizar actualizaciones por aire.

Vale la pena señalar que EAS Build es un servicio de pago y planeamos tener una capa gratuita generosa, suficiente para apoyar a desarrolladores aficionados, estudiantes y pequeñas organizaciones que recién comienzan. Por ahora, EAS Build todavía está en vista previa y está limitado a un plan de pago. Lanzaremos la disponibilidad general en el verano. El cliente de desarrollo de Expo y EAS Update están en datos cerrados. Si estás interesado en probarlos, sigue el enlace en la pantalla para completar una encuesta. Si estás viendo esto mucho después de la fecha de grabación, mantendremos esas páginas actualizadas para que puedas encontrar información relevante allí también.

Entonces, ¿por qué estamos haciendo esto? Bueno, Read Expo cree que un porcentaje significativo de aplicaciones de Android e iOS se pueden construir solo con TypeScript utilizando un cliente de desarrollo con un tiempo de ejecución personalizado y aprovechando el SDK de Expo y el ecosistema de código abierto de React Native. Hay muchas bibliotecas excelentes disponibles y los proveedores de servicios cada vez más admiten envoltorios de React Native para sus paquetes nativos. A medida que React Native continúa madurando, esto solo mejorará cada vez más. Incluso si prefieres gestionar tus proyectos nativos, estas herramientas pueden permitir una mejor carga de trabajo para tu equipo. Te pueden ayudar a estructurar tu proceso de manera que el trabajo en el tiempo de ejecución y el código de la aplicación estén separados, similar a cómo construir componentes con Storybook te permite dividir el desarrollo de tu sistema de componentes de la construcción de funciones con esos componentes. Con eso, puedes obtener todos los beneficios de tener un tiempo de ejecución estable y un mecanismo para cargar aplicaciones en ese tiempo de ejecución, como vistas previas fáciles de solicitudes de extracción en GitHub. Amamos la web y queremos que React Native sea más parecido a ella, manteniendo lo que hace que React Native sea genial. Y creemos que el trabajo que hemos estado haciendo es un gran paso en esa dirección.

QnA

Q&A sobre Expo y React Native

Short description:

Puedes seguirnos en Twitter y en nuestro blog para obtener actualizaciones. Gracias por escuchar. Brent preguntó si has lanzado una aplicación con React Native. Muchos de ustedes lo han hecho. Expo tiene limitaciones, pero están trabajando en solucionarlas. Expo Updates es comparable a Code Push, con algunas diferencias. Expo Updates está integrado en proyectos de Expo, lo que lo hace más conveniente.

Puedes seguirnos en Twitter, en expo y no en brent, y frecuentemente publicamos actualizaciones más extensas en nuestro blog. Aprende cómo empezar a escribir código en React Native en los enlaces de aprendizaje en el lado derecho. Muchas gracias por escuchar. Adiós. Muchas gracias por esa maravillosa charla. Espero que la hayas disfrutado tanto como yo. Brent es increíble. Ahora, antes de continuar, respondamos la pregunta que Brent les hizo a todos ustedes. Espero que la hayas respondido en Slido. Entonces, Brent preguntó, ¿alguna vez has lanzado una aplicación con React Native? Y podemos ver que un buen 30% de ustedes, gente, ha lanzado una aplicación con React Native. Eso es bastante impresionante. Y con suerte, con algunas de las cosas de las que habló Brent, incluso podrán lanzar aplicaciones mejores con React Native que se avecinan pronto. Voy a invitar a Brent a unirse a nosotros en el escenario. Brent, ¿cómo estás? Estoy bien. ¿Cómo estás tú? Estoy bien. Gracias. Entonces, tenemos varias preguntas que llegan. Aquellos de ustedes que aún tengan una pregunta, asegúrense de dejarla en el chat de Discord. Entonces, la primera pregunta, voy a ir directo a ella. De BKG, ¿hay alguna desventaja en usar Expo, cosas que no pueda manejar y que necesitarían que se expulsara? Sí, creo que intenté cubrir eso un poco en la charla en términos de mencionar los compromisos que vienen con tener un tiempo de ejecución fijo. Y así, solo hay tantas cosas que realmente podemos incluir dentro del el conjunto predefinido, el tiempo de ejecución SDK fijo. Y puedes echar un vistazo a la página de solicitudes de funciones que Expo tiene para ver algunas de las cosas con las que la gente se encuentra. Y, ya sabes, hay algunas bibliotecas en la comunidad de React Native que no incluimos y que mucha gente frecuentemente quisiera usar, y por eso estamos trabajando en abordar esas limitaciones para que puedas modificar el tiempo de ejecución y no tengas que enfrentarte a ese tipo de compromisos en términos de usar lo que quieres usar y al mismo tiempo obtener la experiencia de tener una gran cantidad de la complejidad de gestionar tu aplicación manejada por ti. Genial. Alguien está haciendo una pregunta de comparación, así que están preguntando cómo se compara Expo con App Center Code Push. ¿Alguien tiene alguna experiencia? ¿Hay alguna diferencia? ¿Algo similar? Sí, creo que la comparación más cercana es con Expo Updates, que es el servicio de actualización por aire que creo que es comparable a Code Push. Son bastante similares. Creo que Code Push tiene algunas características interesantes que Expo aún no tiene, y de la misma manera, hay algunas cosas que surgen solo por el hecho de que Expo Updates está integrado en proyectos de Expo que lo hacen tal vez un poco más conveniente en algunas circunstancias, pero luego en otras circunstancias, si necesitas configurarlos desde cero, creo que es más o menos lo mismo. Pero cuando creas un proyecto con Expo CLI, Expo Updates se configura automáticamente para ti, por lo que no tienes que hacer nada en absoluto. Solo tienes que crear una cuenta con Expo y podrás

Ventajas de Expo Updates con Flujo de Trabajo Gestionado

Short description:

Expo Updates con Flujo de Trabajo Gestionado proporciona actualizaciones seguras por aire sin preocuparse por los cambios en el código nativo. Publicar un proyecto y realizar cambios es compatible con Expo Updates.

publicar actualizaciones en tu aplicación con Expo Publish, y así está todo configurado. Por lo tanto, es una ventaja realmente buena que obtienes de forma predeterminada. Y luego hay otro aspecto en el que si estás utilizando Expo Updates con este Flujo de Trabajo Gestionado que mencioné un poco en la charla, donde nosotros gestionamos el runtime por ti, entonces obtienes actualizaciones seguras por aire porque no tienes que preocuparte por los cambios en el código nativo que se producen en diferentes circunstancias y así, si publicas un proyecto para SDK 40 y luego realizas algunos cambios en él y lo publicas nuevamente, eso funcionará. Mientras que debes tener un poco más de cuidado cuando el runtime puede cambiar y asegurarte de que el JavaScript que estás publicando sea

Enfoque de Expo en un Runtime Personalizable y EAS

Short description:

Expo se centra actualmente en hacer que el runtime sea personalizable y permitir a los desarrolladores utilizar bibliotecas BLE existentes u otras bibliotecas de terceros. Su objetivo es evitar volver a implementar lo que otras bibliotecas ya han hecho bien. El futuro de los proyectos de Expo probablemente esté con EAS y el cliente de desarrollo.

compatible. Gracias. Espero que eso responda tu pregunta, Sarush, ¿verdad? Tenemos otra pregunta y ahora no sé, admitiré que no sé qué significan estas siglas, así que si tú sabes qué significan estas siglas, ¿puedes decírnoslo? ¿Expo Expo alguna vez admitirá BLE directamente o deberíamos depender solo de EAS? Es difícil decirlo, no estamos realmente enfocados en, quiero decir, esta pregunta es específicamente sobre BLE, es decir, Bluetooth de baja energía, pero hay muchas otras posibles API que la gente diría, oh, bueno, ¿alguna vez admitirán esto o esto o esto? Y podríamos, como tuvimos una opción, ¿vale, vamos a ir y y construir todos estos envoltorios de API diferentes y admitir todos estos y definitivamente en el futuro y mantenernos en este concepto de un runtime gestionado que simplemente crece y crece y crece. Y esa era una posible ruta que podríamos haber tomado y la otra era permitir a las personas personalizar el runtime. Hasta ahora, hemos optado por, en el último año, centrarnos en hacer que el runtime sea personalizable. Y creo que una vez que lleguemos a un punto realmente bueno en el que las personas puedan utilizar bibliotecas BLE existentes u otras que deseen utilizar en esas bibliotecas de compras, bibliotecas de mapas, etc., que no están incluidas, entonces una vez que eso esté bien, tal vez podamos volver y preguntar, OK, bueno, ¿en qué de estas áreas crees que realmente podemos tener un impacto positivo? No es necesario volver a implementar algo que otra biblioteca ya ha hecho de manera excelente trabajo. Y si hay una biblioteca BLE realmente excelente y tiene sentido que contribuyamos a ella, entonces lo haríamos. Si es algo en lo que creemos, OK, bueno, tal vez necesitamos reescribir esto para que sea como creemos que debería ser, entonces lo hacemos. Y así que está en la mesa en términos de si lo integramos o no. Pero lo más probable es que, quiero decir, el futuro del desarrollo de proyectos de expo definitivamente está con

Añadiendo Bibliotecas Nativas y Aplicaciones Favoritas

Short description:

Para añadir una biblioteca de código nativo, necesitas hacer un eject en React Native. Sin embargo, no es lo mismo que hacer un eject en Create React app. El proceso genera proyectos nativos que puedes personalizar. En el futuro, podrás añadir bibliotecas y construir un nuevo cliente que las incluya. La disponibilidad de ciertas características puede variar, con SDK 41 y actualizaciones del cliente de desarrollo esperadas en los próximos meses. En cuanto a las aplicaciones favoritas de React Native, se recomiendan Coinbase y Readwise.

con EAS y cosas como el cliente de desarrollo. Sí, bueno, luego tenemos otra pregunta que acaba de llegar de Rado. Para añadir una biblioteca, creo que es una pregunta de aclaración. Para añadir una biblioteca de código nativo, necesitas hacer un eject. Correcto. Sí, por el momento, eso es lo que sucede. Y eso es más o menos lo que discutí en la primera mitad de la charla, como este es elruntime fijo. Y luego, si quieres cambiar eso, ahora, como harías un eject y eso generaría estos proyectos nativos. Y no es exactamente lo mismo que hacer un eject en CreateReact app, donde haces un eject y ya no hace nada por ti y asumes todo. Es como estar a medio camino entre eso y no hacer un eject. Básicamente, genera los proyectos nativos que de otra manera tendrías gestionados para ti. Y luego puedes añadir lo que quieras a eso. Y eso es más o menos donde estamos ahora. Y hacia dónde vamos es la segunda mitad de la charla, donde podrías añadir la biblioteca y luego podrías obtener, se construye para hacer una nueva compilación del cliente para ti que incluya esa biblioteca. Y luego podrías continuar con el desarrollo como lo estabas haciendo antes. Y eso te permitiría tener esa misma experiencia de flujo de trabajo gestionado, pero aún personalizar elruntime y eliminar bibliotecas. Otra cosa es que hacia el final de la charla, dijo que había algunas cosas que aún no estaban disponibles pero que podrían estarlo ahora, solo por curiosidad, ¿están disponibles ahora? Aún no hemos lanzado el SDK 41, pero lo haré poco después de esto. Las cosas relacionadas con el cliente de desarrollo y demás, no, eso es más para junio, julio. Y sí, eso está un poco más lejos. De la semana pasada a esta semana, no va a cambiar mucho allí. No te preocupes. Tal vez cuando alguien esté viendo la grabación, ya se haya lanzado.

Entonces, una pregunta, has estado en el espacio de React Native durante un tiempo. Solo por curiosidad, ¿cuáles son tus aplicaciones favoritas de React Native? ¿O tal vez una que hayas visto y te haya gustado mucho? Um, bueno, tengo que mencionar a Coinbase porque están haciendo su IPO hoy. Uh, Coinbase Pro y, um, y algunas otras cosas también en React Native. Y creo que hicieron un buen trabajo con eso. Um, me gustó mucho esta aplicación llamada Readwise. Puedes ir a readwise.io. Um, es una gran herramienta para, um, tomar todos tus resaltados de diferentes lugares y, uh, revisarlos realmente, no solo ponerlos en un archivo de cosas que quieres recordar. Así que solo voy a

Aplicaciones y Bibliotecas de React Native

Short description:

Esta cosa se conecta a los resaltados de Kindle y otras aplicaciones de Twitter. Third Wave es una gran aplicación de café. También se recomienda la nueva aplicación de PlayStation. Las bibliotecas favoritas incluyen gesture handler, reanimated y Expo GL. También se considera muy valorada la navegación de React y el contexto de área segura. React Native carece de la capacidad de crear editores de texto enriquecido directamente en primitivas.

lo resaltas y luego nunca más vuelves a pensar en ello. Esta cosa se conectará a los resaltados de Kindle y todas tus otras aplicaciones de Twitter, lo que sea, y utilizará un poco de repetición espaciada y revisión. Um, también me gusta la aplicación llamada Third Wave. Uh, por ahora solo se puede usar en Canadá, pero es una muy buena aplicación de café. Uh, al igual que otras grandes como la aplicación de PlayStation , la nueva aplicación de PlayStation es realmente genial. Um, y, uh, acabo de descargarla. No react a nativo al otro extremo. Y, y, y de, de esos son algunos de tus aplicaciones favoritas de react native, ¿qué hay de tus bibliotecas favoritas?

Um, no tienes que ir necesariamente con gesture handler y reanimated como dos de mis favoritas. Um, Expo GL es otra realmente genial. Um, te permite usar WebGL esencialmente, o algo similar a eso dentro de aplicaciones de react native. Y así puedes usar three J S y cosas así con ella. Y, uh, oh, en realidad olvidé mencionar otra aplicación que me gusta mucho es shop de Shopify y ellos usan expo GL, um, en su aplicación, uh, y, uh, similar. Sí. Usos realmente geniales de ella. Um, y por supuesto, la biblioteca de navegación de react en la que estoy muy involucrado, uh, en ese expo, uh, es, uh, supongo que el, el proyecto durante, durante varios años, junto con personas como Satya, uh, que realmente ha estado trabajando mucho en eso recientemente y haciendo un gran proyecto con un P cinco y P seis, um, safe area. Context, um, es otro realmente genial de parte del chico que hizo third wave, Janik. Uh, ni siquiera voy a intentar decir su, su apellido francés. Lo siento, Janik, si estás viendo esto, uh, y eso es realmente fantástico manera. Creo que si te estás uniendo ahora al ecosistema de react native, um, es fácil dar por sentado lo fácil que es lidiar con las áreas seguras en los dispositivos. Ya sea la barra de estado o el indicador de inicio o no. Cosas así. Como simplemente instalar un contexto de área segura de react y tener API de react realmente agradables para lidiar con estas cosas y es fantástico. Entonces, um, sí, diría que esas son, esas son mis favoritas.

Bien. Tenemos otra pregunta de Ret Rado. Es otra pregunta general. ¿En qué aspectos react native todavía se queda atrás en comparación con las aplicaciones nativas de Android e iOS? Sí. Um, esa es una buena pregunta. Creo que hay algunas áreas que destacan. Um, una que me gustaría ver es la capacidad de crear editores de texto enriquecido directamente

Mejorando el rendimiento y objetivos futuros

Short description:

Los desarrolladores esperan con ansias el lanzamiento de Fabric para mejorar el rendimiento de las aplicaciones de React Native. El objetivo a largo plazo es permitir la inclusión de cualquier módulo nativo e integrar diversos servicios de manera fluida. Expo tiene como objetivo mejorar la experiencia de desarrollo móvil y multiplataforma a través de EAS, ofreciendo una amplia gama de servicios.

En las primitivas de React Native, um, creo que la gente tiende a conectar un editor de texto enriquecido, um, o usar una vista web. Um, creo que sería realmente genial si tuviéramos, tuviéramos más primitivas enriquecidas para hacer este tipo de cosas. Si pudiéramos construir eso y tal vez, tal vez con algunas de las mejoras que vienen con Fabric, eso podría ser posible. Um, creo que las listas son otra cosa. Um, entonces, uh, ya sabes, cosas como flatlist y sectionlist, creo que hacen un buen trabajo, pero, uh, no tienen las mismas características de rendimiento que las que se construyen en las listas que usamos. Y así, en cualquier plataforma. Y así sería, uh, realmente genial cuando Fabric, nuevamente, se lance para ver si eso desbloqueará, um, permitiéndonos usar estas mismas API de reciclaje de vistas y obtener las mismas características de rendimiento. Genial. Y la última pregunta, y sé que esta pregunta, en realidad, podría ser otra charla completa. Así que solo te voy a pedir que la resumas en los mismos minutos en estos 30 segundos en esta última pregunta. Uh, ¿en qué dirección ves que Expo se dirige en los próximos años? ¿Qué nuevas características están en la lista de deseos a largo plazo más allá de EAS? Bueno, sí, potencialmente es algo muy grande, uh, podría abarcar un amplio conjunto de servicios y, um, en última instancia, dar a las personas la capacidad de incluir cualquier módulo nativo que deseen es algo que a corto y mediano plazo, lograr que funcione de manera asombrosa para todos será un desafío y, uh, estamos ansiosos por resolverlo para las personas y creemos que tendrá un gran impacto. Pero una vez que tengamos eso en su lugar, hay muchas integraciones que podemos hacer con bibliotecas y el ecosistema y diferentes servicios, uh, para asegurarnos de que puedas simplemente conectarlos y que funcionen sin problemas, ya sea herramientas como LogRocket o, o, ya sabes, cualquier tipo de herramienta de pagos que estés usando o, uh, herramienta de mapas, ese tipo de cosas, como debería ser posible simplemente conectarlas a tu aplicación y, uh, y ponerlas en marcha. Y eso es, eso es más o menos, uh, hacia dónde vamos y realmente el alcance de los servicios que podemos ofrecer a través de EAS es, potencialmente, um, bastante ilimitado en términos de, um, las áreas de oportunidad para mejorar la experiencia de desarrollo móvil y la experiencia de desarrollo multiplataforma.

Eso es genial. Muchas gracias por estar con nosotros, Sbrenn. Realmente, realmente lo aprecio. ¿Dónde pueden encontrarte las personas si quieren hablar contigo más tarde? Twitter es probablemente un buen lugar, uh, así que @notbrent en Twitter. Y, uh, supongo que GitHub, si quieres seguir la actividad en GitHub, Brent Batney en GitHub. Genial. Me encanta el nombre de usuario @notbrent. Muchas gracias por estar con nosotros. Adiós. Gracias, adiós. Así que, aquellos de ustedes que aún están aquí, asegúrense de ir a la encuesta y darle a la charla de Brent cinco estrellas de cinco. También pueden unirse a Brent en su sala de oradores en este chat espacial. El enlace para unirse está en la línea de tiempo. Así que, definitivamente, échale un vistazo si tienes más preguntas para él. Solo quiero recordarles porque me encantan los premios. Espero que a ustedes también les gusten los premios. Tenemos un sorteo en Twitter. Y la forma de participar en este sorteo es tomar una foto de tu configuración y tuitearla usando el hashtag React Summit. Espero ganar. Tal vez debería obtener algo gratis como presentador. Pero espero ganar también. Solo quiero. Nos vemos justo después de un breve descanso. Y tenemos más charlas increíbles programadas. Nos vemos pronto.

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

React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more