Кадом усулро дар сохтани меъмории лоиҳатон истифода…

Ман компонентӣ равишро истифода кардам, ки принсипҳои дизайн атомиро риоя мекунад. Проектро ба компонентҳои хурд ва такрорӣ тақсим кардам, онҳоро мувофиқи сатҳҳои абстраксия гурӯҳбандӣ кардам: атомҳо, молекулҳо, организмҳо, шаблонҳо ва саҳифаҳо.

Атомҳо: унсурҳои асосӣ (тугмаҳо, майдонҳои воридотӣ, нишонаҳо).
Молекулҳо: Комбинатсияҳои атомҳо (майдони воридот бо тугма).
Организмҳо: Гурӯҳҳои молекул ва/ё атомҳо (сарлавҳа, поёнӣ).
Шаблонҳо: Композицияҳои организмҳо ва молекулҳо, ки сохтори саҳифаро муайян мекунанд (тартиби саҳифа).
Саҳифаҳо: Нусхаҳои мушаххас аз шаблонҳо бо маълумоти воқеӣ.

Ин имкон дод:

Баъдсозии баландтарини коди баргардондашаванда
Осонии нигоҳдорӣ ва васеъшавӣ
Осонии санҷиши компонентҳо
Беҳтар кардани ҳамкорӣ байни дизайнёрҳо ва таҳиягарон

Ман React (ё Vue.js, вобаста ба рамзгузории истифодаи дар лоиҳа) истифода кардам ва ҳолатро тавассути Redux (ё Vuex) идора кардам.

Тартиби каталогҳо ба компонентҳо ташкил шудааст, на ба навъи файл, ки ин ба ёфтани коди беҳтар кӯмак мекунад.

// Намунаи тартиби каталогҳо
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    molecules/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    организмҳо/
      Header/
        Header.js
        Header.module.css
  containers/ // Барои компонентҳое, ки бо логика ва маълумот алоқаманданд
    UserList/
      UserList.js
      UserList.module.css
  pages/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // Ё Vuex
    actions/
    reducers/
    store.js
  utils/ // Функсияҳои ёрдамчи
  api/ // Кор бо API

Кадом усулро дар сохтани меъмории лоиҳатон истифода бурдед?