Clean, Clean, Clean The Code
Halo semua! Pada blog kali ini, saya ingin membahas mengenai salah satu topik yang diimplementasikan di PPL kali ini, yaitu Clean Code.
Apa itu clean code?
Clean code merupakan suatu disiplin yang diterapkan oleh programmer untuk menjaga kualitas code yang dibuat, sehingga code tersebut dapat mudah dibaca (seperti membaca cerita) dan dimengerti oleh programmer lainnya. Clean code menjadi salah satu hal utama yang kami perlu perhatikan dan terapkan di dalam PPL ini, karena selain membuat code kami menjadi lebih rapi, clean code juga membuat pemahaman kami terhadap code yang dibuat oleh rekan satu kelompok menjadi lebih mendalam dan lebih cepat. Pada dasarnya, terdapat beberapa kriteria yang perlu diperhatikan dalam menerapkan clean code, seperti meaningful names, functions, comments, dan unit tests.
Bagaimana penerapan clean code dalam proyek kami?
Setelah mengetahui apa itu clean code, tentunya muncul pertanyaan, bagaimana kami menerapkan clean code dalam proyek kami. Nah, pada bagian ini, saya akan menjelaskan bagaimana penerapan clean code, khususnya di bagian front-end.
Penamaan React component class dan atribut HTML yang seragam dan bermakna
Kami menerapkan penamaan yang seragam untuk setiap grup React component class yang kami buat. Pola penamaan yang kami lakukan adalah mengawalinya dengan prefix nama component yang akan dibuat lalu diikuti dengan identifier fungsionalitas dari React component tersebut. Misalnya, kami membuat sebuah component kotak laporan atau report box untuk fungsionalitas laporan yang belum diverifikasi, maka kami akan menamai class-nya dengan nama “ReportBoxBelumVerif”. Begitu pula untuk fungsionalitas laporan yang diarsipkan, maka kami akan menamai class-nya dengan nama “ReportBoxArsip”.
Selain penamaan yang seragam pada React component class, kami juga menerapkan penamaan yang bermakna pada HTML id dan className attribute.
Kami berusaha menghindari penamaan className yang terlalu general, seperti “body” pada contoh di atas. “body” sendiri dapat digunakan dalam beberapa kasus, misalnya saja “body” untuk menyatakan suatu bagian isi dari HTML yang dibuat atau “body” untuk menyatakan isi dari komponen Report Box yang kami buat. Oleh karena itu, kami membuat penamaan yang lebih spesifik dibandingkan sebelumnya, seperti pada contoh di bawah ini, di mana kami mengganti className “body” menjadi “report-body” dan beberapa perubahan lainnya.
Hampir serupa dengan penamaan pada React component class, kami menerapkan pola penamaan yang seragam agar mudah dimengerti dan tidak membingungkan tim back-end ketika mengambil data yang diinginkan.
Don’t Repeat Yourself
Dengan adanya fitur pembuatan komponen pada React, kami dapat meminimalisir terjadinya duplikasi pada code kami, terutama dalam pembuatan page HTML-nya.
Gambar di atas merupakan contoh code yang sama dan diimplementasikan pada dua file yang berbeda. Contoh tersebut melanggar prinsip Don’t Repeat Yourself. Karena React menyediakan fitur untuk membuat component, maka kami membuatnya menjadi component terpisah, lalu memanggil component tersebut di masing-masing file. Kami juga melakukannya untuk component yang lain sehingga implementasi keduanya menjadi seperti gambar di bawah ini:
Unit Test
Untuk menjamin bahwa code yang kami buat dapat bekerja, kami membuat unit test untuk front-end yang kami buat. Kami mengujinya dengan melakukan test apakah komponen tersebut dapat di-render dan juga apakah hasil render tersebut sudah sesuai dengan snapshot yang kami buat. Contoh implementasi unit test tersebut dapat dilihat pada gambar di bawah ini. Pemanfaatan unit test ini untuk memastikan sekali lagi bahwa komponen yang kami buat sudah sesuai dengan keinginan.
Manfaat yang diperoleh
Implementasi clean code dalam PPL ini membawa beberapa dampak positif, seperti code yang readable and understandable, mudah di-maintain, dan pekerjaan menjadi lebih efisien.
Sekian sharing dari saya, semoga bermanfaat!
