Bagaimana Menulis Kode yang Bagus

Selama saya ber­karir seba­gai developer Flash dari taun 2004-an, sudah ribuan baris kode dari puluhan aplikasi Flash yang saya baca. Banyak yang bagus dan gam­pang dipahami, banyak juga yang njelimet & ruwet mirip pang­sit mie. Banyak kasus saya temui waktu saya meng­in­terview pelamar di Trip­pert­labs dimana pelamar yang por­tfolio­nya luar biasa bagus, ter­nyata kalo nulis kode luar biasa jelek ( kebetulan posisi saya adalah Senior Developer jadi saya selalu kebagian giliran per­tama untuk “menyiksa” pelamar ).

Untuk keper­luan inter­nal Trip­pert­labs, saya per­nah mem­publikasikan tulisan ber­judul Coding Guidelines for Flash & Flex Developers. Saya pikir ada baik­nya kalo artikel itu saya tulis lagi di sini.

Mulai dari yang paling dasar yaitu indentasi.

Inden­tasi

Inden­tasi ber­peran pen­ting dalam presen­tasi kode. Ada beberapa style yang digunakan yaitu:

1. K & R Brace Style

   
   function doSomething():void{
       var max:int = 10;
       for(var i:int = 0;i<max;i++){
           ...
       }
   }
   

2. Exten­ded Brace Style

   
   function doSomething():void
   {
   	var max:int = 10;
   	for (var i:int = 0; i < max; i++)
   	{
   		...
   	}
   }
   

3. Inden­ted Brace/Whitesmith Style

   
   function doSomething():void
              {
                   var max:int = 10;
                   for (var i:int = 0; i < max; i++)
                       {
                         ...
                       }
              }
   

4. Other Brace Style

   
   function giveNightmare():void
   {
   
   var max:int = 10;
   for (var i:int = 0; i < max; i++)
       {
           ...
       }
   }
   

Anda bisa pilih (a) atau (b) biar­pun (b) lebih baik karena sesuai dengan kon­vensi umum di kalangan developer flash/flex & digunakan oleh Adobe. © dan (d) sebaik­nya dijauhi kecuali kalo Anda ingin nulis kode yang bisa bikin orang begadang & sakit kepala.

Style manapun yang Anda pilih, (a) atau (b), Anda harus kon­sis­ten. Jangan ganti-ganti gaya. Kalo Anda bekerja dalam satu tim, ikuti kon­vensi yang disepakati ber­sama & semua ang­gota tim harus meng­gunakan style yang sama.

Penamaan

Penamaan yang amburadul biasanya dilakukan oleh koder baru yang masih cupu. Ini bisa dipahami karena pengalaman mereka masih sedikit atau mung­kin nggak punya sama sekali. Dalam buku Code Craft : The Practice of Writing Excellent Code disebutkan aturan-aturan dalam penamaan, dua di antaranya yaitu :

Write your code to be read by humans. Easily. The com­piler will be able to cope.

Favor clarity over brevity.

Variabel & Function

Waktu mem­buat variabel & fun­ction, pilih nama yang desk­rip­tif. Sering saya lihat nama yang nggak jelas mak­sud­nya apa kecuali kita baca com­ment & dalam beberapa kasus, lebih mirip password.

Con­toh­nya gini:

//current index
var i:int;
//text before
var txt0:String;
//final text
var txt:String;

function fib():void{
    ...
}

Kode di atas lebih baik kalo ditulis dengan lebih jelas, misalnya :

//current index
var curIdx:int;
//initial text
var initTxt:String;
//final text
var finalTxt:String;

function fibonacci():void{
    ...
}

Khusus untuk nama variabel yang hanya ter­diri dari satu huruf, Anda boleh meng­gunakan­nya untuk variabel yang ber­sifat lokal. Contohnya :

function multiplyByFive(a:Number):Number{
    return a * 5;
}

Jangan meng­gunakan­nya untuk instance variable. Contoh :

var a:Number = 3;

function multiplyByFive():Number{
    return a * 5;
}

Kapitalisasi

Ada 4 macam skema penamaan variabel, fun­ction, dan class yang umum digunakan yaitu:

1. Camel Case, con­toh : someVar, bookTitle
2. Proper Case, con­toh : ApplicationModel, MainView
3. Upper­case, con­toh : ENTER_FRAME, CLICK
4. Under­score, con­toh : book_title, button_mc

Kon­vensi umum AS3 adalah meng­gunakan (a) untuk nama variabel dan fun­ction, (b) untuk nama class, dan © untuk kon­stanta. (d) banyak digunakan oleh developer yang menulis kode AS2, tapi prak­tek ini lebih banyak disebabkan oleh script editor bodoh bawaan Flash IDE yang nggak bisa menam­pilkan code hin­ting kecuali kalo nama variabel ditam­bah dengan sing­katan tipe data ter­tentu, misal­nya : myClip_mc. Prak­tek semacam ini udah diting­galkan oleh developer AS3, apalagi sekarang sudah banyak code/text editor yang jauh lebih pin­tar daripada editor punya Flash IDE, misal­nya FlashDevelop.

Komen­tar

Komen­tar adalah bagian kode yang sering diabaikan. Banyak developer yang sama sekali nggak nulis komen­tar biar­pun kodenya rumit, ada yang nulis komen­tar ter­lalu pan­jang, ada juga yang nulis komen­tar sedikit tapi di bagian yang sebenar­nya nggak butuh komen­tar. Con­toh komen­tar yang nggak perlu :

//increment i
i++

//assign a to temp
temp = a

//call fibonacci
fibonacci()

Self-documenting Code

Untuk menulis komen­tar yang pas, nggak ter­lalu banyak/panjang, juga nggak ter­lalu sedikit ada baik­nya kalo kita mulai dari menulis kode yang bisa men­jelaskan dirinya sen­diri tanpa kita perlu mem­beri komen­tar. Di buku Code Craft, tek­nik ini disebut self-documenting code, caranya adalah, kem­bali ke penamaan, meng­gunakan nama yang desk­rip­tif. Contoh :

function onClickUploadButton(e:MouseEvent):void{ ... }

function loadVideoXML():void{ ... }

function onEnterFrame(e:Event):void { .. }

function loaderCompleteListener(e:Event):void{...}

function handleFault(e:FaultEvent):void{ ... }

function loadImage(e:Event = null):void { .. }

Baris ter­akhir dari con­toh di atas adalah kasus spesial dimana sebuah fun­ction yang ber­peran seba­gai event han­dler, bisa juga diek­sekusi secara manual jadi kalo kita tam­bahkan “on” atau “Lis­tener” malah mem­bingungkan. Tiga baris di atas­nya adalah skema penamaan event han­dler yang umum dipakai oleh developer Flash/Flex.

Setelah kita menulis self-documenting code selan­jut­nya kita cari fun­ction mana saja yang perlu kita masukkan ke dalam dokumen­tasi dan kita tam­bahkan komen­tar di sana.

Pen­cabangan

Pen­cabangan juga ter­masuk salah satu bagian kode yang sering ber­masalah. Sebenar­nya nggak ada aturan baku ten­tang pen­cabangan, tapi di sini saya sarankan jika Anda meng­gunakan if-else ber­kurung ( nes­ted ) batasi kedalamanya sam­pai mak­simal 3 level. Kalo lebih dari itu, pikirkan cara lain misal­nya meng­ganti if-else dengan switch-case. Saya sen­diri nggak begitu suka if-else yang lebih dari 2 level. Memang kelihatan­nya sepele, tapi kalo kode yang kita buat cukup rumit, kemung­kinan besar kita bakal mumet kalo kita kem­bali utak atik kode lama setelah proyek selesai.

Class Jagoan

Developer yang baru menemukan jalan yang benar setelah ter­sesat di dunia prosedural ( timeline ) cen­derung mem­buat kelas yang kadang disebut “Super Class” ( nggak ada hubungan­nya dengan super class di dalam hirarki OOP ). Super Class di sini adalah class yang bisa melakukan semua tugas, mulai inisialisasi, menangani user input, akses database, upload data, dan lain-lain. Class serba bisa. Di sini si developer sebetul­nya tetap menulis kode secara prosedural biar­pun ben­tuk­nya class. Baunya sih OOP, tapi rasanya tetap prosedural.

Untuk proyek kecil, sah-sah saja, nggak masalah. Tapi untuk proyek yang kom­pleks, prak­tek ini sebaik­nya dihin­dari dan lebih baik kita buat class yang sesuai dengan kon­teks per­masalahan yang dihadapi. Misal­nya, untuk upload data, buat class yang ber­fungsi untuk upload data saja, nggak perlu menangani user input. Kalo upload dilakukan ber­dasar user input, buat dua class, satu untuk meng­han­del user input dan urusan upload, delegasikan ke class lain. Separation of con­cerns is a good thing.

Oke, sekian tulisan saya. Mudah-mudahan bermanfaat.

Referensi

Also in this category …

• » Scat­tered Gallery
• » Trac­king Aplikasi Flash dengan Google Analytics
• » Bekerja dengan FlashDevelop, Flex SDK, dan Flash
• » Auto-scroll Text Area
• » Factory Pattern

One Response to “Bagaimana Menulis Kode yang Bagus”

1. Ahmad Fathi Hadi says:

   May 8, 2009 at 2:24 pm

   thanks ya mas, cukup mem­bantu. saya tunggu yang lebih kom­pleks lagi (^_^). walaupun bisa baca di as3 documen­tation. tapi kalo baca yang bahasa indonesia lebih ber­beda aja. (^_^)