Clean Architecture JavaScript Frontend: Struktur Folder, Layer, dan Reusable Component

Dalam pengembangan frontend modern, menjaga kode tetap rapi, mudah dipelihara, dan scalable menjadi tantangan besar seiring bertambahnya kompleksitas aplikasi. Di sinilah Clean Architecture JavaScript berperan penting — membantu developer membangun struktur proyek yang solid, modular, dan efisien untuk jangka panjang.

Banyak developer fokus pada tampilan UI, namun lupa pada arsitektur di baliknya. Padahal, struktur folder yang jelas, pemisahan tanggung jawab antar layer, dan penggunaan reusable component bisa menjadi faktor utama yang menentukan keberhasilan proyek. Dengan menerapkan prinsip Clean Architecture, tim dapat berkolaborasi lebih mudah dan menghindari “spaghetti code” yang sulit dikelola.

Konsep Dasar Clean Architecture di Frontend

Clean Architecture awalnya diperkenalkan oleh Robert C. Martin (Uncle Bob) untuk backend, namun konsepnya sangat relevan juga di frontend. Tujuannya adalah memisahkan logika bisnis dari detail implementasi seperti UI dan API. Dengan begitu, kode menjadi fleksibel terhadap perubahan.

Struktur umum Clean Architecture JavaScript dapat dibagi menjadi beberapa lapisan:

1. Presentation Layer (UI) – tempat komponen tampilan berinteraksi dengan user (biasanya React, Vue, atau Vanilla JS).

2. Domain Layer (Business Logic) – berisi aturan bisnis, fungsi murni, dan logika aplikasi.

3. Data Layer (Infrastructure) – menangani komunikasi data seperti API call, LocalStorage, atau IndexedDB.

4. Shared/Utilities – berisi fungsi-fungsi utilitas umum yang bisa digunakan di seluruh aplikasi.

Struktur Folder yang Direkomendasikan

Berikut contoh struktur proyek yang mengikuti pola clean architecture frontend:

src/
 ├── presentation/
 │   ├── components/
 │   ├── pages/
 │   └── hooks/
 ├── domain/
 │   ├── models/
 │   ├── usecases/
 │   └── services/
 ├── data/
 │   ├── repositories/
 │   └── api/
 ├── shared/
 │   ├── utils/
 │   └── constants/
 └── main.js

Struktur ini membantu menjaga keterpisahan tanggung jawab antar layer dan memudahkan refactor tanpa memengaruhi seluruh aplikasi.

Reusable Component: Kunci Efisiensi UI

Reusable component adalah pondasi dari arsitektur frontend yang efisien. Setiap elemen UI sebaiknya dirancang agar bisa digunakan kembali dengan sedikit konfigurasi. Misalnya, tombol (<Button />), input form (<InputField />), atau card (<Card />) bisa dipakai di berbagai halaman tanpa perlu menulis ulang.

Tips membuat reusable component:

• Gunakan props untuk parameterisasi.

• Hindari state yang terlalu spesifik.

• Gunakan composition daripada inheritance.

• Dokumentasikan dengan baik setiap properti dan event.

Layer Abstraction: Menghindari Ketergantungan Langsung

Salah satu prinsip utama clean architecture adalah dependency rule — lapisan luar boleh bergantung pada lapisan dalam, tapi tidak sebaliknya. Misalnya, UI boleh memanggil fungsi dari domain layer, namun domain tidak boleh tahu tentang UI.

Contoh implementasi dengan React:

// domain/usecases/getUserList.js
export const getUserList = async (userRepository) => {
  return await userRepository.fetchUsers();
};

// data/repositories/userRepository.js
export const userRepository = {
  async fetchUsers() {
    const res = await fetch('/api/users');
    return await res.json();
  }
};

// presentation/pages/UserPage.jsx
import { getUserList } from '../../domain/usecases/getUserList.js';
import { userRepository } from '../../data/repositories/userRepository.js';

export default async function UserPage() {
  const users = await getUserList(userRepository);
  console.log(users);
}

Dengan pola seperti ini, kode menjadi terpisah, mudah diuji, dan tidak bergantung langsung pada implementasi API.

Manfaat Menerapkan Clean Architecture JavaScript

✅ Skalabilitas Tinggi — mudah menambah fitur tanpa mengubah struktur utama.

✅ Kemudahan Testing — setiap layer bisa diuji secara independen.

✅ Konsistensi Tim — semua developer mengikuti pola struktur yang sama.

✅ Maintainability — bug mudah dilacak dan perbaikan tidak menimbulkan efek samping.

Kesimpulan

Menerapkan Clean Architecture JavaScript bukan hanya tentang struktur folder yang indah, tetapi tentang cara berpikir sistematis dalam membangun aplikasi. Dengan memisahkan tanggung jawab antar layer, menggunakan reusable component, dan menjaga modularitas, developer dapat menciptakan proyek frontend yang kuat, efisien, dan mudah dikembangkan di masa depan.

Jika kamu ingin membangun aplikasi yang tahan lama dan scalable, mulai sekarang pikirkan arsitektur sejak awal — bukan hanya tampilan antarmuka, tetapi juga fondasi yang menopangnya.