Milyen megközelítést alkalmazott a projekt architektúrájának felépítése során?

Komponensalapú megközelítést alkalmaztam, az atomtervezés elveit követve. A projektet kis, újra felhasználható komponensekre bontottam, azokat absztrakciós szintek szerint csoportosítva: atomok, molekulák, szervezetek, sablonok és oldalak.

• Atomok: Alapelemek (gombok, bemeneti mezők, ikonok).
• Molekulák: Atomok kombinációi (bemeneti mező gombbal).
• Szervezetek: Molekulák és/vagy atomok csoportjai ( fejléc, lábléc).
• Sablonok: Szervezetek és molekulák összetétele, amelyek meghatározzák az oldal szerkezetét (oldal elrendezése).
• Oldalak: Konkrét példányok a sablonokból, valódi adatokkal.

Ez lehetővé tette:

• Magas kód újrafelhasználhatóság
• Könnyű karbantartás és skálázás
• Komponensek tesztelésének egyszerűsége
• Jobb együttműködés a tervezők és fejlesztők között

React-et (vagy Vue.js-t, a projektben használt keretrendszertől függően) használtam, és a állapotkezelést Redux (vagy Vuex) segítségével végeztem.

A könyvtárstruktúra komponens-alapú, nem fájltípus szerint szervezett, ez javítja a kód kereshetőségét és összhangját.

// Példa könyvtárstruktúrára
src/
  components/
    atomok/
      Gomb/
        Gomb.js
        Gomb.module.css
    molekulák/
      BemenetGombbal/
        BemenetGombbal.js
        BemenetGombbal.module.css
    szervezetek/
      Fejlec/
        Fejlec.js
        Fejlec.module.css
  containers/ // A logikával és adatokkal kapcsolatos komponensek
    FelhasznaloLista/
      FelhasznaloLista.js
      FelhasznaloLista.module.css
  oldalak/
    Kezdolap/
      Kezdolap.js
      Kezdolap.module.css
  redux/ // Vagy Vuex
    actions/
    reducers/
    store.js
  utils/ // Segéfüggvények
  api/ // API-val való munka