Ի՞նչ մոտեցում եք օգտագործել ձեր նախագծի ճարտարապետությունը կառուցելիս:

Կոմպոնենտային մոտեցում եմ կիրառել՝ հետևելով աուտոմատիկ դիզայնի սկզբունքներին։ Նախագիծը բաժանել եմ փոքր, վերօգտագործվող կոմպոնենտների՝ խմբավորելով դրանք աուտոմների, մոլեկուլների, օրգանիզմների, շաբլոնների և էջերի մակարդակներով։

• Աւտոմներ: Հիմնական տարրեր (կոճակներ, մուտքային դաշտեր, պատկերակներ)։
• Մոլեկուլներ: Աւտոմների համադրություններ (մուտքային դաշտ՝ կոճակով)։
• Օրգանիզմներ: Մոլեկուլների և/կամ աուտոմների խմբեր (հետնագիր, ստորագրություն)։
• Շաբլոններ: Օրգանիզմների և մոլեկուլների կոմպոզիցիաներ, որոնք սահմանում են էջի կառուցվածքը (էջի դասավորություն)։
• Էջեր: Շաբլոնների կոնկրետ օրինակներ՝ իրական տվյալներով։

Այս մոտեցումը հնարավորություն տվեց հասնել.

• Կոդի բարձր վերօգտագործելիություն։
• Պահպանման և ընդլայնման հեշտություն։
• Կոմպոնենտների թեստավորման պարզություն։
• Դիզայներների և ծրագրավորողների միջև ավելի լավ փոխգործակցություն։

Օգտագործեցի React (կամ Vue.js՝ կախված նախագծում օգտագործվող ֆրեյմվորկից), կառավարվեց վիճակը Redux (կամ Vuex) միջոցով։

Ֆայլային կառուցվածքը կազմակերպված է կոմպոնենտների հիման վրա, ոչ թե ֆայլի տիպով, ինչը բարելավում է կոդի հասանելիությունը և կապակցությունը։

// Օրինակ ֆայլային կառուցվածքի
src/
  components/
    atoms/
      Button/
        Button.js
        Button.module.css
    մոլեկուլներ/
      InputWithButton/
        InputWithButton.js
        InputWithButton.module.css
    օրգանիզմներ/
      Header/
        Header.js
        Header.module.css
  containers/ // Կոմպոնենտներ՝ կապված տրամաբանության և տվյալների հետ
    UserList/
      UserList.js
      UserList.module.css
  էջեր/
    HomePage/
      HomePage.js
      HomePage.module.css
  redux/ // կամ Vuex
    գործողություններ/
    վերականգնողներ/
    store.js
  utils/ // Օգնակառուցվածքներ
  api/ // API-ի հետ աշխատում