20 de marzo de 2021
En este artículo, cubriremos cómo estructurar nuestra aplicación a gran escala que hemos decidido construir con React.
Cuando creamos el proyecto React, de forma predeterminada, solo esta carpeta y los archivos están presentes (ver más abajo).
Casi todo el código que necesitamos escribir dentro de la carpeta src y podemos ver que, de forma predeterminada, React no proporciona ninguna estructura de archivo, solo el archivo index.jsx con un componente con estado está presente para ejecutar el contador de muestra.
Ahora veremos qué carpetas y archivos necesitamos crear para que la aplicación sea escalable.
Primero, crearemos una carpeta de Assets en la raíz del proyecto que usaremos para almacenar imágenes, archivos de traducción, archivos de fuentes personalizadas, archivos HTML.
La carpeta Assets contiene las siguientes carpetas:
-
fonts: Esta carpeta debe tener todos los archivos de fuentes, es decir, fuentes personalizadas que se utilizan en la aplicación (archivos .ttf)
-
html: Si nuestra aplicación necesita abrir algún contenido HTML que necesitamos agregar en nuestra aplicación web (generalmente el contenido con licencia de la aplicación o cualquier archivo .html que necesitemos cargar en la aplicación usando un iframe on algún paquete como: react-frame-component o react-iframe )
Nota : Generalmente los paquetes react-frame-component y react-iframe se usan para cargar la URL de cualquier contenido web, pero podemos usar este complemento para mostrar el contenido HTML externo que se almacena localmente en la aplicación web.
-
i18n: Si nuestra aplicación es compatible con la internacionalización, entonces necesitamos agregar archivos .json para todos los diferentes idiomas compatibles, es decir, si necesitamos admitir inglés y francés, entonces debemos agregar en.json y fr.json en esta carpeta. Podemos encontrar más información en el archivo I18N_DOC.md
-
images: Esta es la carpeta más importante donde almacenamos todas nuestras imágenes.
Ahora, agregaremos la carpeta de configuración dentro de la carpeta lib
-
routes: La carpeta de ruta contiene todos los archivos que se basan en el código de navegación de las pantallas de la aplicación. Usaremos el paquete react-router para separar nuestra ruta de navegación. Esta carpeta contiene dos archivos index.jsx, Config.jsx y una carpeta handlers, esta carpeta se encarga de almacenar todas las rutas anidadas, sus archivos internos deben llamarse por ejemplo DashboardHandlers.jsx.
Podemos ver el un tutorial completo del paquete haciendo Click en la imagen/Video react-router
-
themes: Si nuestra aplicación admite temas claros y oscuros y estos temas son temas personalizados, entonces necesita crear dos archivos lightTheme.jsx , darkTheme.jsx donde agregaremos todos los colores necesarios para cada tipo de componente. Un archivo más crearemos themeConfig.jsx que describe todas las constantes relacionadas con el tema.
Nota: Como este artículo se basa en la estructura de carpetas y archivos, describiremos qué contienen realmente todos los archivos de temas y cómo funcionan en un documento separado que prepararé pronto. Por ahora, puede consultar este enlace para crear un soporte para múltiples.
Aquí están las siguientes constantes que son estáticas en todas las aplicaciones
-
ApiPaths.jsx: Cuando utilizamos el servicio REST API en Javascript, podemos almacenar todos los End Points de la API en un archivo separado apiPath.jsx
-
AssetsPaths.jsx: Para usar un asset en una aplicación, debemos proporcionar una ruta relativa en cualquier componente.
Si agregamos todas las rutas relativas de los assets en un archivo, será fácil para nosotros obtener todas las rutas y actualizar la ruta si es necesario en el futuro.
-
AppConstants.jsx: Aquí es donde estarán presentes todas las constantes de nuestra aplicación y esto es diferente para cada aplicación.
En una aplicación a gran escala, necesitamos crear componentes más personalizados en lugar de componentes predeterminados. Supongamos que necesitamos hacer uso de nuestro propio RaisedButton, FlatButton, OutlineButton, Divider, CircularLoader, etc. Que podemos usar en toda nuestra aplicación, luego de ese agregar tipo de componentes de personalización, podemos agregar dentro del archivo index.jsx que estará presente dentro de la carpeta componentes
La carpeta Utils contiene los helpers, services, UI utils, mixins que se utilizan en toda la aplicación.
En muchos escenarios, necesitamos escribir código varias veces para lo mismo, como convertir los primeros caracteres de cada palabra en mayúsculas, que se usan normalmente para mostrar títulos para otros componentes, etc. Este tipo de código se puede hacer común para reducir la redundancia y agregue ese código en los archivos de tipo Helpers que están presentes en src/utils/helpers/TextHelper.jsx.
TextHelper.jsx : Contendrá todo el código necesario para convertir la cadena para que se muestre en un componente de texto.
Crearemos un tipo diferente de archivos de servicio en la carpeta src/utils/services
Nota: Todos los servicios deben ser clases.
-
LocalStorageService.jsx : En este archivo, escribimos todo el código necesario para almacenar y obtener datos del almacenamiento local usando el complemento Window.localStorage.
En este archivo, habrán getters y setters para todos y cada uno de los datos que se almacenarán en el almacenamiento local.
-
SecureStorageService.jsx : No almacenamos credenciales de usuario, tokens API, claves API secretas en el almacenamiento local, para eso hacemos uso de secure-ls que protege los datos de almacenamiento local con un alto nivel de cifrado y compresión de datos.
En este archivo, habrán getters y setters para todos y cada uno de los datos que se almacenarán en el almacenamiento seguro de la plataforma.
-
RestApiService.jsx : Llamamos a la API REST para obtener información, almacenar datos en una base de datos de forma remota, para eso, necesitamos escribir la llamada de API REST en un solo lugar y debemos devolver los datos si la llamada del API REST es un éxito o debe regresar excepción de error personalizada basada en el código de estado 4xx, 5xx. Podemos hacer uso del paquete axios para hacer el resto de llamadas a la API en React.js
-
NativeApiService.jsx : En una SPA ó Aplicación móvil usamos múltiples paquetes para acceder a los servicios nativos como Cámara, Galería de fotos, Ubicación, etc. Para eso necesitamos escribir código en un archivo separado que podemos usar desde múltiples lugares a lo largo de la aplicación.
Todas las cosas comunes relacionadas con la interfaz de usuario deben estar presentes dentro de la carpeta src/utils/ui
Aquí está la lista de carpetas y archivos que estarán presentes en el directorio src/utils/ui :
-
animations: Todas las animaciones personalizadas estarán presentes en este archivo con archivos separados como SlideFadeTransition.jsx, ImpulseAnimation.jsx, etc. Todas las animaciones personalizadas se utilizarán a través de la aplicación.
-
appDialogs.jsx : Todos los diálogos de aplicaciones personalizados UI estarán presentes en este archivo.
-
uiUtils.jsx : Todos los componentes de IU personalizados, como un cuadro de texto de entrada con icono de búsqueda, componentes de auto completar, pancartas de mensajes de error, herramientas relacionadas con chips de casillas de verificación personalizadas, pueden estar presentes en este archivo y se utilizarán en toda la aplicación.
Mixin es una clase que contiene métodos para ser usados por otras clases sin tener que ser la clase padre de esas otras clases. En otras palabras, los mixins son clases normales de las que podemos tomar prestados métodos (o variables) sin extender la clase. En la aplicación podemos realizar diferentes mixins como ValidationMixins.jsx, OrientationMixins.jsx
Las características principales como Inicio de sesión/autenticación, pantallas de recorrido (pantallas que solo son visibles después de la instalación/primer inicio), las características de configuración de la aplicación son las características principales que deben agregarse en una carpeta Core.
-
auth: La carpeta de autenticación debe contener las funcionalidades de registro, inicio de sesión, contraseña olvidada.
-
models: Esta carpeta contiene los modelos principales de datos que deben mostrarse en la aplicación, por Ejemplo: UserModel.jsx.
-
walkThrough: Pantallas de tutoriales, deben contener todas las pantallas que serán visibles solo cuando la aplicación se inicia por primera vez después de la nueva instalación/primer inicio.
-
settings: Aquí ira será la funcionalidad de configuración de la aplicación.
Antes de continuar con los módulos, me gustaría mostrar cómo se implementan todos y cada uno de los módulos. Es decir, todos y cada uno de los módulos y características centrales que discutimos anteriormente se basan en el patrón Redux que podemos encontrar más en este paquete react-redux.
El patrón de diseño en Redux ayuda a separar la presentación de la lógica empresarial. Seguir el patrón Redux facilita la capacidad de prueba y la reutilización. Este paquete abstrae los aspectos reactivos del patrón, lo que permite a los desarrolladores centrarse en escribir la lógica empresarial.
Tomemos el ejemplo con el panel de control del módulo en la aplicación que contiene las siguientes carpetas:
-
redux: Esta carpeta contiene los cuatro archivos reducer.jsx, actions.jsx, state.jsx, types.jsx. Crearé un documento separado que describa el patrón de Redux y cómo incorporarlo a la aplicación de React. Por ahora, puede comprender el Redux en react-redux .
-
models: Esta carpeta contiene los modelos de datos que deben mostrarse en la aplicación.
-
repositories: Esta carpeta contiene los archivos del repositorio que se utilizan para escribir código para llamadas de servicios y para trabajos de computación.
-
screens: Esta carpeta contiene de todos los componentes principales llamados Screens y corresponden a las pantallas que serán visibles para el usuario.
Nota: Todos los módulos y las funciones principales deben contener estas cuatro carpetas para separar la lógica empresarial de la interfaz de usuario.
