Kādu pieeju jūs izmantojāt, veidojot sava projekta arhitektūru?

Es izmantoju komponentu pieeju, sekojot atomu dizaina principiem. Sadalīju projektu mazās, atkārtoti izmantojamos komponentēs, grupējot tās pēc abstrakcijas līmeņiem: atomus, molekulas, organismus, šablonus un lapas.

• Atomus: Pamatelementi (pogas, ievades lauki, ikonas).
• Molekulas: Atomju kombinācijas (ievades lauks ar pogu).
• Organismus: Molekulu un/vai atomu grupas (galvene, kājene).
• Šabloni: Organismu un molekulu kompozīcijas, kas nosaka lapas struktūru (lapas izkārtojums).
• Lapas: Konkrēti šablonu eksemplāri ar reāliem datiem.

Tas ļāva sasniegt:

• Augstu atkārtotas izmantošanas līmeni kodā
• Ērtu atbalstu un mērogošanu
• Vienkāršu komponentu testēšanu
• Uzlabotu sadarbību starp dizaineriem un izstrādātājiem

Izmantoju React (vai Vue.js, atkarībā no projekta izmantotā ietvara), pārvaldot stāvokli ar Redux (vai Vuex).

Katalogu struktūra ir organizēta pēc komponentu principa, nevis pēc failu tipa, kas uzlabo pieejamību un saistību starp kodu.

// Piemērs katalogu struktūrai
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    molecules/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    organisms/
      Header/
        Header.js
        Header.module.css
  containers/ // Komponentiem ar saistītu loģiku un datiem
    UserList/
      UserList.js
      UserList.module.css
  pages/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // Vai vuex
    actions/
    reducers/
    store.js
  utils/ // Palīgfunkcijas
  api/ // API saistītās funkcijas