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
5.2 KiB
Plaintext
115 lines
5.2 KiB
Plaintext
---
|
|
title: Архитектура фасцикли
|
|
info: Детаљан преглед наше архитектуре фасцикли
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
У овом водичу ћете истражити детаље структуре пројектног директоријума и како она доприноси организацији и одрживости Twenty.
|
|
|
|
Пратећи ову конвенцију архитектуре фасцикли, лакше је пронаћи датотеке везане за специфичне карактеристике и обезбедити да је апликација скалабилна и одржива.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Странице
|
|
|
|
Includes the top-level components defined by the application routes. They import more low-level components from the modules folder (more details below).
|
|
|
|
## Модули
|
|
|
|
Сваки модул представља функционалност или групу функционалности, састављен од специфичних компоненти, стања и оперативне логике.
|
|
Сви би требало да прате наведену структуру. Можете угнездити модуле унутар модула (названи подмодули) и исте ће се применити правила.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Контексти
|
|
|
|
Контекст је начин преношења података кроз дрво компоненти без потребе за ручним преносом пропса на сваком нивоу.
|
|
|
|
Погледајте [React Context](https://react.dev/reference/react#context-hooks) за више детаља.
|
|
|
|
### ГрафКуЕл
|
|
|
|
Обухвата фрагменте, упите и мутације.
|
|
|
|
Погледајте [GraphQL](https://graphql.org/learn/) за више детаља.
|
|
|
|
- Фрагменти
|
|
|
|
Фрагмент је поново употребљив део упита, који можете користити на различитим местима. Коришћењем фрагмената, избегава се дуплирање кода.
|
|
|
|
Погледајте [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) за више детаља.
|
|
|
|
- Упити
|
|
|
|
Погледајте [GraphQL Queries](https://graphql.org/learn/queries/) за више детаља.
|
|
|
|
- Мутације
|
|
|
|
Погледајте [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) за више детаља.
|
|
|
|
### Хукови
|
|
|
|
Погледајте [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) за више детаља.
|
|
|
|
### Стања
|
|
|
|
Садржи логику управљања стањем. [RecoilJS](https://recoiljs.org) се носи са овим.
|
|
|
|
- Селектори: Погледајте [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) за више детаља.
|
|
|
|
React-ово уграђено управљање стањем још увек обрађује стање унутар компоненте.
|
|
|
|
### Алатке
|
|
|
|
Треба да садржи само поново употребљиве чисте функције. Otherwise, create custom hooks in the `hooks` folder.
|
|
|
|
## UI
|
|
|
|
Садржи све поново употребљиве UI компоненте које се користе у апликацији.
|
|
|
|
Ова фасцикла може садржати подфасцикле, као што су `data`, `display`, `feedback`, и `input` за специфичне типове компоненти. Свака компонента треба да буде самостална и поново употребљива, тако да је можете користити у различитим деловима апликације.
|
|
|
|
By separating the UI components from the other components in the `modules` folder, it's easier to maintain a consistent design and to make changes to the UI without affecting other parts (business logic) of the codebase.
|
|
|
|
## Интерфејс и зависности
|
|
|
|
Можете увезти други модулски код из било ког модула осим `ui` фасцикле. Ово ће задржати његов код лак за тестирање.
|
|
|
|
### Интерно
|
|
|
|
Сваки део (хукови, стања, ...) модула може имати `internal` фасциклу, која садржи делове који се користе само унутар модула.
|