რა მიდგომა გამოიყენეთ თქვენი პროექტის არქიტექტურის შექმნისას?

მე გამოვიყენე კომპონენტზე დაფუძნებული მიდგომა, რომელიც ატომური დიზაინის პრინციპებს იცავს. პროექტი დავყავი პატარა, გადამეორებადი კომპონენტებად, რომლებიც ჯგუფებად არის დაყოფილი აბსტრაქციის დონეების მიხედვით: ატომები, მოლეკულები, ორგანიზმები, შაბლონები და გვერდები.

• ატომები: ძირითადი ელემენტები (ღილაკები, შესასვლელი ველები, იკონები).
• მოლეკულები: ატომების კომბინაციები (შესასვლელი ველი ღილაკთან ერთად).
• ორგანიზმები: მოლეკულებისა და/ან ატომების ჯგუფები (სათაური, ქვედა ფუტერი).
• შაბლონები: ორგანიზმებისა და მოლეკულების კომპოზიციები, რომლებიც განსაზღვრავს გვერდის სტრუქტურას (გვერდის განლაგება).
• გვერდები: შაბლონების კონკრეტული მაგალითები რეალური მონაცემებით.

ეს საშუალებას მისცა:

• კოდის მაღალი გადამეორებადობა
• მარტივი შენარჩუნება და მასშტაბირება
• კომპონენტების მარტივი ტესტირება
• უკეთესი თანამშრომლობა დიზაინერებსა და შემქმნელებს შორის

გამოყენებული მაქვს 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
    actions/
    reducers/
    store.js
  utils/ // დახმარების ფუნქციები
  api/ // API-თან მუშაობა