Playing with Refactoring & Design Pattern
Setelah sebelumnya menjelaskan tentang software environment, software architecture, dan testing, ada satu hal penting yang belum dijelaskan terutama berkaitan dengan testing. Apakah itu? Hal itu adalah refactoring.
Setelah melakukan testing, tentunya dilakukan refactoring terhadap kode. Sebelum membahas lebih lanjut tentang refactoring, apakah refactoring itu sebenarnya?
WHAT IS REFACTORING?
Berdasarkan buku Martin Fowler’s “Refactoring: Improving the Design of Existing Code”
Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure. It is a disciplined way to clean up code that minimizes the chances of introducing bugs. In essence when you refactor you are improving the design of the code after it has been written.
Berbeda dengan praktik sebelumnya yang mengharuskan desain yang baik di awal baru memikirkan kode program. Pada refactoring, tidak perlu desain yang baik. Karena seiring berjalannya waktu, kode program akan diubah menjadi kode dengan desain yang lebih baik dengan kata lain merubahnya menjadi clean code seiring berjalannya waktu.
Lantas mengapa harus melakukan refactor?
Dengan melakukan refactor, kita dapat menemukan bug pada program kita. Sehingga dapat mencegah adanya kerusakan pada kode (code rot). Jika kita melakukan perubahan pada kode seperti contohnya menambah fitur tanpa melakukan refactor, maka code rot akan semakin besar yang berakibat pada sulitnya me-maintain kode program tersebut. Karena menurut Martin Fowler, siapapun dapat membuat kode yang dapat dipahami komputer, tetapi pembuat kode program yang baik adalah yang membuat kode yang dapat dipahami manusia lainnya.
Langkah awal yang dilakukan dalam melakukan refactor ini yaitu membuat sekumpulan test. Alasan mengapa perlu membuat test di awal padahal sudah ada refactor untuk mencegah menemukan bug ini tentunya karena sebagai manusia seringkali kita melakukan kesalahan. Sehingga tetap diperlukan test yang nyata. Selain itu, selama kita melakukan refactor tentunya kita tetap membutuhkan test sebagai pedoman bagaimana program seharusnya berjalan.
Adapun menurut Joshua Kerievsky pada bukunya yang berjudul Refactoring to Patterns, refactoring merupakan sebuah teknik yang erat kaitannya dengan design pattern. Pada bukunya, tertulis bahwa design pattern menyediakan target untuk refactoring kita. Namun, apakah design pattern itu?
WHAT IS DESIGN PATTERN?
Menurut Mark Summerfield pada bukunya mengatakan bahwa setidaknya terdapat 3 kelompok besar design pattern yaitu Creational, Structural, dan Behavioral.
Design pattern Creational berkaitan erat dengan class instantiation. Selanjutnya dapat dibagi menjadi class-creation pattern dan object-creational pattern. Pattern ini pun memiliki beberapa jenis, yaitu: Abstract Factor, Builder, Factory Method, Object Pool, Method, Singleton. Design pattern Structural merupakan pattern yang berkaian dengan komposisi class dan object. Biasanya dilakukan dengan menggunakan inheritance. Adapun jenis-jenis yang dikategorikan dalam pattern ini antara lain: Adapter, Bridge, Composite, Decorator, Facade, Flyweight, Private Class Data, dan Proxy.
Berbeda dengan sebelumnya, kategori pattern Behavioral ini berkaitan dengan komunikasi antar object. Jenis-jenisnya adalah Chain of Responsibility, Command, dan sebagainya.
IMPLEMENTATION IN THE PROJECT
Untuk contoh implementasi refactoring sendiri, misalkan sebelumnya dilakukan testing khusus untuk tampilan. Kemudian, testing ditambah lagi untuk mengetest bahwa nantinya fungsi harus berjalan dengan baik. Sehingga harus mengubah dan menyesuaikan kode (refactoring) agar sesuai dengan testing.
Untuk contoh implementasi design pattern pada proyek ini yaitu Decorator Design Pattern. Karena dalam hal ini, setiap fungsi dibuat dan bertambah secara dinamis. Jadi, component yang dibuat dibungkus dengan menambahkan fungsi tertentu atau props pada component tersebut seperti yang dapat dilihat pada kode di bawah ini
class Detail extends Component {
render() {
return (
<BrowserRouter>
<Header/>
<Slider id={this.props.id}/>
<Footer/>
</BrowserRouter>
)
}
};
export default Detail;References:
