Tôi đã cập nhật thư viện biểu đồ React Native mình làm từ 9 năm trước lên phiên bản 2.0.0 và đăng lên npm sau đúng 9 năm. Phần lớn công việc trong đợt cập nhật này do AI agent thực hiện, và tôi muốn chia sẻ lại quá trình đó.
Trước tiên là phần giới thiệu thư viện. react-native-pure-chart đúng như tên gọi, bản sắc của nó nằm ở chữ "pure". Nó không dùng react-native-svg, ART, hay cả Skia vốn đã trở thành tiêu chuẩn ngày nay, mà chỉ dùng các component View/Text thuần của RN để vẽ biểu đồ đường/cột/tròn. Nguyên lý render là như sau: tính khoảng cách và góc giữa hai điểm dữ liệu bằng lượng giác, rồi xoay một View mảnh và dài bằng transform: rotate để nó trông như một đoạn thẳng, sau đó nối các mảnh như vậy lại để tạo thành toàn bộ biểu đồ. Giá trị cốt lõi là có thể dùng chỉ với một lệnh npm install, không cần link thư viện vẽ native hay lo build hỏng ở bước pod install, tức là zero dependency. Ở thời kỳ đỉnh cao, nó từng đạt 2.000 lượt tải npm mỗi tuần, được dùng trong khoảng 820 dự án và có 289 star. Sau đó nó bị bỏ mặc suốt 9 năm và thậm chí không rõ còn chạy được trên RN mới hay không.
Đúng lúc tôi còn một tài khoản AI sắp được reset hạn mức, nên đã để lại một prompt vào giờ nghỉ trưa.
"Tôi đã git clone sẵn rồi, hãy làm cho nó chạy ổn trên môi trường expo/RN mới nhất. Tham khảo tài liệu harness"
Ở đây, "harness" là môi trường tự kiểm chứng mà tôi đã thiết lập sẵn. Đây là cấu hình cho phép trực tiếp điều khiển iOS simulator và Android emulator bằng công cụ mobile e2e như Maestro, chụp screenshot và kiểm tra kết quả render. Trọng tâm của lần làm việc này nằm ở chính chỗ đó.
Để làm cho codebase RN từ 9 năm trước chạy được trên expo/RN mới nhất, có rất nhiều chỗ phải sửa. Kiểu viết component và API của thời đó vẫn còn nguyên, nên đây không chỉ là nâng version đơn thuần mà thực tế là một đợt refactor hiện đại hóa. Dạng công việc này không quá khó ở từng phần riêng lẻ, nhưng số lượng rất nhiều, và sau mỗi lần sửa lại phải kiểm tra xem có phần nào vỡ trên màn hình thực tế hay không, nên nếu con người tự làm sẽ tốn khá nhiều thời gian.
Trong lúc tôi làm việc khác, agent đã tự chạy vòng lặp trong vài tiếng. Nó sửa code, chạy app trên simulator và emulator, thao tác màn hình bằng e2e, chụp screenshot, xem screenshot để đánh giá vấn đề render rồi lại sửa code. Điều quan trọng là việc kiểm chứng này không chỉ dừng ở mức lỗi compile hay test pass. Với thư viện biểu đồ, build thành công vẫn là thất bại nếu đường bị lệch hoặc trục bị xô. Vì đây là loại dự án mà đáp án nằm ở "những gì hiện trên màn hình", nên vòng lặp hồi quy trực quan lấy screenshot làm tiêu chí đã bù đắp được những phần mà unit test không thể xác nhận.
Thay đổi lớn nhất ở phiên bản này là hỗ trợ biểu đồ đường cong (smooth line). Thực ra 9 năm trước thư viện chưa hỗ trợ biểu đồ cong. Đường thẳng thì chỉ cần xoay một View, nhưng đường cong thì phải chia đoạn thật nhỏ, tính tọa độ và góc của từng mảnh để xấp xỉ bằng các đoạn thẳng ngắn; khi đó tôi không giải quyết được vấn đề các mảnh bị đứt nhẹ hoặc trông gãy khúc ở chỗ nối, nên đã không đưa tính năng này vào. Lần này agent không chỉ dừng ở việc kiểm tra screenshot tổng thể mà còn phóng to chụp những đoạn nghi ngờ đường cong bị đứt để kiểm tra. Sau đó nó điều chỉnh các giá trị biến dùng trong việc tính tọa độ và góc của từng mảnh, render lại, phóng to lại để kiểm tra, và lặp đi lặp lại chu trình đó. Nếu con người tự làm vòng lặp tuning kiểu thay tham số rồi nhìn kết quả bằng mắt, đến một lúc nào đó sẽ thỏa hiệp; còn agent thì cứ tiếp tục cho đến khi hội tụ, và kết quả là biểu đồ đường cong mượt đã được thêm vào như một tính năng mới. Có thể nói tính năng mà 9 năm trước tôi chưa làm được thì lần này đã hoàn thành.
Kết quả là đã hoàn tất tương thích với môi trường expo/RN mới nhất, bổ sung hỗ trợ biểu đồ đường cong, cập nhật screenshot biểu đồ trong README, cũng như build và phát hành npm 2.0.0. Đây là bản cập nhật sau 9 năm.
Đây là điều tôi rút ra từ lần làm việc này. Tôi bắt đầu nghĩ rằng nút thắt của agent coding nằm ở môi trường kiểm chứng hơn là năng lực của mô hình. Nếu có sẵn một harness để nó tự xác nhận kết quả, thì ngay cả chất lượng hình ảnh cũng có thể hội tụ mà không cần con người review. Đặc biệt với các dự án như thư viện UI, nơi đáp án nằm trên màn hình, thì sự kết hợp giữa thao tác e2e và đánh giá screenshot tỏ ra rất hiệu quả. Những công việc như hiện đại hóa hệ thống legacy, vốn độ khó không cao nhưng chi phí kiểm tra lặp lại lớn, có vẻ là một hạng mục rất phù hợp để giao cho agent.
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
Chưa có bình luận nào.