Organización de archivos en el frontend

Para Vue, el Curso Avanzado de Vue.js te da una base sólida de cómo puedes organizar tus carpetas. Para este curso, el profesor crea una web que usa el API de DIABLO III de Blizzard para armar un profile finder, y aquí el profesor organiza todo en diferentes tipos de carpetas, una carpeta para utils, otra para manejar el estado de Vue y otra carpeta de Vistas, y en la carpeta de Vistas, el profesor divide todo por componentes, por ejemplo, si tienes un componente de tipo “arma”, el profesor crea una carpeta para ese componente, y en el Index.vue se maneja el componente principal, y dentro de la misma carpeta crea los sub-componentes para ese componente jaja

A mí me gustó mucho esa forma de organizar los componentes para Vue ❤️

En nuestro equipo de desarrollo trabajamos con React y decidimos usar esta arquitectura.

https://codewithghazi.com/best-scalable-react-app-structure-2021/

https://github.com/gkhan205/cwg-react-starter

• src/
  • main/
  • modules/
  • library/
  • resources/

En lo personal tuve la oportunidad de participar en la conferencia llamada “Ng Bolivia” Donde una de las charlas más destacables y entretenidas, era una que hablaba de estructuras de proyectos en Angular, pero se puede implementar en otros frameworks o librerias. Les dejo la charla:

• Scalable Angular Architecture - Juan Herrera

En lo personal con React y para proyecto ultra-escalables (large projects) no recomiendo hacer el folder structure por componentes. Con el advenimiento de React Client/Server components y suspense, sería muy complejo. Tener un folder structure por “type files” es lo mejor.

Para angular la estructura por componentes es la recomendada, y de hecho, angular mismo propone esta estructura y te la genera cuando usas el angular-cli.

Yo organizo mis proyectos de la siguiente manera, los componentes contienen dos directorios los ui-elements que son los elementos que estarán construyendo nuestro proyecto a través de los widget es donde armamos componentes que incorporan mas de un ui-element, una vez ready esto simplemente tomamos nuestros widget y vamos armando nuestro rompe cabezas en el directorio de view

• src

  • components
    • Ui-Elements
      • Button.js
      • Input.js
      • Select.js
    • Widget
      • Modal
      • Login
      • Navbar
  • View
    • Login
    • Register
    • Dashboard

Tipos de organización de carpetas

-File Type First: Carpeta por cada tipo de archivos.
-Feature First: Una carpeta para cada feature.
-Apps for apps: Una carpeta para cada aplicacion.

Hay herramientas para el manejo del estado que nos ayudan a evitar a tener codigo espaguetti. Esto se le llama Deuda tecnica, por que en el futuro tendremos problemas en el futuro. Nos demoraremos un poco mas pero siempre es bueno tener una buena organizacion.

Se divide entre logico vs interfaz. Es bueno tener una capa de UI y otra una capa de Datos. En react es bueno dividir todo entre componentes contenedores y presentacional.

File Type First

Tipo de organizacion donde cada tipo de archivo.Una de componentes, una de contenedores, otra para rutas.

Feature First

donde cada componente de nuestra aplicacion es dividir una carpeta para cada elemento que tengamos. Una carpeta de Menu, una carpeta de Form, una carpeta de Button. Esta forma es buena ya que cada carpeta sera independiente y no sera tan difiicil de entender.

Apps For Apps

Una carpeta para cada aplicacion

Seria un buen aporte, aprender a organizar carpetas, me parece muy interesante los articulos de los recursos.

Les dejo este articulo de como organizar carpetas en un proyecto de react.

[]https://latteandcode.medium.com/organizando-tus-proyectos-en-react-31bf9fbe6509

• src
  • Component

Microfrontends, sería como lo de app for apps pero on repos separados, https://martinfowler.com/articles/micro-frontends.html

Creo entender que lo que dice sobre Apps for Apps es con la implementación de microFrontEnt, en la empresa en la que trabajo utilizan esta forma de trabajo en el aplicativo utilizando Angular, y con xgnx sirven las diferentes Apps dependiente de la ruta que se mande.

Para el encarpetado en React js, utilizo esta forma, no se que tan errado este.

Wow, yo creí que siempre usábamos “file type first”

easy peace!!!

Yo me organizo a veces de la siguiente forma:

src:

• components
  component
• pages
• assets

esta es la estructura base después agrego otras carpetas dependiendo el proyecto , como por ejemplo plugin, helpers, api, reducers, actions, etc…

Mi manera de trabajar es hacer un desastre hasta que ya no puedo más y entonces organizo! Así veo más fácilmente patrones en el código y organizo las carpetas con más criterio en comparación con crear mi sistema de archivos sin saber bien cómo será el código! Deje que el código crezca! Luego organiza.

El FIle Type Frist, me gusta mucho, incluso, en React, genero una carpeta de estilos por cada tipo de carpeta. 😃