Studi Kasus Vetmo: Refactor ke Component Library Tanpa Menghentikan Rilis

TL;DR: Refactor UI ke component library tidak harus menghentikan pengembangan fitur. Pada Vetmo (platform pet care), kami merefactor bertahap dengan aturan strangler pattern: komponen baru wajib masuk library, komponen lama dimigrasi hanya saat halamannya disentuh. Dalam sekitar tiga bulan, mayoritas halaman utama sudah konsisten tanpa ada sprint yang berhenti.

Utang teknis di UI jarang terlihat di laporan bisnis, tapi terasa di kecepatan rilis. Saat mengerjakan Vetmo, platform pet care yang saya bantu bangun, kondisi awalnya familiar: tombol didefinisikan berulang di banyak file dengan gaya sedikit berbeda, perubahan warna brand berarti mencari-ganti di puluhan tempat.

Opsi "berhenti dua bulan untuk merapikan semuanya" tidak realistis untuk produk yang sedang tumbuh. Jadi kami memilih jalur bertahap.

Aturan Main Refactor Bertahap

Kami memakai tiga aturan sederhana, terinspirasi strangler pattern dari artikel Martin Fowler:

1. Komponen baru wajib lahir di component library. Tidak ada lagi UI ad-hoc di file halaman.
2. Migrasi mengikuti pekerjaan, bukan jadwal khusus. Halaman yang sedang diubah karena kebutuhan bisnis sekalian dimigrasi komponennya.
3. Token dulu, komponen kemudian. Minggu pertama hanya untuk menyatukan design token: warna, tipografi, spacing.

Efeknya: refactor menumpang pada roadmap yang sudah ada, sehingga tidak pernah bersaing dengan fitur.

Urutan Migrasi

Struktur mengikuti atomic design, dan prioritas fase 3 ditentukan dari data: halaman dengan traffic dan perubahan paling sering dimigrasi lebih dulu.

Hasil yang Terukur

Setelah sekitar tiga bulan, halaman-halaman utama Vetmo memakai komponen dari library. Dampak yang kami catat: waktu build halaman baru turun signifikan (perkiraan internal 30-50%), bug visual antar halaman berkurang, dan perubahan brand cukup diedit di satu tempat. Bonus yang tidak kami rencanakan: ukuran CSS mengecil karena duplikasi gaya hilang, yang ikut membantu skor core web vitals.

Angka persisnya akan berbeda di tiap codebase. Yang konsisten adalah arahnya: konsistensi naik, biaya perubahan turun.

Pertanyaan Umum

Apakah refactor seperti ini butuh tim besar?

Tidak. Vetmo dikerjakan tim kecil. Kuncinya disiplin pada aturan "komponen baru wajib masuk library", bukan jumlah orang.

Kenapa tidak refactor sekaligus saja?

Refactor total menghentikan rilis fitur dan berisiko besar gagal di tengah jalan. Bertahap berarti nilai bisnis tetap mengalir sementara kualitas kode naik pelan-pelan.

Bagaimana mengukur keberhasilannya?

Tiga indikator praktis: waktu build halaman baru, jumlah bug visual yang dilaporkan, dan berapa file yang harus diubah untuk satu perubahan brand.

Pelajaran untuk Produk Anda

Kalau UI produk Anda mulai berantakan, jangan menunggu jeda roadmap yang tidak akan pernah datang. Satukan token minggu ini, kunci aturan komponen baru, dan biarkan migrasi menumpang pekerjaan rutin.

<!-- JSON-LD -->