github-actions[bot]
68f4cf269d
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22281?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
111 lines
3.9 KiB
Plaintext
111 lines
3.9 KiB
Plaintext
---
|
|
title: Architettura delle Cartelle
|
|
icon: folder-tree
|
|
info: Uno sguardo dettagliato all'architettura delle nostre cartelle
|
|
---
|
|
|
|
In questa guida, esplorerai i dettagli della struttura delle directory del progetto e come contribuisce all'organizzazione e alla manutenibilità di Twenty.
|
|
|
|
Seguendo questa convenzione di architettura delle cartelle, è più facile trovare i file relativi a funzionalità specifiche e garantire che l'applicazione sia scalabile e manutenibile.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pagine
|
|
|
|
Include i componenti di alto livello definiti dalle rotte dell'applicazione. Importano componenti di livello inferiore dalla cartella modules (vedi dettagli sotto).
|
|
|
|
## Moduli
|
|
|
|
Ogni modulo rappresenta una funzionalità o un gruppo di funzionalità, comprendente i suoi componenti specifici, stati e logica operativa.
|
|
Dovrebbero tutti seguire la struttura sottostante. Puoi nidificare moduli all'interno di moduli (indicati come sottomoduli) e le stesse regole si applicano.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Contesti
|
|
|
|
Un contesto è un modo per passare dati attraverso l'albero dei componenti senza dover trasmettere i props manualmente a ogni livello.
|
|
|
|
Vedi [React Context](https://react.dev/reference/react#context-hooks) per ulteriori dettagli.
|
|
|
|
### GraphQL
|
|
|
|
Include frammenti, query e mutazioni.
|
|
|
|
Vedi [GraphQL](https://graphql.org/learn/) per ulteriori dettagli.
|
|
|
|
* Frammenti
|
|
|
|
Un frammento è un pezzo riutilizzabile di una query, che puoi usare in posti diversi. Usando i frammenti, è più facile evitare la duplicazione di codice.
|
|
|
|
Vedi [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) per ulteriori dettagli.
|
|
|
|
* Query
|
|
|
|
Vedi [GraphQL Queries](https://graphql.org/learn/queries/) per ulteriori dettagli.
|
|
|
|
* Mutazioni
|
|
|
|
Vedi [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) per ulteriori dettagli.
|
|
|
|
### Hook
|
|
|
|
Vedi [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) per ulteriori dettagli.
|
|
|
|
### Stati
|
|
|
|
Contiene la logica di gestione degli stati. [Jotai](https://jotai.org) se ne occupa.
|
|
|
|
* Selettori: Gli atomi derivati (utilizzando `createAtomSelector`) calcolano valori da altri atomi e vengono memoizzati automaticamente.
|
|
|
|
La gestione degli stati integrata di React si occupa ancora dello stato all'interno di un componente.
|
|
|
|
### Utilità
|
|
|
|
Dovrebbe contenere solo funzioni pure riutilizzabili. In caso contrario, crea hook personalizzati nella cartella `hooks`.
|
|
|
|
## UI
|
|
|
|
Contiene tutti i componenti UI riutilizzabili usati nell'applicazione.
|
|
|
|
Questa cartella può contenere sottocartelle, come `data`, `display`, `feedback` e `input` per tipi specifici di componenti. Ogni componente dovrebbe essere autonomo e riutilizzabile, così da poterlo utilizzare in diverse parti dell'applicazione.
|
|
|
|
Separando i componenti UI dagli altri componenti nella cartella `modules`, è più facile mantenere un design coerente e apportare modifiche alla UI senza influenzare altre parti (logica di business) del codice.
|
|
|
|
## Interfaccia e dipendenze
|
|
|
|
Puoi importare codice di altri moduli da qualsiasi modulo, tranne la cartella `ui`. Questo manterrà il suo codice facile da testare.
|
|
|
|
### Interni
|
|
|
|
Ogni parte (hook, stati, ...) di un modulo può avere una cartella `internal`, che contiene le parti utilizzate solo all'interno del modulo.
|