Koji ste pristup koristili prilikom građenja arhitekture vašeg projekta?

Koristio sam pristup zasnovan na komponentama, prateći principe atomski dizajn. Podelio sam projekat na male, ponovo upotrebljive komponente, grupišući ih po nivoima apstrakcije: atomi, molekuli, organizmi, šabloni i stranice.

• Atomi: Osnovni elementi (dugmad, ulazni elementi, ikone).
• Molekuli: Kombinacije atoma (ulazno polje sa dugmetom).
• Organizmi: Grupe molekula i/ili atoma (zaglavlje, podnožje).
• Šabloni: Kompozicije organizama i molekula koje definišu strukturu stranice (raspored stranice).
• Stranice: Konkretni primeri šablona sa pravim podacima.

Ovo je omogućilo da se postigne:

• Visok nivo ponovne upotrebljivosti koda
• Lako održavanje i skaliranje
• Lako testiranje komponenti
• Bolja saradnja između dizajnera i programera

Koristio sam React (ili Vue.js, u zavisnosti od frameworka koji se koristi u projektu), upravljajući stanjem putem Redux (ili Vuex).

Struktura direktorijuma je organizovana po komponentama, a ne po tipu fajla, što poboljšava dostupnost i koheziju koda.

// Primer strukture direktorijuma
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    molekuli/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    organizmi/
      Header/
        Header.js
        Header.module.css
  containers/ // Za komponente povezane sa logikom i podacima
    UserList/
      UserList.js
      UserList.module.css
  stranice/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // Ili Vuex
    actions/
    reducers/
    store.js
  utils/ // Pomoćne funkcije
  api/ // Rad sa API-jem