A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Organizaci贸n de archivos en el frontend

26/28
Recursos

Aportes 17

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥渁rma鈥, 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 鈥淣g 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:

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 鈥渢ype 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 鈥渇ile 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. 馃槂