Di era AI, refactoring bukan lagi pekerjaan kasar

Tulisan ini membahas penataan legacy Design System dengan AI + Codemod.
Semoga bisa menjadi referensi bagi Anda yang sedang bersiap menghadapi refactoring skala besar.

Latar belakang munculnya masalah

• Di Design System internal, banyak komponen seperti Typography telah deprecated
• Setelah mengadopsi Design System baru + Tailwind, pola deprecated bercampur dalam satu codebase
• Jika dibersihkan sedikit demi sedikit dengan aturan Boy Scout,
  • jumlah file terlalu banyak
  • dan karena prinsip memisahkan PR perubahan fitur dan PR refactoring, prioritasnya terus tertunda

Pendekatan: Codemod + AI

• Menggunakan AST-based Codemod (jscodeshift), bukan sekadar penggantian string
• Memanfaatkan AI untuk:
  • menelusuri seluruh pola penggunaan Typography yang deprecated
  • merapikan aturan Before/After
  • membantu membuat draf skrip transformasi jscodeshift dan kode pengujian
• Contoh transformasi utama:
  • <Body1 bold>teks</Body1>
    → <span className="typography-body1-bold">teks</span>
  • <HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
    → <h1 className="typography-headLine5 text-primary">

Hasil

• Pola deprecated terkait Typography sekitar 95% dikonversi otomatis
• Pola campuran berkurang drastis sehingga konsistensi kode dan pengalaman onboarding membaik
• Opsi “penggantian Design System berikutnya juga dilakukan dengan Codemod” kini tersedia

Pelajaran yang didapat

• Lebih banyak pekerjaan refactoring daripada yang dibayangkan ternyata bisa diotomatisasi dengan AST + Codemod
• Dalam transformasi otomatis skala besar, “review diff file” lebih tidak efisien dan kurang aman dibanding “review aturan transformasi + pengujian”
• AI sebaiknya diposisikan untuk analisis pola dan bantuan penyusunan draf, sedangkan Codemod untuk penggantian massal yang konsisten

[hebu570]

Tulisan yang sangat menarik..!
Saat ini kode front-end proyek saya berantakan, jadi sepertinya saya harus mencobanya!

[whatsup]

Senang bertemu dengan Anda. Terima kasih sudah membacanya dengan antusias!
Saat Anda mulai menerapkannya, kalau ada pertanyaan jangan ragu untuk meninggalkannya kapan saja!!

[shincad]

Tulisannya sangat berguna. Saat menetapkan aturan AST, saya sempat susah sendiri karena awalnya mencoba mengotomatisasi semuanya... Setelah dijalani, ternyata jawabannya adalah mengecualikan kasus-kasus yang ambigu dan hanya menetapkan yang benar-benar pasti.

[aliveornot]

Oh, ini bagus ya.

[whatsup]

Terima kasih sudah melihatnya dengan baik!!