Trong kỷ nguyên AI, refactoring không còn là công việc thủ công nặng nhọc

 (blog.lemonbase.team)
29 điểm bởi whatsup 2026-01-22 | 5 bình luận | Chia sẻ qua WhatsApp

Đây là bài viết về việc dọn dẹp legacy của Design System bằng AI + Codemod.
Hy vọng sẽ là tài liệu tham khảo hữu ích cho những ai đang chuẩn bị thực hiện refactoring quy mô lớn.

Bối cảnh phát sinh vấn đề

  • Trong Design System nội bộ, nhiều component như Typography đã bị deprecated
  • Sau khi áp dụng Design System mới + Tailwind, các pattern deprecated bị trộn lẫn trong cùng một codebase
  • Nếu dọn dẹp dần theo quy tắc Boy Scout thì
    • số lượng file quá nhiều
    • và vì nguyên tắc tách riêng PR thay đổi chức năng với PR refactoring, việc này liên tục bị đẩy xuống thấp trong ưu tiên

Cách tiếp cận: Codemod + AI

  • Sử dụng Codemod dựa trên AST (jscodeshift) thay vì thay thế chuỗi đơn thuần
  • Tận dụng AI để:
    • khảo sát toàn bộ pattern sử dụng Typography deprecated
    • sắp xếp các quy tắc Before/After
    • hỗ trợ viết bản nháp script chuyển đổi jscodeshift và mã kiểm thử
  • Ví dụ chuyển đổi cốt lõi:
    • <Body1 bold>텍스트</Body1>
      → <span className="typography-body1-bold">텍스트</span>
    • <HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
      → <h1 className="typography-headLine5 text-primary">

Kết quả

  • Khoảng 95% pattern deprecated liên quan đến Typography được chuyển đổi tự động
  • Các pattern pha trộn giảm mạnh, giúp cải thiện tính nhất quán của mã và trải nghiệm onboarding
  • Có thêm phương án “lần thay thế Design System tiếp theo cũng sẽ làm bằng Codemod”

Bài học rút ra

  • Nhiều công việc refactoring hơn tưởng tượng có thể được tự động hóa bằng AST + Codemod
  • Trong các đợt chuyển đổi tự động quy mô lớn, việc “review quy tắc chuyển đổi + test” hiệu quả và an toàn hơn so với “review diff của từng file”
  • Nên phân tách vai trò: AI cho phân tích pattern và hỗ trợ viết bản nháp, còn Codemod cho thay thế hàng loạt một cách nhất quán

Bài viết liên quan

5 bình luận

 
hebu570 2026-01-23

Bài viết này rất thú vị..!
Hiện tại code frontend của dự án đang rất lộn xộn, chắc phải thử dùng mới được!
 
whatsup 2026-01-23

Xin chào. Cảm ơn bạn đã đọc bài một cách hào hứng!
Trong lúc áp dụng, nếu có điều gì thắc mắc thì cứ để lại bất cứ lúc nào nhé!!
 
shincad 2026-01-23

Bài viết rất hữu ích. Khi đặt ra các quy tắc AST, tôi nhớ lúc đầu đã cố tự động hóa toàn bộ nên khá vất vả... Làm rồi mới thấy, đáp án là loại các trường hợp mơ hồ ra và chỉ xác định những gì thật sự chắc chắn.
 
aliveornot 2026-01-23

Ồ, cái này hay đấy.
 
whatsup 2026-01-23

Cảm ơn bạn đã đánh giá tích cực!!