Facit Enhancement

Agar project lebih maintainable, disini kita perlu sedikit adjustment untuk folder pages/presentation/*.

# Pages Folder Structure
.
└── pages
    └── presentation
        └── [feature name]
              ├── components
                    ├── [feature name]Form.tsx
              ├── _core
                └── [feature name]ResponseProvider.tsx
            ├── [feature name]-list
                ├── table
                      └── columns
                            ├── [feature name]Columns.tsx
                            ├── [feature name]NameCell.tsx
                            └── ...
                    ├── [feature name]ListTable.tsx
                └── [feature name]List.tsx
            ├── [feature name]-edit 
                  ├── [feature name]Edit.tsx
            └── [feature name]Page.tsx

Struktur diatas adalah struktur pendukung penggunaan react-query. Karena facit belum menggunakan react-query secara langsung, kita perlu menginstall-nya terlebih dahulu.

Structure Explanation

Untuk meningkatkan performa dan maintainability, saya rasa perlu dilakukan enhancement dari sisi code dan folder structure template facit ini, dikarenakan menurut opini saya pribadi, terlalu sulit untuk mencari mana yang page list dan mana yang form, juga bagaimana mencari halaman real (component route), dan mana yang component.

Pages

Tempat kita menyimpan semua page yang tersedia/terdaftar di react-router.

Features

Kita memisahkan page berdasarkan fitur, supaya meminimalisir senggol menyenggol antara satu fitur dengan fitur lain. Perlu diperhatikan untuk penulisan nama folder, kita wajib menggunakan kebab-case atau dash-case, maka dari itu, ketika kita akan membuat nama fitur, diwajibkan untuk menggunakan case-case tersebut. e.g user-management

Dalam folder [feature-name], akan ada beberapa folder base on feature yang sedang kita kerjakan. Misal kita sedang mengerjakan feature User Management, dimana akan ada feature list, add, update dan delete. Untuk list dan delete bisa kita satukan, karena delete biasanya terdapat pada table yang ada pada list, maka dari itu kita perlu membuat 1 folder dengan nama user-management-list.

Lalu kita bisa satukan lagi add dan edit supaya form yang ada pada halaman add bisa dipergunakan kembali di halaman edit. Kita buat juga 1 folder dengan nama user-management-edit.

Last, kita buat juga [feature-name]Page.tsx sebagai wrapper route.

Components

Di dalam folder ini kita akan menyimpan component-component yang kita gunakan di feature.

Core

Berisi wrapper react-query, menggunakan Context API dan Custom Hook, yang bisa digunakan dimanapun, selama component terbungkus dalam wrapper tersebut.

Code Splitting

Enhancement yang perlu dilakukan adalah code spliting, dimana kita akan memisahkan component-component sekecil mungkin, agar component tersebut lebih bisa di maintainable, dan code yang dihasilkan bisa lebih sedikit.

Untuk penunjang code spliting ini, saya menyarankan penggunaan zustand as a state manager. Config yang sangat ringkas dan penggunaannya yang simple menjadi salah satu alasan penggunaannya, dibanding redux yang terkesan need more setup.