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
6.2 KiB
Plaintext
115 lines
6.2 KiB
Plaintext
---
|
|
title: Folder Architecture
|
|
info: A detailed look into our folder architecture
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Σε αυτόν τον οδηγό, θα εξερευνήσετε τις λεπτομέρειες της δομής καταλόγου του έργου και πώς συμβάλλει στην οργάνωση και διατηρησιμότητα του Twenty.
|
|
|
|
By following this folder architecture convention, it's easier to find the files related to specific features and ensure that the application is scalable and maintainable.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Σελίδες
|
|
|
|
Περιλαμβάνει τα ανώτατου επιπέδου εξαρτήματα που ορίζονται από τις διαδρομές της εφαρμογής. Εισάγουν περισσότερα χαμηλού επιπέδου εξαρτήματα από τον φάκελο modules (λεπτομέρειες παρακάτω).
|
|
|
|
## Μονάδες
|
|
|
|
Κάθε μονάδα αντιπροσωπεύει ένα χαρακτηριστικό ή μια ομάδα χαρακτηριστικών, που περιλαμβάνει τα συγκεκριμένα εξαρτήματα, καταστάσεις και λογική λειτουργίας.
|
|
Όλες θα πρέπει να ακολουθούν τη δομή παρακάτω. Μπορείτε να ενσωματώσετε μονάδες μέσα σε μονάδες (αναφερόμενες ως υπομονάδες) και θα ισχύουν οι ίδιες κανόνες.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Περιβάλλοντα
|
|
|
|
Ένα περιβάλλον είναι ένας τρόπος να μεταφέρετε δεδομένα μέσω του δένδρου εξαρτημάτων χωρίς να πρέπει να περάσετε props χειροκίνητα σε κάθε επίπεδο.
|
|
|
|
Δείτε [React Context](https://react.dev/reference/react#context-hooks) για περισσότερες λεπτομέρειες.
|
|
|
|
### GraphQL
|
|
|
|
Περιλαμβάνει fragments, queries, και mutations.
|
|
|
|
Δείτε [GraphQL](https://graphql.org/learn/) για περισσότερες λεπτομέρειες.
|
|
|
|
- Fragments
|
|
|
|
Ένα fragment είναι ένα επαναχρησιμοποιήσιμο κομμάτι ενός query, το οποίο μπορείτε να χρησιμοποιήσετε σε διάφορα μέρη. Χρησιμοποιώντας fragments, είναι πιο εύκολο να αποφύγετε την επανάληψη κώδικα.
|
|
|
|
Δείτε [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) για περισσότερες λεπτομέρειες.
|
|
|
|
- Queries
|
|
|
|
Δείτε [GraphQL Queries](https://graphql.org/learn/queries/) για περισσότερες λεπτομέρειες.
|
|
|
|
- Mutations
|
|
|
|
Δείτε [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) για περισσότερες λεπτομέρειες.
|
|
|
|
### Hooks
|
|
|
|
Δείτε [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) για περισσότερες λεπτομέρειες.
|
|
|
|
### Καταστάσεις
|
|
|
|
Περιέχει τη λογική διαχείρισης καταστάσεων. Το [RecoilJS](https://recoiljs.org) χειρίζεται αυτό.
|
|
|
|
- Επιλογείς: Δείτε [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) για περισσότερες λεπτομέρειες.
|
|
|
|
Η ενσωματωμένη διαχείριση καταστάσεων του React εξακολουθεί να χειρίζεται την κατάσταση μέσα σε ένα εξάρτημα.
|
|
|
|
### Εργαλεία
|
|
|
|
Πρέπει να περιέχει μόνο επαναχρησιμοποιήσιμες καθαρές συναρτήσεις. Διαφορετικά, δημιουργήστε προσαρμοσμένα hooks στον φάκελο `hooks`.
|
|
|
|
## Ενδιάμεσο Περιβάλλον Χρήσης
|
|
|
|
Περιέχει όλα τα επαναχρησιμοποιήσιμα εξαρτήματα διεπαφής χρήσης στην εφαρμογή.
|
|
|
|
Αυτός ο φάκελος μπορεί να περιέχει υποφακέλους, όπως το `data`, `display`, `feedback`, και `input` για συγκεκριμένους τύπους εξαρτημάτων. Κάθε εξάρτημα πρέπει να είναι αυτοτελές και επαναχρησιμοποιήσιμο, έτσι ώστε να μπορείτε να το χρησιμοποιήσετε σε διαφορετικά μέρη της εφαρμογής.
|
|
|
|
Χωρίζοντας τα εξαρτήματα διεπαφής χρήσης από τα άλλα εξαρτήματα στον φάκελο `modules`, είναι πιο εύκολο να διατηρείτε μια συνεπή σχεδίαση και να πραγματοποιείτε αλλαγές στη διεπαφή χρήσης χωρίς να επηρεάζετε άλλα μέρη (επιχειρησιακή λογική) του κώδικα.
|
|
|
|
## Διασύνδεση και εξαρτησίες
|
|
|
|
Μπορείτε να εισάγετε κώδικα άλλης μονάδας από οποιαδήποτε μονάδα εκτός από τον φάκελο `ui`. Αυτό θα κρατήσει τον κώδικα εύκολο στη δοκιμή.
|
|
|
|
### Εσωτερικό
|
|
|
|
Κάθε μέρος (hooks, states, ...) μιας μονάδας μπορεί να έχει έναν φάκελο `internal`, ο οποίος περιέχει μέρη που χρησιμοποιούνται μόνο μέσα στη μονάδα.
|