Clean Code — React.js
Untuk para programmer pastinya sudah pernah mendengar tentang istilah clean code. Clean code itu apa sih? Apakah sesuai artinya, yaitu kode yang bersih? Ataukah lebih dalam lagi daripada itu? Pada artikel kali ini, saya akan menjelaskan mengenai clean code serta penerapannya di aplikasi React, yaitu sebuah library dalam JavaScript.
Apa itu Clean Code?
Istilah clean code bisa diartikan seperti terjemahan bahasa inggrisnya, yaitu kode yang “bersih”. Apa maksud dari kode yang “bersih”? Maksudnya adalah kumpulan kode program dalam suatu software yang mudah dibaca dan dimengerti developer-nya dan orang lain. Clean code juga berarti kode program yang mudah ditelusuri dan di-maintenance oleh developer jika pada nantinya terdapat perubahan pada program.
Prinsip pada Clean Code
Terdapat prinsip-prinsip yang dapat membantu kita sebagai programmer untuk menulis clean code. Prinsip-prinsip tersebut adalah SOLID Principles. Prinsip pada SOLID membantu kita dalam mengatur dan menempatkan method-method serta fungsi-fungsi pada program dengan baik. SOLID juga memberitahu bagaimana tiap class itu saling berhubungan satu sama lain dan data strukturnya.
Prinsip-prinsip pada SOLID adalah sebagai berikut.
- S — Single Responsibility principle: Prinsip Single Responsibility artinya adalah tiap class atau modul hanya memiliki satu alasan atau tujuan untuk berubah. Maksudnya adalah tiap class atau modul hanya memiliki satu kegunaan.
- O — Open-Closed principle: Prinsip Open Closed maksudnya adalah struktur software seharusnya terbuka untuk penambahan fitur/fungsionalitas dan tertutup untuk modifikasi. Jika ingin menambah fitur tertentu pada program, maka harus menambah kode untuk fungsionalitas tersebut, tidak perlu memodifikasi fitur yang sudah ada.
- L — Liskov Substitution principle: Prinsip Liskov Subtitution artinya adalah suatu class seharusnya dapat digantikan oleh subclassnya untuk melakukan fungsionalitas tertentu. Misalnya terdapat objek class Mobil untuk fungsionalitas membunyikan klakson. Objek tersebut dapat digantikan dengan objek class Toyota apabila class Toyota adalah subclass dari Mobil.
- I — Interface Segregation principle: Prinsip Interface Segregation maksudnya adalah interface user yang banyak itu lebih baik dibandingkan hanya satu interface umum. Misalnya jika pada suatu sistem aplikasi sekolah terdapat beberapa role seperti siswa, sekolah, dan admin, maka terdapat class untuk tiap role untuk mengimplementasikan fungsionalitasnya.
- D — Dependency Inversion principle: Prinsip Dependency Inversion maksudnya adalah pembuatan modul tertentu lebih baik bergantung ke modul abstrak, bukan ke modul konkret. Struktur ini bersifat top-down, artinya dari yang umum menuju ke spesifik.
Implementasi Clean Code pada React
Terdapat beberapa cara untuk menerapkan clean code pada kode program. Misalnya dengan menamakan variabel yang jelas, membuat method/fungsi yang sesuai, dan lain-lain. Berikut merupakan contoh implementasi clean code pada aplikasi React, berdasarkan proyek yang sedang saya lakukan.
- Meaningful Names: Penamaan variabel, fungsi, atau kelas sebaiknya jelas dan mudah dimengerti. Tujuannya adalah agar dapat memudahkan apabila melakukan testing atau debugging program sehingga dapat diketahui kegunaan dari variabel, fungsi, atau kelas tersebut dari penamaannya.
Pada gambar kode di atas, penamaan fungsi openModal dan closeModal jelas dan mudah dimengerti. Dari nama fungsi tersebut, sudah bisa diketahui bahwa kegunaan fungsi tersebut adalah untuk membuka dan menutup modal.
- Good Functions: Setiap fungsi sebaiknya hanya melakukan satu fungsionalitas dengan efektif, tidak berbagai hal.
Pada gambar kode di atas, fungsi handleUploadImage hanya melakukan satu hal, yaitu untuk mengolah input gambar dari user.
- Good Comments: Sebaiknya menulis comment pada bagian-bagian kode yang perlu penjelasan tambahan. Misalnya adalah comment tentang copyright kode, apabila kode tersebut diambil dari sumber tertentu.
- Tested Code: Kode yang baik adalah kode yang sudah dilakukan testing. Tujuannya adalah untuk meminimalisir kemungkinan terjadi error pada program.
Pada gambar kode di atas, terdapat kode testing untuk memastikan bahwa apabila user belum menginput gambar, maka preview yang ditunjukkan adalah default preview.
Sekian penjelasan saya mengenai clean code dan penerapannya pada aplikasi React. Semoga dapat membantu pembaca dalam mengerti pentingnya clean code pada program. Terima kasih!
Referensi:
