Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo

Hola a todos. Bienvenidos a mi presentación. Mi tema es cómo compartir código entre las aplicaciones web de React y las aplicaciones móviles de React Native. Primero, permítanme presentarme. Mi nombre es Emily. Soy una desarrolladora en Toronto y actualmente trabajo para una empresa llamada Narwhal IO. Me gusta hacer senderismo, andar en bicicleta, hacer kayak y todas las actividades al aire libre. Voy a correr una media maratón en octubre de este año, así que me estoy preparando casi todos los fines de semana. Además, solía ser una desarrolladora nativa de iOS, pero eso fue hace mucho tiempo. Afortunadamente, ahora me dedico al desarrollo web. Esta presentación los llevará a través de mi experiencia en la construcción de una aplicación web y móvil utilizando CodeShare. El problema que intento resolver es que tengo esta idea increíble. No solo quiero crear una aplicación web, sino que también quiero crear una versión móvil de la aplicación. Sin embargo, los usuarios esperan experiencias diferentes en la web y en el móvil. Por supuesto, no voy a utilizar el enfoque nativo de iOS y Android porque eso requeriría demasiadas pilas tecnológicas. Naturalmente, elegí Rack y Rack Native como mi pila tecnológica. Sin embargo, todavía hay algunos desafíos. Rack y Rack Native son dos pilas tecnológicas diferentes, el código de la interfaz de usuario es completamente diferente. Rack Native utiliza componentes nativos en lugar de componentes web como base de construcción. Sin embargo, todavía quiero lograr la paridad de funciones, es decir, quiero que la aplicación móvil y la aplicación web tengan las mismas funciones y compartan la misma lógica de negocio. La solución para esto es definitivamente Monorepo. Pero, ¿cuál? La solución que se me ocurrió, no sorprendentemente, es NX. ¿Qué es NX? NX es una poderosa herramienta de Monorepo que configurará las aplicaciones Rack y Rack Native por ustedes, listas para usar. Hagamos una demostración rápida. Primero, creemos un espacio de trabajo NX. En la terminal, ingresen NPX create new workspace. Para este ejemplo, voy a nombrar el espacio de trabajo Rack Summit. Usaré React como el complemento predeterminado y nombraré la aplicación como Web.

Luego de instalar todo, permítanme entrar en esta carpeta de espacio de trabajo e instalar Ahora o el paquete Rack Native. Luego, ingresen el comando para generar una aplicación Rack Native. Nombraré esta aplicación como 'mobile'.

Si abro la carpeta del espacio de trabajo Rack Summit, en las aplicaciones, actualmente hay cuatro carpetas. Tiene la aplicación web y la aplicación móvil que acabo de crear y las carpetas E2E. Si ingreso 'nx serve web', se ejecutará la aplicación web predeterminada de Rack. Mientras tanto, para ejecutar la aplicación móvil, en la terminal, ingreso el comando 'nx run os'. En otra terminal, ingreso 'nx run android'. Esto ejecutará las aplicaciones de iOS y Android en sus respectivos simuladores.

Ahora veamos el gráfico de dependencias. En la terminal, ingresen 'nx graph'. Al ingresar 'nx graph', debería ver el gráfico de dependencias de este proyecto. Observen que no hay nada compartido entre las aplicaciones web y mobile apps.

Luego, creemos una biblioteca compartida. En la terminal, ingresen el comando 'nx generate lib'. Para este ejemplo, la llamaré 'constants'. En la carpeta 'libs', ahora debería ver una carpeta llamada 'constants' que se ha creado. Dentro del archivo 'index.ts', crearé una variable constante llamada 'title'.

Luego, vayamos a la carpeta de la aplicación web. Primero, importaré la variable 'title' desde la biblioteca 'constants'. Después de eso, pasaré la constante 'title' a la propiedad 'title'. Si vuelvo a ejecutar la aplicación web, debería notar que el título ha cambiado. Lo mismo ocurre con la aplicación móvil. También debería poder importar desde la biblioteca compartida y cambiar el título para que provenga de esta biblioteca.

Si abro el gráfico de dependencias nuevamente, debería ver que tanto la aplicación móvil como la web importan desde esta biblioteca 'constants'. Compartir una variable constante no parece ser muy útil. Sin embargo, imaginen qué se podría compartir o qué código no relacionado con la interfaz de usuario se podría compartir. Por ejemplo, la lógica de negocio y la gestión del estado. De esta manera, se garantiza la paridad de funciones para las mismas características, los desarrolladores no necesitan implementar la misma lógica dos veces. Solo necesita existir una vez dentro de una biblioteca compartida.

En esencia, con la ayuda de Next, la configuración del proyecto se vería así. Para las aplicaciones, solo contienen código de la interfaz de usuario. Para el código no relacionado con la interfaz de usuario, podríamos crear bibliotecas para eso. Para obtener más información, pueden consultar mi publicación en el blog enlazada en la parte inferior de la página. Fin. Gracias por escuchar.