DESIGN-PATTERNS SOFTWARE-ARCHITECTURE CLEAN-CODE MAINTAINABILITY TESTABILITY BACKEND-DEVELOPMENT FRONTEND-DEVELOPMENT SOFTWARE-ENGINEERING DECOUPLING CODE-ORGANIZATION

Command Bus dan Mediator Pattern: Mengurangi Ketergantungan Kode untuk Aplikasi Web yang Lebih Bersih dan Fleksibel

⏱️ 2 menit baca
👨‍💻

Command Bus dan Mediator Pattern: Mengurangi Ketergantungan Kode untuk Aplikasi Web yang Lebih Bersih dan Fleksibel

1. Pendahuluan

Pernahkah Anda merasa kode aplikasi web Anda semakin sulit diubah? Menambahkan fitur baru terasa seperti menanam ranjau darat yang berpotensi meledak di bagian lain kode? Atau, menguji satu bagian logika membutuhkan setup yang rumit karena harus memanggil banyak dependensi lainnya? Jika ya, kemungkinan besar Anda sedang menghadapi masalah ketergantungan kode (tight coupling).

Tight coupling adalah musuh utama dari kode yang bersih, fleksibel, dan mudah di-maintain. Dalam arsitektur aplikasi web modern, baik di sisi frontend dengan komponen-komponen yang saling berinteraksi, maupun di sisi backend dengan microservices atau modul logika bisnis yang kompleks, ketergantungan yang tinggi bisa menjadi mimpi buruk.

Di artikel ini, kita akan menyelami dua pola desain yang powerful untuk mengatasi masalah ini: Mediator Pattern dan Command Bus Pattern. Kedua pola ini berfokus pada decoupling atau pengurangan ketergantungan antar bagian kode, sehingga menghasilkan aplikasi yang lebih testable, maintainable, dan skalabel. Mari kita mulai perjalanan kita untuk membangun aplikasi web yang lebih cerdas dan elegan!

2. Memahami Ketergantungan Kode (Tight Coupling)

Sebelum kita membahas solusinya, mari kita pahami dulu apa itu tight coupling dan mengapa itu menjadi masalah.

📌 Apa itu Tight Coupling? Tight coupling terjadi ketika satu modul, kelas, atau komponen sangat bergantung pada implementasi detail dari modul lain. Mereka “tahu terlalu banyak” tentang internal satu sama lain.

Contoh di Frontend: Bayangkan Anda memiliki komponen UserProfile dan komponen EditProfileButton. Ketika EditProfileButton diklik, ia langsung memanggil method openEditModal() yang ada di UserProfile.

// user-profile.tsx
class UserProfile extends React.Component {
  openEditModal() { /* ... logika membuka modal ... */ }
  // ...
}

// edit-profile-button