Cómo estructurar una aplicación React Native para escalar

Aquí hay un proyecto de muestra que demuestra los conceptos discutidos en este artículo.

Analicemos un enfoque para la arquitectura de grandes aplicaciones de React Native, supongo que es excelente.

Aprender y construir con React Native (RN) ha sido interesante, por decir lo menos, con el rápido ritmo de innovación y los cambios en el ecosistema (¡no lo olvides, todavía no estamos en la versión 1.0!).

Comencé a construir juguetes frágiles y pronto crecí teniendo que construir una aplicación grande (a escala empresarial), y luego me quedé atrapado. ¿Dónde colocar qué? ¿Cómo conectar los diversos componentes del sistema? y todas esas preguntas relacionadas con diseñar una solución desde cero.

Antes de entrar en detalles de implementación, destacaré las herramientas que influyeron en esta elección de arquitectura:

  • react-navigation - Navegación de aplicaciones
  • redux - Gestión del estado de la aplicación
  • redux-thunk - Habilitando el despacho asíncrono de acciones
  • jest - prueba de Javascript
  • reselect - Selector de biblioteca para Redux
  • axios - Cliente HTTP
  • fastlane - herramienta de automatización

Cómo aprendí a estructurar módulos de aplicación.

La estructura anterior (basada en el tipo) había sido mi opción para las aplicaciones livianas anteriores, ya que es fácil razonar sobre ello, también los componentes de la aplicación parecían muy visibles, así que comencé con ella. A medida que el alcance de la aplicación comenzó a crecer, me encontré incluyendo más archivos a las carpetas predefinidas y teniendo que hacer viajes a través de carpetas (módulos) mientras trabajaba en una sola función o corrección. En poco tiempo, cada módulo se llenó de archivos. Además, la navegación de carpetas, mientras se mantenía una nota mental del flujo de implementación, se convirtió en un problema. Este enfoque claramente se volvió inviable.

Un mejor enfoque:

Debido a que los otros archivos y carpetas anteriores (algunos truncados) generalmente son parte de una instalación de inicio de reacción nativa predeterminada, nuestro enfoque estaría en la carpeta src:

carril rápido/

Esta carpeta, como habrás observado, existe en el mismo nivel que src. Contiene lógica de configuración para la implementación, así como otras tareas relacionadas con la versión. Vea el sitio web fastlane para más detalles.

src /

Como se ve en la captura de pantalla a la que se hace referencia más arriba, analicemos la lógica detrás de esta estructura

api /

Esta carpeta contiene lógica relacionada con comunicaciones API externas, incluye:

  • constants.js: donde se almacenan todos los valores estáticos requeridos.
  • helper.js: para almacenar la lógica reutilizable.
  • archivos de funciones individuales: cada archivo de funciones contiene una lógica de comunicación api para una función en particular.

bienes/

Tal como su nombre lo indica, este contiene archivos estáticos (por ejemplo, imágenes) utilizados en la aplicación.

componentes /

Los componentes compartidos utilizados entre las características se colocan en este directorio. Un ejemplo de esto (como se muestra arriba) es el componente de diseño, que se utiliza para ajustar los componentes de la aplicación y determinar su diseño general.

caracteristicas/

Una parte importante de esta arquitectura: la carpeta de funciones, consiste en un módulo para cada una de las funciones de la aplicación.

Examinemos el módulo / explore / con más detalles:

/comportamiento

Como en la mayoría de las aplicaciones react / react-native. Esta carpeta contiene los creadores de acciones para esta función.

/ componentes

Aquí colocamos los componentes de la función de exploración y sus estilos relacionados

/ contenedores

La lógica relacionada con redux de la función se coloca aquí. Para este caso de uso, se exporta un único contenedor (que representa una pantalla), por lo que lo colocamos en el archivo de índice.

Así es como se ve /containers/index.js:

Cada característica tiene un reductor que muta su propia porción del estado de la aplicación. Todos los reductores se combinan posteriormente utilizando la función combineReducers de redux.

/ selectores

Esto puede parecer un poco extraño para algunos de nosotros, sin embargo, este segmento de nuestra arquitectura está influenciado por el paquete de reselección, que nos permite calcular eficientemente los datos derivados del estado de nuestra aplicación.

En esta arquitectura, agrupamos los selectores de aplicaciones en función de las características para que sea fácil razonar sobre la interacción entre varios aspectos de la aplicación. Puede encontrar más detalles sobre cómo funciona la reselección aquí.

/constants.js

Este archivo contiene valores estáticos utilizados dentro de la función. Un ejemplo de lo que podríamos almacenar aquí son los datos ACTION_TYPES.

Este es otro componente de nuestra arquitectura ligeramente influenciado por un paquete reactivo

Debido a la escala de esta aplicación, no estaríamos confiando en la navegación lista para usar con this.props.navigation, sino que estaríamos conectando la navegación de la aplicación al estado general de la aplicación. Esto significa que nuestra tienda con respaldo redux estaría al tanto del estado de navegación.

Exploremos los roles de los diferentes directorios en este módulo.

/comportamiento

Esto contiene lógica para un grupo de creadores de acciones específicas de navegación, por lo que el contenido de actions / index.js se vería principalmente:

Como habrás observado, estamos importando el objeto NavigationActions del paquete react-navigation para implementar la navegación nativa; ¡también proporcionan una excelente documentación!

/ contenedores

Aquí es donde conectamos nuestra lógica de navegación al estado de la aplicación, usando mapStateToProps y mapDispatchToProps. La lógica de este componente contenedor se vería algo así:

El punto de entrada de este módulo es el archivo index.js, y así es como se ve:

Este archivo de navegador de punto de entrada sirve como navegador raíz para toda la aplicación, y es lo que se importa en el archivo /containers/index.js en la sección anterior.

Agrega todos los navegadores para varias escenas en la aplicación y los vincula a sus rutas de entrada. Además de la agregación, también enruta a escenas individuales cuando es apropiado (como se ve con la ruta Splash en el fragmento de arriba).

En la parte superior de este código, vemos que se importa otra navegación basada en escenas. A un navegador de escenas le podría gustar esto:

Puede tener varios navegadores basados ​​en escenas según lo requiera su aplicación. la clave es importarlos al navegador principal y conectarse a la ruta adecuada.

/ reductores

Debido a que los datos de navegación de nuestra aplicación ahora toman una porción del estado de la aplicación, necesitaríamos un reductor para actualizar adecuadamente esta división según las acciones desencadenadas. En comparación con otros reductores en nuestra aplicación, esta tiene una implementación especializada tanto para el estado inicial como para la función reductora:

https://gist.github.com/anosikeosifo/f0df960c177dfb57c4f7ed5e4557704c

reductores /

Este es el reductor de nivel de aplicación. Su función es fusionar los diversos reductores de nivel de función utilizando la función combineReucers de redux.

Así es como se ve reductores / index.js:

estilos /

Este módulo contiene nuestros estilos de nivel de aplicación. que luego se hace referencia en componentes individuales usando la sintaxis de estilo múltiple de React Native que se muestra en el siguiente ejemplo:

...

index.js

Este es el archivo de entrada de la aplicación, envuelve la aplicación con el diseño que discutimos anteriormente y conecta la aplicación a la tienda utilizando el componente de pedido superior del proveedor de redux.

Se parece a esto:

myStore.js

esto contiene la lógica de creación de la tienda.

Whoa, esto debe haber sido una lectura bastante larga!

Si bien esto no lo abarca todo *, espero que lo encuentres perspicaz y útil. Me gustaría que pudieras compartir tus pensamientos y opiniones sobre esto, así como sobre cómo implementas aplicaciones RN a gran escala.

  • Para centrarme en el núcleo del propósito del artículo, evité entrar en detalles sobre los diversos módulos __tests_.

Recursos adicionales:

  • Reaccionar navegación
  • ¿Cómo organizar mejor sus aplicaciones React?
  • Estructurando una aplicación React Native + MobX de la manera correcta
  • Reaccione nativo con Fastlane y Crashlytics Beta

Publicado originalmente en www.uxenthusiast.com el 30 de diciembre de 2017.

¿Necesitas contratar a los mejores desarrolladores? Habla con Andela para que te ayude a escalar.
¿Estás buscando acelerar tu carrera como desarrollador? Andela está actualmente contratando desarrolladores senior. Aplica ya.