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
4.0 KiB
Plaintext
111 lines
4.0 KiB
Plaintext
---
|
|
title: Arhitectura Folderului
|
|
icon: folder-tree
|
|
info: O privire detaliată asupra arhitecturii folderului nostru
|
|
---
|
|
|
|
În acest ghid, veți explora detaliile structurii directoarelor proiectului și modul în care aceasta contribuie la organizarea și mentenabilitatea Twenty.
|
|
|
|
Respectând convenția de arhitectură a folderului, este mai ușor să găsești fișierele legate de funcționalități specifice și să te asiguri că aplicația este scalabilă și ușor de întreținut.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pagini
|
|
|
|
Include componentele de nivel superior definite de rutele aplicației. Importă componente de nivel mai scăzut din folderul de module (mai multe detalii mai jos).
|
|
|
|
## Module
|
|
|
|
Fiecare modul reprezintă o funcționalitate sau un grup de funcționalități, cuprinzând componentele, stările și logica operațională specifice.
|
|
Toate ar trebui să urmeze structura de mai jos. Poți introduce module în cadrul altor module (denumite submodule), iar aceleași reguli se vor aplica.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Contexturi
|
|
|
|
Un context este o modalitate de a transmite date prin arborele de componente fără a fi necesar să transmiți manual proprietățile la fiecare nivel.
|
|
|
|
Vezi [React Context](https://react.dev/reference/react#context-hooks) pentru mai multe detalii.
|
|
|
|
### GraphQL
|
|
|
|
Include fragmente, interogări și mutații.
|
|
|
|
Vezi [GraphQL](https://graphql.org/learn/) pentru mai multe detalii.
|
|
|
|
* Fragmente
|
|
|
|
Un fragment este o bucată reutilizabilă dintr-o interogare, pe care o poți folosi în diferite locuri. Folosind fragmente este mai ușor să eviți duplicarea codului.
|
|
|
|
Vezi [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) pentru mai multe detalii.
|
|
|
|
* Interogări
|
|
|
|
Vezi [GraphQL Queries](https://graphql.org/learn/queries/) pentru mai multe detalii.
|
|
|
|
* Mutații
|
|
|
|
Vezi [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) pentru mai multe detalii.
|
|
|
|
### Hook-uri
|
|
|
|
Vezi [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) pentru mai multe detalii.
|
|
|
|
### Stări
|
|
|
|
Conține logica de gestionare a stării. [Jotai](https://jotai.org) gestionează aceasta.
|
|
|
|
* Selectori: Atomi derivați (folosind `createAtomSelector`) calculează valori din alți atomi și sunt memoizați automat.
|
|
|
|
Managementul de stare încorporat în React gestionează încă starea în cadrul unei componente.
|
|
|
|
### Unelte
|
|
|
|
Ar trebui să conțină doar funcții pure, reutilizabile. În caz contrar, creează hook-uri personalizate în folderul `hooks`.
|
|
|
|
## UI
|
|
|
|
Conține toate componentele UI reutilizabile folosite în aplicație.
|
|
|
|
Acest folder poate conține subfoldere, precum `data`, `afișaj`, `feedback` și `intrare` pentru tipuri specifice de componente. Fiecare componentă ar trebui să fie autonomă și reutilizabilă, astfel încât să o poți folosi în diferite părți ale aplicației.
|
|
|
|
Prin separarea componentelor UI de celelalte componente din folderul `modules`, este mai ușor să menții un design consistent și să faci modificări la interfața grafică fără a afecta alte părți (logica de afaceri) ale codului.
|
|
|
|
## Interfață și dependențe
|
|
|
|
Poți importa codul altor module din orice modul, cu excepția folderului `ui`. Acest lucru va menține codul ușor de testat.
|
|
|
|
### Intern
|
|
|
|
Fiecare parte (hook-uri, stări, ...) dintr-un modul poate avea un folder `intern`, care conține părți care sunt doar utilizate în cadrul modulului.
|