Yuck, that code smells!
Artikel ini merupakan bagian dari pemenuhan tugas Proyek Perangkat Lunak (PPL).
Setelah mengambil mata kuliah pemrograman lanjut tahun lalu, kami dituntut untuk mampu menghindari membuat barisan-barisan kode yang terhindar dari code smells. Kode yang ditulis harus mengikuti standar clean code yang berlaku secara universal. Pada proyek PPL ini, digunakan code quality checker untuk mendeteksi code smells dalam hasil kerja kami.
Tentu saja, saya pun masih beberapa kali menulis code smells dan baru sadar ketika deployment di-block SonarCloud karena banyaknya code smells. Memang, ternyata kadang kita masih belum sadar bahwa kode yang kita tulis kurang baik. Masalah pada proyek kami yang beberapa kali ditangkap oleh SonarCloud salah satunya ialah duplicated code.
Is it really beneficial?
Kode mudah dipahami anggota tim lain
Mengerjakan proyek PPL secara tim, tidak jarang akan ada fitur yang dependen yang dikerjakan lebih dari satu orang. Pada kasus itu, anggota tim terkadang perlu memahami kode yang ditulis anggota lain yang fiturnya dependen tersebut, vice versa. Jika kita dibuat bingung oleh kode yang ditulis, tentunya akan memakan waktu lebih untuk bertanya ke anggota terkait.
Bug dapat lebih mudah ditemukan
Kode yang tidak berbelit-belit dan alurnya jelas tentu dapat di-tracing dengan lebih mudah. Jika semua kode yang ditulis dapat dipahami dengan mudah, tentunya bug akan lebih mudah juga ditemukan. Sebaliknya, jika kode terlalu berbelit-belit, memahami kodenya saja sudah sulit, apalagi untuk mencari bug-nya bukan?
Aplikasi mudah dikembangkan menjadi lebih besar
Aplikasi yang besar biasanya menggunakan beberapa komponen-komponennya berulang-ulang. Jika komponen tersebut telah dibuat agar reusable, maka pengembangan aplikasi tidak akan sulit. Namun jika komponen tersebut tidak dapat digunakan kembali, maka perlu membuat ulang komponen itu hanya untuk task tambahan, dan menjadikan aplikasi menjadi bloated.
Lebih mudah untuk di-test
Kode yang dipecah menjadi perkomponen dengan baik akan mempermudah testing yang dapat fokus ke setiap komponennya tersebut. Jika menerapkan TDD dengan baik, seharusnya kode yang dihasilkan cenderung lebih baik karena satu komponen fokus pada satu hal.
JavaScript smells
Clean code dapat diraih dari hal-hal kecil yang berdampak besar, seperti indentasi dan spacing. Hm… dilihat dari hal itu, sepertinya membuat kode dalam bahasa pemrograman python cenderung lebih mudah, mengingat python cukup strict dengan penggunaan indentasi, yang membuat kita mau tidak mau harus manut dengan aturannya agar kode dapat berjalan.
Tentu saja indentasi bukan hanya satu-satunya, namun tidak bisa disanggah bahwa penggunaan indentasi yang baik dapat membuat kode terlihat lebih rapi dan mudah dibaca, bukan? Lalu, bagaimana dengan JavaScript? Yuck, menurut saya JavaScript merupakan bahasa pemrograman yang kotor! Sulit sekali membuat kode JavaScript yang indah dan enak dipandang.
Clean code with JavaScript
Beberapa kali bekerja menggunakan JavaScript, saya masih belum pandai betul dalam menghindari code smells. Untungnya, di proyek PPL ini diterapkan saling review antar anggota kelompok. Jadi kami dapat saling mendeteksi code smells yang tidak kami deteksi sendiri. Kami pun banyak belajar dari kritik antar anggota untuk menghindari code smells kedepannya. Beberapa hal yang kami terapkan sejauh ini
Kebetulan di PPL ini, kami menggunakan NextJS yang merupakan framework React untuk membuat interface proyek kami. Beberapa hal yang saya temukan dan coba kami implementasikan pada proyek ini (khususnya JavaScript) di antaranya sebagai berikut.
Gunakan looping untuk menghindari kode yang duplikat.
Saya seringkali tidak sadar telah menulis kode yang duplikat terutama pada bagian test karena testing dapat dibilang cukup iteratif untuk setiap komponen yang ingin di-test. Untuk mengurangi hal ini, dapat dilakukan iterasi (dengan forloop atau sejenisnya) untuk bagian kode yang mirip.
Selain iterasi, khusus untuk testing, dapat juga memanfaatkan beforeEach dan afterEachuntuk mengurangi baris kode yang sama pada setiap fungsinya. Berikut contoh penggunaan beforeEach dan afterEach pada testing proyek kelompok kami.
Gunakan penamaan yang deskriptif
Penamaan variabel, fungsi, class, ataupun komponen yang deskriptif akan membantu kita ketika membutuhkannya kembali di lain waktu nanti. Dengan penamaan yang deskriptif, kita tidak perlu berulang-ulang membaca kode hanya untuk tau apa yang dilakukan kode tersebut. Sebisa mungkin, penamaan yang digunakan sudah mencakup apa yang dilakukan kodenya.
Selain itu, penting mengikuti ketentuan penggunaan kapital pada setiap penamaannya agar konsisten sepanjang pengerjaan proyek. Untuk JavaScript (khususnya frontend), umunya menggunakan ketentuan sebagai berikut:
- camelCase untuk variabel dan functions
- PascalCase untuk class
- PascalCase untuk components (dan files-nya)
- kebab-case untuk routing
Memecah class dan function untuk fokus ke satu hal
Baiknya, class, function, maupun components hanya bagus ke satu hal tertentu supaya mudah digunakan kembali berkali-kali jika dibutuhkan. Sehingga suatu komponen tersebut tidak akan dibuat baru hanya untuk menyesuaikan kebutuhan baru yang sebetulnya tidak jauh berbeda dengan komponen lamanya. Untuk mencapai hal ini, biasanya dibutuhkan refactor beberapa kali sebelum komponen tersebut benar-benar reusable, karena melihat kebutuhan aplikasi terlebih dahulu.
Hapus baris yang tidak penting
Dalam development, tidak jarang kita hanya meng-comment potongan kode yang tidak jadi kita gunakan, dan lupa menghapusnya kemudian. Hal ini sebetulnya sangat mengganggu dan menjadikan kode terlihat tidak rapi. Jika yakin kode yang di-comment tersebut tidak akan terpakai lagi, dapat dihapus agar tidak mengganggu pengerjaan task selanjutnya.
Rajin-rajin refactor
Tentu tidak jarang kode yang telah kita tulis ternyata kurang efisien jika dihubungkan dengan task selanjut-selanjutnya. Tanda-tanda kode kita perlu di-reafctor salah satunya ialah banyak kode yang saling dependen satu sama lain.
Any tools that can help us?
Dalam pengerjaan proyek PPL ini, kami memanfaatkan beberapa tools yang dapat membantu menhindari dan mengurangi code smells pada program yang kami tulis.
Prettier for Visual Studio Code
Prettier sangat membantu untuk menjaga indentasi kode yang kami tulis sehingga kode tetap konsisten. Selain itu juga mempertahankan readibility kode sehingga akan cukup membantu jika perlu dilakukan proses debugging.
SonarLint for Visual Studio Code
SonarLint membantu kita menemukan code smells ketika kita mengerjakan program. SonarLint akan memindai files yang sedang kita buka, dan mengeluarkan warning apabila terdapat code smells. Dengan begitu, code smells terdeteksi dan dapat segera diperbaiki sebelum kode di-commit dan code smells terlanjur menumpuk.
SonarCloud
Jika SonarLint memindai kode per-file di local ketika proses pengerjaan, SonarCloud akan memindai proyek secara keseluruhan pada deployment. Jadi, jika ada code smells yang lolos dan terlanjur di-push, SonarCloud akan membantu kita menemukannya.
Conclusions
Dari beberapa hal di atas, masih ada banyak kemungkinan code smells yang dapat dihadapi. Karena saat ini progress aplikasi kami belum terlalu banyak, code smells yang ditemukan pun masih yang umum dan cenderung mudah ditangani. Namun tentunya review antar anggota tidak akan dilonggarkan untuk mendeteksi code smells. Kami pun banyak belajar untuk menulis kode yang lebih efektif dan efisien dengan memanfaatkan tools seperti SonarCloud.
Sources:
