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
4.3 KiB
Plaintext
115 lines
4.3 KiB
Plaintext
---
|
||
title: ארכיטקטורת תיקיות
|
||
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
|
||
└───...
|
||
```
|
||
|
||
## דפים
|
||
|
||
Includes the top-level components defined by the application routes. הם מייבאים רכיבי דרגה נמוכה יותר מתיקיית המודולים (פרטים נוספים בהמשך).
|
||
|
||
## מודולים
|
||
|
||
Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
|
||
כולם צריכים לעקוב אחר המבנה שלמטה. ניתן לשלב מודולים בתוך מודולים (מתייחסים להן כמודולי משנה) וחלים עליהם אותם כללים.
|
||
|
||
```
|
||
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
|
||
|
||
Includes fragments, queries, and mutations.
|
||
|
||
ראו [GraphQL](https://graphql.org/learn/) לפרטים נוספים.
|
||
|
||
- קטעים
|
||
|
||
קטע הוא חלק שניתן להשתמש בו מחדש של שאילתה, שבו ניתן להשתמש במקומות שונים. על ידי שימוש בקטעים, קל יותר להימנע מחזרה על קוד.
|
||
|
||
ראו [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) לפרטים נוספים.
|
||
|
||
- שאלות
|
||
|
||
ראו [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 עדיין מטפל במצב בתוך רכיב.
|
||
|
||
### Utils
|
||
|
||
Should just contain reusable pure functions. אחרת, צור קרסים מותאמים אישית בתיקיית `hooks`.
|
||
|
||
## UI
|
||
|
||
מכיל את כל רכיבי UI הניתנים לשימוש חוזר המשמשים באפליקציה.
|
||
|
||
תיקייה זו יכולה להכיל תת-תיקיות כמו `data`, `display`, `feedback`, ו `input` לצורך סוגי רכיבים ספציפיים. כל רכיב צריך להיות עצמאי וניתן לשימוש חוזר, כך שניתן להשתמש בו בחלקים שונים של האפליקציה.
|
||
|
||
על ידי הפרדת רכיבי ה-UI מהמרכיבים האחרים בתיקיית `modules`, קל יותר לשמור על עיצוב עקבי ולעשות שינויים ב-UI מבלי להשפיע על חלקים אחרים (לוגיקה עסקית) של קוד הבסיס.
|
||
|
||
## ממשקים ותלויות
|
||
|
||
ניתן לייבא קוד מודולים אחרים מכל מודול למעט התיקייה `ui`. זה ישמור על קלות הקוד לבדיקה.
|
||
|
||
### פנימיים
|
||
|
||
כל חלק (קרסים, מצבים, ...) של מודול יכול להכיל תיקיית `internal`, שמכילה חלקים שמשמשים רק בתוך המודול.
|