e02c24bd3a
Created by Github action --------- Co-authored-by: Abdul Rahman <ar5438376@gmail.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
115 lines
5.9 KiB
Plaintext
115 lines
5.9 KiB
Plaintext
---
|
|
title: Архитектура папок
|
|
info: Подробное рассмотрение нашей архитектуры папок
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
|
|
|
|
Следуя этому соглашению об архитектуре папок, легче находить файлы, связанные с конкретными функциями, и обеспечивать масштабируемость и поддерживаемость приложения.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pages
|
|
|
|
Включает компоненты высокого уровня, определенные маршрутами приложения. Они импортируют более низкоуровневые компоненты из папки модулей (подробности ниже).
|
|
|
|
## Модули
|
|
|
|
Каждый модуль представляет собой функционал или группу функций, содержащий свои специфические компоненты, состояния и операционную логику.
|
|
Все они должны следовать структуре ниже. Вы можете вложить модули в модули (называются подмодулями), и те же правила будут применяться.
|
|
|
|
```
|
|
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
|
|
|
|
Включает фрагменты, запросы и мутации.
|
|
|
|
См. [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 все еще управляет состоянием внутри компонента.
|
|
|
|
### Утилиты
|
|
|
|
Должны содержать только переиспользуемые чистые функции. В противном случае создайте пользовательские хуки в папке `hooks`.
|
|
|
|
## Пользовательский интерфейс
|
|
|
|
Содержит все переиспользуемые компоненты пользовательского интерфейса, используемые в приложении.
|
|
|
|
Эта папка может содержать подкаталоги, такие как `data`, `display`, `feedback` и `input` для конкретных типов компонентов. Каждый компонент должен быть автономным и переиспользуемым, чтобы вы могли использовать его в разных частях приложения.
|
|
|
|
Разделяя компоненты пользовательского интерфейса от других компонентов в папке `modules`, легче поддерживать согласованность дизайна и вносить изменения в пользовательский интерфейс, не затрагивая другие части (бизнес-логику) кодовой базы.
|
|
|
|
## Интерфейс и зависимости
|
|
|
|
Вы можете импортировать код других модулей из любого модуля, кроме папки `ui`. Это позволит упростить тестирование его кода.
|
|
|
|
### Внутренний
|
|
|
|
Каждая часть (хуки, состояния, ...) модуля может иметь внутреннюю папку, содержащую части, которые используются только внутри модуля.
|