Welke aanpak hebt u gebruikt bij het opbouwen van de architectuur van uw project?

Ik heb een componentgerichte aanpak gebruikt, volgens de principes van atomisch ontwerp. Ik heb het project opgesplitst in kleine, herbruikbare componenten, gegroepeerd op abstractieniveaus: atomen, moleculen, organismen, sjablonen en pagina's.

• Atomen: Basis elementen (knoppen, invoervelden, iconen).
• Moleculen: Combinaties van atomen (invoerveld met knop).
• Organismen: Groepen van moleculen en/of atomen (koptekst, voettekst).
• Sjablonen: Composities van organismen en moleculen die de structuur van de pagina bepalen (pagina-indeling).
• Pagina's: Concrete exemplaren van sjablonen met echte gegevens.

Dit stelde ons in staat om te bereiken:

• Hoge herbruikbaarheid van code
• Gemak van onderhoud en schaalbaarheid
• Gemak van componenttesten
• Betere samenwerking tussen ontwerpers en ontwikkelaars

Ik heb React (of Vue.js, afhankelijk van het gebruikte framework in het project) gebruikt en de staat beheerd via Redux (of Vuex).

De directorystructuur is georganiseerd op componenten, niet op bestandstype, wat de vindbaarheid en samenhang van de code verbetert.

// Voorbeeld van directorystructuur
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    molecules/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    organisms/
      Header/
        Header.js
        Header.module.css
  containers/ // Voor componenten gerelateerd aan logica en data
    UserList/
      UserList.js
      UserList.module.css
  pages/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // Of Vuex
    actions/
    reducers/
    store.js
  utils/ // Hulpfuncties
  api/ // Werken met API