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.8 KiB
Plaintext
115 lines
3.8 KiB
Plaintext
---
|
|
title: Gidsargitektuur
|
|
info: "'n Gedetailleerde kykie na ons vouerargitektuur"
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
In hierdie gids sal jy die besonderhede van die projekgidsstruktuur ondersoek en hoe dit bydra tot die organisasie en onderhoudbaarbaarheid van Twenty.
|
|
|
|
Deur hierdie vouerargitektuurkonvensie te volg, is dit makliker om die lêers wat verband hou met spesifieke funksies te vind en om te verseker dat die toepassing skaalbaar en onderhoudbaar is.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Bladsye
|
|
|
|
Sluit die topvlakkomponente in wat deur die aansoekpaaie gedefinieer is. They import more low-level components from the modules folder (more details below).
|
|
|
|
## Modules
|
|
|
|
Elke module verteenwoordig 'n funksie of 'n groep funksies, wat sy spesifieke komponente, toestande en operasionele logika insluit.
|
|
Hulle moet almal die onderstaande struktuur volg. You can nest modules within modules (referred to as submodules) and the same rules will apply.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Kontekste
|
|
|
|
'n Konteks is 'n manier om data deur die komponentboom te stuur sonder om props met die hand op elke vlak af te gee.
|
|
|
|
Sien [React Konteks](https://react.dev/reference/react#context-hooks) vir meer besonderhede.
|
|
|
|
### GraphQL
|
|
|
|
Sluit fragmente, navrae en mutasies in.
|
|
|
|
Sien [GraphQL](https://graphql.org/learn/) vir meer besonderhede.
|
|
|
|
- Fragmente
|
|
|
|
'n Fragment is 'n herbruikbare stuk van 'n navraag, wat jy op verskillende plekke kan gebruik. By using fragments, it's easier to avoid duplicating code.
|
|
|
|
Sien [GraphQL Fragmente](https://graphql.org/learn/queries/#fragments) vir meer besonderhede.
|
|
|
|
- Navrae
|
|
|
|
Sien [GraphQL Navrae](https://graphql.org/learn/queries/) vir meer besonderhede.
|
|
|
|
- Mutasies
|
|
|
|
Sien [GraphQL Mutasies](https://graphql.org/learn/queries/#mutations) vir meer besonderhede.
|
|
|
|
### Hooks
|
|
|
|
Sien [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) vir meer besonderhede.
|
|
|
|
### States
|
|
|
|
Bevat die staatbestuurslogika. [RecoilJS](https://recoiljs.org) hanteer dit.
|
|
|
|
- Selektore: Sien [RecoilJS Selektore](https://recoiljs.org/docs/basic-tutorial/selectors) vir meer besonderhede.
|
|
|
|
React se ingeboude staatbestuur hanteer steeds toestand binne 'n komponent.
|
|
|
|
### Gereedskap
|
|
|
|
Moet net herbruikbare suiwer funksies bevat. Otherwise, create custom hooks in the `hooks` folder.
|
|
|
|
## UI
|
|
|
|
Bevat al die herbruikbare UI-komponente wat in die toepassing gebruik word.
|
|
|
|
Hierdie vouer kan sub-vouers bevat, soos `data`, `display`, `feedback`, en `input` vir spesifieke tipes komponente. Each component should be self-contained and reusable, so that you can use it in different parts of the application.
|
|
|
|
Deur die UI-komponente van die ander komponente in die `modules` vouer te skei, word dit makliker om 'n konsekwente ontwerp te handhaaf en om veranderinge aan die UI te maak sonder om ander dele (sakelogika) van die kodebasis te beïnvloed.
|
|
|
|
## Koppelvlakke en afhanklikhede
|
|
|
|
Jy kan ander module kode van enige module invoer behalwe vir die `ui` vouer. Dit sal sy kode maklik toetsbaar hou.
|
|
|
|
### Intern
|
|
|
|
Elke deel (hooks, state, ...) van 'n module kan 'n `intern` vouer hê, wat dele bevat wat net binne die module gebruik word.
|