8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
3.9 KiB
Plaintext
115 lines
3.9 KiB
Plaintext
---
|
|
title: Arquitectura de Directoris
|
|
info: Una mirada detallada a la nostra arquitectura de directoris
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
En aquesta guia, exploraràs els detalls de l'estructura del directori del projecte i com contribueix a l'organització i mantenibilitat de Twenty.
|
|
|
|
Mitjançant aquesta convenció d'arquitectura de directoris, és més fàcil trobar els fitxers relacionats amb funcions específiques i assegurar-se que l'aplicació sigui escalable i fàcil de mantenir.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pàgines
|
|
|
|
Inclou els components de nivell superior definits per les rutes de l'aplicació. Importen components de nivell més baix de la carpeta de mòduls (més detalls a continuació).
|
|
|
|
## Mòduls
|
|
|
|
Cada mòdul representa una funció o un grup de funcions, comprenent els seus components específics, estats i lògica operativa.
|
|
Tots haurien de seguir l'estructura següent. Pots acoblar mòduls dins de mòduls (anomenats submòduls) i s'aplicaran les mateixes regles.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Contextos
|
|
|
|
Un context és una manera de passar dades a través de l'arbre de components sense haver de passar atributs manualment a cada nivell.
|
|
|
|
Consulta [React Context](https://react.dev/reference/react#context-hooks) per a més detalls.
|
|
|
|
### GraphQL
|
|
|
|
Inclou fragments, consultes i mutacions.
|
|
|
|
Consulta [GraphQL](https://graphql.org/learn/) per a més detalls.
|
|
|
|
- Fragments
|
|
|
|
Un fragment és una peça reutilitzable d'una consulta, que pots utilitzar en diferents llocs. Mitjançant fragments, és més fàcil evitar duplicar codi.
|
|
|
|
Consulta [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) per a més detalls.
|
|
|
|
- Consultes
|
|
|
|
Consulta [GraphQL Queries](https://graphql.org/learn/queries/) per a més detalls.
|
|
|
|
- Mutacions
|
|
|
|
Consulta [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) per a més detalls.
|
|
|
|
### Hooks
|
|
|
|
Consulta [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) per a més detalls.
|
|
|
|
### Estats
|
|
|
|
Conté la lògica de gestió dels estats. [RecoilJS](https://recoiljs.org) s'encarrega d'això.
|
|
|
|
- Selectors: Consulta [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) per a més detalls.
|
|
|
|
La gestió d'estat integrada de React encara gestiona l'estat dins d'un component.
|
|
|
|
### Utils
|
|
|
|
Hauria de contenir només funcions pures reutilitzables. En cas contrari, crea hooks personalitzats dins la carpeta "hooks".
|
|
|
|
## Interfície d'usuari
|
|
|
|
Conté tots els components d'interfície d'usuari reutilitzables utilitzats en l'aplicació.
|
|
|
|
Aquesta carpeta pot contenir subcarpetes, com ara "data", "display", "feedback" i "input" per a tipus específics de components. Cada component hauria de ser autònom i reutilitzable, de manera que es pugui utilitzar en diverses parts de l'aplicació.
|
|
|
|
Separant els components d'UI dels altres components de la carpeta "modules", és més fàcil mantenir un disseny consistent i fer canvis a la UI sense afectar altres parts (lògica de negoci) del codi base.
|
|
|
|
## Interfície i dependències
|
|
|
|
Es pot importar el codi d'altres mòduls excepte la carpeta "ui". Això mantindrà el seu codi fàcil de provar.
|
|
|
|
### Intern
|
|
|
|
Cada part (hooks, estats, ...) d'un mòdul pot tenir una carpeta "intern", que conté parts que només s'utilitzen dins del mòdul.
|