Clean code merupakan suatu metode atau cara dalam menuliskan code. Tidak mungkin jika para developer tidak pernah bingung atau kesulitan dalam memahami code yang orang lain buat atau susun. Dalam keadaan tersebut, developer juga pasti membutuhkan waktu untuk memahami code tersebut bahkan jika developer sudah memahami betul mengenai bahasa pemrograman, bahkan sebagian besar waktu yang para developer gunakan tidak lain untuk memahami betul mengenai code yang sedang dipelajari. Dari penggambaran tersebut, urgensi untuk menggunakan clean code sangat dibutuhkan.
Clean code dapat didefinisikan sebagai code yang memiliki struktur yang tertata, format dan penulisan yang rapi sehingga dapat dibaca serta dipahami dengan mudah. Sebuah susuan code akan bisa disebut sebagai clean code jika memiliki susunan struktur yang mudah dicerna, ringkas, berdasar, to the point, mengikuti pola dan best practices yang ada, dan menghindari complex nesting, big code blocks, dan unintuitive names.
Mengapa Clean Code dibutuhkan bagi Front-end Developer?
Dalam suatu proyek atau pekerjaan, code yang dibuat oleh developer pastinya akan dibaca kembali, baik itu oleh supervisor, klien, rekan kerja, maupun diri sendiri. Hal ini menjadikan clean code sebagai peran yang penting dalam menulis code. Menulis bahasa pemrograman yang berantakan dapat menurunkan produktivitas, hal ini tentunya berpengaruh pada bagaimana kita menata pekerjaan kedepannya. Penulisan code yang berantakan dapat benar-benar menghabiskan waktu yang ada, sehingga nantinya dapat memberikan dampak negatif, baik dari segi target maupun proses pengerjaannya. Dalam perspektif lain, code yang rapi dapat membantu developer melakukan debugging lebih efektif dan cepat.
Bagaimana penerapannya dalam Bahasa Pemrograman?
Secara umum, developer dapat menggunakan Linter berupa ESLint atau SolarLint untuk melihat dan memvalidasi code yang ditulis. Selain menggunakan Linter, developer juga dapat menerapkan suatu prinsip yang disebut DRY (Don’t Repeat Yourself), artinya developer tidak perlu menggunakan pengulangan yang terlalu berlebihan sehingga nantinya code tersusun rapi.
1. HTML & CSS
HTML sangat umum digunakan, terutama di kalangan front-end developer. Berikut merupakan list yang dapat membantu developer dalam meningkatkan kemampuan coding:
- Gunakan banyak variasi semantic elements
Penggunaan elemen-elemen semantik yang monoton dan berantakan akan menyulitkan developer dalam memahami code yang ditulis. - Gunakan spesifikasi classes jika dibutuhkan
Spesifikasi class sangat dibutuhkan, hal ini berguna agar coding dan output hasil terlihat lebih rapi dan tidak mengganggu elemen lain. - Gunakan class dan id dengan baik dan tepat
Class umumnya digunakan untuk menentukan style pada suatu elemen dan id adalah sebagai penanda unik dari sebuah elemen. Class bisa digunakan berkali-kali dan id hanya digunakan sekali. - Tuliskan atribut dengan benar
Developer dapat menggunakan penulisan atribut sesuai dengan BEM CSS, tidak lupa juga untuk mengidentifikasi gaya penulisan programming yang sesuai dengan bahasa yang digunakan- apakah menggunakan camelCase, PascalCase, snake_case, atau kebab-case? - Gunakan inline CSS hanya jika dibutuhkan
Menambahkan CSS rules dalam setiap elemen hanya akan memakan waktu para developer dalam pengerjaannya dan malah membuat strukturnya terlihat berantakan.
2. Javascript
Berikut aspek-aspek yang perlu diperhatikan agar penulisan bahasa javascript terlihat rapi, tertata, dan terstruktur:
- Naming
Gunakan nama yang dapat mendefinisikan sesuatu dan memiliki arti yang lugas sehingga dapat terlihat spesifik, singkat, padat, dan jelas. Dalam Naming, gunakan pertanyaan yes/no untuk booleans, sebagai contoh “isValid”. Tentunya, hindari nama yang rancu, dan tetap konsisten pada penamaan yang telah diberikan. - Comments
Hindari penggunaan comments yang berantakan, berulang, menyesatkan, atau bahkan mengomentari code yang sudah tidak dipakai. Penggunaan comments yang baik diantaranya adalah legal comments seperti hak cipta, warning comments yang mana memberikan warning yang jelas, serta helpful explanations untuk memberikan penjelasan terkait apa yang code ini lakukan contohnya seperti penggunaan Regex. - Formatting
Dalam formatting, perhatikan vertical density dan vertical distance dalam penulisan code. Atur konsep yang saling berhubungan tetap dekat dan berilah jarak pada konsep yang tidak berhubungan satu sama lain secara langsung. Mengapa kita tidak menyarankan untuk menggunakan horizontal formatting? horizontal formatting hanya akan membuat coding yang ditulis terlihat panjang dan berantakan, alangkah baiknya jika coding yang dibuat dapat dipisah sedemikian rupa agar dapat terbaca dan dipahami dengan cepat dan jelas. Indentation berperan penting dalam formatting. - Functions & Methods
Dalam fungsi, batasi penggunaan parameter yang fungsi terima, lebih sedikit lebih baik. Pertimbangkanlah untuk menggunakan object, dictionary, atau array untuk mengelompokkan banyak parameter menjadi satu parameter saja. Pada dasarnya, functions harus kecil dan melakukan satu tugas saja. Terdapat istilah yang dinamakan side effects, side effects merupakan operasi yang dapat mengubah suatu kondisi (data, status sistem, dan lain-lain) dalam aplikasi. Hindarilah kemungkinan side effects yang dapat terjadi nantinya.
Rule of Thumbs juga dapat berlaku dalam coding, ekstraksi code yang memiliki fungsionalitas yang sama atau berhubungan dalam tujuannya. Lakukan ekstraksi untuk code yang membutuhkan interpretasi lebih. Terdapat tiga keadaan saat ekstraksi code tidak masuk akal, diantaranya ialah saat hanya me-rename operasi, saat melakukan scroll down yang panjang, dan sulit untuk memberi nama yang masuk akal untuk fungsi yang diekstrak. - Control Structure & Errors
Dalam kontrol struktur, lakukan positive checks untuk dalam melakukan pengecekkan. Hindari deep nesting dengan mempertimbangkan untuk menggunakan statement “Guard” dalam penulisan code. Cara lain agar terhindar dari deep nesting adalah lakukan ekstraksi ke dalam beberapa fungsi. Dalam beberapa kasus bisa juga menggunakan polymorphism dan factory functions. Jika terdapat suatu error, maka Throw error tersebut sebagai ‘real’ error dengan memanfaatkan error handling.
Pada dasarnya, belajar menuliskan clean code butuh kerja keras. Developer, terutama yang bekerja di digital agency dapat terus melakukan prakteknya dan belajar dari evaluasi. Kegagalan atau kesalahan pada saat prakteknya pasti terjadi, gunakanlah pikiran dan waktu untuk mempelajari mengenai kekurangan tersebut. Penulisan clean code merupakan sebuah mindset yang harus diprioritaskan saat coding, pada akhirnya penulisan clean code akan menjadi kebiasaan dan akan diterapkan seterusnya.
Sebagai digital agency Indonesia dan digital agency Jakarta, PT. Suitmedia Kreasi Indonesia dapat membantu Anda dalam mengembangkan suatu website atau aplikasi dengan bahasa pemrograman, seperti clean code. Selain itu, Suitmedia mendukung pengembangan bisnis melalui strategi, pengembangan produk, dan komunikasi kreatif.
Keep your code healthy and clean. Good luck in your coding endeavors.
Penulis: Rivaldo Gabrielleo (Frontend Developer)
Editor: Jessica Patricia (Content Marketing)
