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: Map Architectuur
|
|
info: Een gedetailleerd overzicht van onze maparchitectuur
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
In deze gids verkent u de details van de projectmapstructuur en hoe deze bijdraagt aan de organisatie en onderhoudbaarheid van Twenty.
|
|
|
|
Door deze maparchitectuurconventie te volgen, is het gemakkelijker om bestanden die met specifieke functies te maken hebben te vinden en te zorgen dat de applicatie schaalbaar en onderhoudbaar is.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pagina's
|
|
|
|
Includes the top-level components defined by the application routes. Zij importeren meer low-level componenten uit de modules map (meer details hieronder).
|
|
|
|
## Modules
|
|
|
|
Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
|
|
Ze moeten allemaal de onderstaande structuur volgen. Je kunt modules nestelen binnen modules (vermeld als submodules) en dezelfde regels zijn van toepassing.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Contexten
|
|
|
|
Een context is een manier om gegevens door de componentenboom door te geven zonder op elke niveau props handmatig door te moeten geven.
|
|
|
|
Zie [React Context](https://react.dev/reference/react#context-hooks) voor meer details.
|
|
|
|
### GraphQL
|
|
|
|
Omvat fragmenten, queries en mutaties.
|
|
|
|
Zie [GraphQL](https://graphql.org/learn/) voor meer details.
|
|
|
|
- Fragmenten
|
|
|
|
Een fragment is een herbruikbaar stuk van een query, dat je op verschillende plaatsen kunt gebruiken. Door gebruik te maken van fragmenten is het gemakkelijker om het dupliceren van code te vermijden.
|
|
|
|
Zie [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) voor meer details.
|
|
|
|
- Queries
|
|
|
|
Zie [GraphQL Queries](https://graphql.org/learn/queries/) voor meer details.
|
|
|
|
- Mutaties
|
|
|
|
Zie [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) voor meer details.
|
|
|
|
### Hooks
|
|
|
|
Zie [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) voor meer details.
|
|
|
|
### Staten
|
|
|
|
Contains the state management logic. [RecoilJS](https://recoiljs.org) doet dit.
|
|
|
|
- Selectors: Zie [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) voor meer details.
|
|
|
|
React's ingebouwde statusbeheer beheert nog steeds de toestand binnen een component.
|
|
|
|
### Utils
|
|
|
|
Dit moet alleen herbruikbare pure functies bevatten. Anders, maak aangepaste hooks in de `hooks` map aan.
|
|
|
|
## UI
|
|
|
|
Bevat alle herbruikbare UI componenten die in de applicatie worden gebruikt.
|
|
|
|
Deze map kan submappen bevatten, zoals `data`, `weergave`, `feedback` en `invoer` voor specifieke soorten componenten. Elke component moet zelfstandig en herbruikbaar zijn, zodat je deze in verschillende delen van de applicatie kunt gebruiken.
|
|
|
|
Door de UI componenten te scheiden van de andere componenten in de `modules` map, is het gemakkelijker om een consistent ontwerp te behouden en wijzigingen aan te brengen aan de UI zonder andere delen (de bedrijfslogica) van de codebasis te beïnvloeden.
|
|
|
|
## Interface en afhankelijkheden
|
|
|
|
You can import other module code from any module except for the `ui` folder. Dit zal ervoor zorgen dat de code gemakkelijk te testen blijft.
|
|
|
|
### Intern
|
|
|
|
Elk onderdeel (hooks, staten, ...) van een module kan een `intern` map hebben, die onderdelen bevat die alleen binnen de module gebruikt worden.
|