Penerapan Clean Architecture pada Frontend Web Modern

Mengapa Frontend Butuh Arsitektur Bersih?

Seiring berkembangnya fitur aplikasi web, file komponen React sering kali berubah menjadi "Monolith" yang mencampurkan logika panggilan API, pemrosesan data, pengolahan state, dan struktur tampilan JSX sekaligus. Hal ini membuat pengujian unit (unit testing) menjadi sangat sulit dan meningkatkan risiko bug saat terjadi perubahan API backend.

---

Tiga Lapisan Utama Clean Architecture

1. Domain Layer (Entities & Use Cases): Berisi logika bisnis murni tanpa ketergantungan pada React maupun kerangka kerja UI.
2. Data Layer (Repositories & Data Sources): Bertanggung jawab mengambil data dari REST API, GraphQL, atau Firebase Firestore.
3. Presentation Layer (UI Components & Custom Hooks): Komponen visual yang menampilkan data dan merespons interaksi pengguna.

---

Contoh Struktur Berkas

src/
├── domain/
│   ├── models/User.ts
│   └── usecases/CalculateDiscount.ts
├── data/
│   ├── repositories/UserRepositoryImpl.ts
│   └── datasources/UserApi.ts
└── presentation/
    ├── hooks/useUserProfile.ts
    └── components/UserProfileCard.tsx

---

Kesimpulan

Menerapkan Clean Architecture pada frontend membuat logika bisnis aplikasi Anda independen dari framework UI maupun perubahan pustaka pihak ketiga. Kode menjadi sangat mudah di-test menggunakan Jest/Vitest dan siap dikembangkan dalam skala besar.