Fractal: una estructura de aplicación de reacción para escala infinita

Después de haber trabajado con React y flux ( Redux ) con más de 8 proyectos importantes (más de 100 pantallas cada uno), aprendimos algunas cosas sobre las aplicaciones de React.

Con el tiempo, evolucionó una forma de estructurar proyectos, que era tan natural que incorporar nuevos desarrolladores frontend (con casi 0 experiencia con React) se convirtió en pan comido.

Lo llamamos el Fractal. Es (y siempre será) un trabajo en progreso.

Fractal te permite:

• Motivo de la ubicación de los archivos
• Administre y cree interfaces de usuario complejas
• Iterar rápidamente
• Y escala repetidamente

En lugar de ser un conjunto de reglas o convenciones, la esencia de Fractal se puede resumir en un solo principio rector: todas las unidades se repiten.

El diseño de la aplicación

Piense en su aplicación como un árbol (estructura de datos), cada proyecto le da una nueva forma al árbol, pero los nodos raíz permanecen constantes. Los nodos raíz son el diseño de la aplicación. Estos se muestran en la siguiente captura de pantalla.

• Pablo es el nombre del producto.
• build es donde van todos los archivos creados, nunca toca esto, excepto cuando necesita implementar.
• public es donde van su archivo index.html y los activos < script src> . (Se copian automáticamente para compilar mientras se usa create-react-app)
• src es donde codificas.
• src.pages son los componentes de nivel raíz, los que se montan directamente en las rutas de nivel 1. (Por ejemplo, si tiene una ruta llamada /login que monta un componente de inicio de sesión, entonces Login.js estará presente en el directorio de páginas).
• src.modules maneja su estado (acciones + reductores usando la estructura de archivos de patos).
• src.components tiene componentes compartidos, como Botón, Entrada, etc.
• src.utils tiene utilidades como su contenedor API, utilidades de fecha, utilidades de cadena, etc.
• config es donde almacena sus variables de entorno como puntos finales de API. No envíes esto a git.
• store inicializa la tienda redux.
• index registra las rutas y representa la aplicación.

No tenemos el concepto de componentes inteligentes y tontos, porque encontramos que esa idea es limitante.

El patrón Fractal: haz que todas las unidades se repitan

La magia sucede cuando intentas aprovechar el poder para componer componentes de React.

Una pantalla típica de inicio de sesión

Suponga un componente de inicio de sesión que se monta en /login, tiene un formulario y un botón de olvido que abre un modal de restablecimiento de contraseña.

Por el bien de este ejemplo, dividiremos esto en 3 componentes:

• Iniciar sesión.js
• Formulario.js
• ForgotModal.js

Esta se estructurará de la siguiente manera:

Estructura Fractal Simple

El directorio de páginas tiene un componente Login.js.

Todos los componentes son CamelCased.

Los subcomponentes de Login.js están presentes en una carpeta llamada inicio de sesión. Este es el nodo que ayudará a establecer un patrón repetitivo.

Todos los nodos son lowerCamelCased. Así que inicia sesión en este caso. Si ForgotModal.js tuviera otro subcomponente para mostrar un mensaje de éxito, entonces podemos tener una carpeta llamada forgotModal en el nodo de inicio de sesión y colocar el componente SuccessMessage.js allí.

Fractal sigue repitiéndose.

La siguiente captura de pantalla muestra cómo se ve en una aplicación real.

las páginas tienen dos raíces: Document.js y Template.js y dos subnodos documento y plantilla

Todos los componentes requeridos por una página van a su carpeta de nodo. Si el componente es requerido por más de un componente, como un botón de marca, entonces va a la carpeta src.components. Cuando necesite dividir un componente en subcomponentes, use el Fractal. La siguiente captura de pantalla muestra cómo usamos el componente The Trackers de la misma manera.

Observe un archivo Trackers.js y una carpeta llamada trackers, que contiene todos los subcomponentes requeridos por Trackers.js

El Estado Fractal

Resultó ser una buena práctica administrar componentes en el patrón Fractal, por lo que nos preguntamos si podemos hacer lo mismo con el estado. (Si podemos.)

Usamos redux en nuestros ejemplos. Suponga un diseño en el que su interfaz debe mostrar una lista de aplicaciones, cada una de las cuales puede tener muchas reseñas. Un clásico al flujo de muchos detalles. En redux estándar, podemos tener dos reductores, uno para [C]rear, [L]er, [A]ctuar y [B]eliminar aplicaciones y otro para revisar CRUD.

Debido a que usamos la estructura de archivos de patos , se supone que debemos tener un archivo apps.js y un archivo reviews.js en nuestra carpeta de módulos. Pero esto no nos ayudará a emular la forma de la API y, a medida que crece el tamaño de la base de código, se vuelve difícil pensar en una tienda plana.

En cambio, usamos el estado Fractal para guardar nuestros módulos de la siguiente manera:

Fractal en módulos. Observe la carpeta de módulos en la barra lateral izquierda y la forma de la tienda a la derecha (línea 9, 10, 11)

Con el diseño anterior, podemos emular la forma de la base de datos directamente en nuestras tiendas.

P. Pregúntese, si junto con las revisiones, cada aplicación también tiene objeto de revisores, ¿dónde irá el módulo para revisores?

R. Si elige ponerlo en la carpeta de módulos.aplicación , entonces entiende Fractal correctamente.

Esto nos da una escala fenomenal. Imagine que cada revisión tuviera una fuente asociada, que se obtendría de una API separada. Todo lo que tenemos que hacer es crear una carpeta de revisión en modules.app y agregarle un archivo llamado source.js y dentro de combineReducers en la línea 11, agregue otra clave = revisión y valor = combineReducers ({fuente: fuente de revisión}).

El fondo

La idea del Fractal fue acuñada por mi mentor Kapil Verma . Esta idea se implementó con éxito en las API basadas en Express y la tomé prestada para crear aplicaciones de reacción escalables.

Esto ha funcionado bien para nosotros en todos los tipos y tamaños de aplicaciones. Incluso estamos experimentando con el patrón Fractal en nuestras bases de código de python.

Una nota para los desarrolladores avanzados

• Una cosa a tener en cuenta es la ausencia de index.js dentro de las carpetas. Esto provoca conflictos con la resolución del módulo (debido a la carcasa).
• Todas las importaciones en el ejemplo son absolutas por convención (preferimos absolutas). Pueden ser relativos si lo desea.

Actualización 1:

Algunos lectores pidieron un código de muestra. Me las he arreglado para poner algo juntos.

shivekkhurana/appuity-frontend _appuity-frontend - Código base de React para http://appuity.ml y Fractal demo._github.com

Actualización 2 (30 de julio de 2018):

Este artículo acaba de explotar. Veo esto mencionado en tantos subreddits y repositorios de git. La gente me ha enviado correos electrónicos y me ha hecho preguntas sobre Fractal. Sinceramente, me siento honrado y encantado de poder pagar con mi conocimiento.

Para continuar con este esfuerzo, planeo iniciar una comunidad floja. Esto le permitirá hacer preguntas (sobre Fractal y React) relacionadas con su caso de uso. También le dará acceso a mí y a otros desarrolladores (en varios niveles de habilidad) en tiempo real. Puedes unirte aquí .

Si te gustó este artículo y quieres mantenerte actualizado, sígueme en: Medium , Instagram o Twitter

También podría gustarte:

Un simple truco de UI para mejorar Onboarding UX [OCD] _UI Mockups y bocetos asumen que los datos del usuario ya están presentes. Por ejemplo, la siguiente maqueta asume que el usuario…_medium.com