Después de haber trabajado con y flux ( ) con más de 8 proyectos importantes (más de 100 pantallas cada uno), aprendimos algunas cosas sobre las aplicaciones de React. React Redux 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. es el nombre del producto. Pablo es donde van todos los archivos creados, nunca toca esto, excepto cuando necesita implementar. build es donde van su archivo y los activos < . (Se copian automáticamente para compilar mientras se usa create-react-app) public index.html script src> es donde codificas. src 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.pages maneja su estado (acciones + reductores usando la estructura de archivos de patos). src.modules tiene componentes compartidos, como Botón, Entrada, etc. src.components tiene utilidades como su contenedor API, utilidades de fecha, utilidades de cadena, etc. src.utils es donde almacena sus variables de entorno como puntos finales de API. No envíes esto a git. config inicializa la tienda redux. store registra las rutas y representa la aplicación. index 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. 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 en el nodo de inicio de sesión y colocar el componente SuccessMessage.js allí. Todos los nodos son lowerCamelCased. forgotModal 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 , 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. estructura de archivos de patos 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 , entonces entiende Fractal correctamente. módulos.aplicación 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 y agregarle un archivo llamado source.js y dentro de en la línea 11, agregue otra clave = y valor = modules.app combineReducers revisión combineReducers ({fuente: fuente de revisión}). El fondo La idea del Fractal fue acuñada por mi mentor . Esta idea se implementó con éxito en las API basadas en Express y la tomé prestada para crear aplicaciones de reacción escalables. Kapil Verma 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. _appuity-frontend - Código base de React para http://appuity.ml y Fractal demo._github.com shivekkhurana/appuity-frontend 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: _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 Un simple truco de UI para mejorar Onboarding UX [OCD]

Flow

Instagram

Slack

Twitter

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

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

Demasiado Largo; Para Leer

Companies Mentioned

Coin Mentioned

@shivekkhurana

HISTORIAS RELACIONADAS