Refactoring & Design Pattern

Fay Anyatasia
Dekowarehouse Project
4 min readMay 13, 2018

Refactor

Kata ini pernah disebutkan dalam TDD Life Cycle.

Yes! Berdasarkan buku Martin Fowler’s “Refactoring: Improving the Design of Existing Code”

Refactoring is a controlled technique for improving the design of an existing code base. Its essence is applying a series of small behavior-preserving transformations, each of which “too small to be worth doing”. However the cumulative effect of each of these transformations is quite significant. By doing them in small steps you reduce the risk of introducing errors. You also avoid having the system broken while you are carrying out the restructuring — which allows you to gradually refactor a system over an extended period of time.

Refactoring merupakan teknik merubah struktur program tanpa mengubah behavior dari program tersebut. Refactoring akan mengimprove sebuah code dari “dirty” menjadi “clean and simple”.

Kenapa di refactor?

Karena kita menginginkan code yang clean. Dengan clean code, kita menjadi lebih mudah dan murah untuk me-maintain code kita. Begitu juga dengan orang lain karena clean code mudah dipahami, memiliki baris yang tidak terlalu banyak, dan tidak memiliki duplikasi.

Refactoring mencakup mengubah struktur method, mengganti nama kelas, mengubah data struktur, mengubah algoritma, dan sebagainya.

Referensi lengkap tentang refactoring bisa diakses disini.

Implementasi pada Kelompok

Pada kelompok kami, kami beberapa kali melakukan refactor seperti menamai ulang variabel atau kelas agar sesuai dengan kesepakatan penamaan yang telah disepakati diawal.

Kami juga pernah me- reconstruct kelas sehingga menjadi beberapa komponen. Refactor yang baru-baru ini kami lakukan yaitu mengubah pengambilan data dari json dummy menjadi menggunakan search service yaitu algolia.

Awalnya seperti ini

meload database dummy
menampilkan variabel description

Sekarang menjadi seperti ini

Mengambil objek dari list of hit berdasarkan id
Memanggil komponen Content

Design Pattern

Design pattern merupakan sebuah solusi yang dapat digunakan secara berulang untuk suatu permasalahan yang umum. Dengan kata lain, design pattern merupakan blueprint yang dapat di-customized untuk memecahkan suatu masalah pada code.

Ada beberapa design pattern yaitu :

Creational Design Pattern

Creational pattern ini fokus pada bagaimana meng instansiasi objek atau grup dari berbagai objek. Beberapa design pattern yaitu :

  1. Factory Method: membuat instance dari beberapa class turunan
  2. Simpleton : class yang hanya memiliki single instance
  3. Builder: membuat instansiasi objek yang sama dengan “rasa” yang berbeda-beda.

Perbedaan utama builder dan factory pattern yaitu; factory pattern digunakan ketika pembuatan pembuatan objek merupakan one-step process, sedangkan builder pattern , pembuatan objek berupa multi-step process.

Structural Design Pattern

Structural pattern fokus kepada komposisi objek. Beberapa design pattern yaitu :

  1. Adapter: membungkus sebuah objek yang tidak kompatibel dengan adapter sehingga menjadi kompatibel dengan objek lain.
  2. Decorator: menambahkan responsibilities secara dinamis pada suatu object
  3. Facade: sebuah class yang merepresentasikan keseluruhan subsystem

Behavioral Design Pattern

Behavioral pattern fokus dengan pembagian tanggung jawab antar objek. Atau dengan kata lain, bagaimana antar objek berkomunikasi. Beberapa design pattern yaitu:

  1. Chain of Responsibility: sebuah cara untuk menyampaikan request secara berantai.
  2. Command: enkapsulasi command request sebagai suatu object

Github cantik dengan penjelasan yang jelas serta contoh dari berbagai design pattern bisa di cek disini.

Implementasi pada kelompok

Karena kami menggunakan ReactJS, kami menerapkan salah satu design pattern yaitu Decorator Design Pattern yaitu suatu komponen dibungkus dengan komponen lain dengan menambahkan props/fungsi tertentu.

Contohnya seperti berikut pada halaman detail.js

detail.js

Component slider, description, downloadSatuanButton, compareButton dan specification semuanya dibungkus dan ditambahkan parameter id sehingga mampu menjalankan fungsi yang diinginkan yaitu menampilkan objek terkait berdasarkan id nya.

Terima kasih. Sampai jumpa lagi! :)

Reference :

--

--