Saya memperbarui library chart React Native yang saya buat 9 tahun lalu ke versi 2.0.0 setelah 9 tahun, lalu mengunggahnya ke npm. Sebagian besar pekerjaan pembaruan ini dilakukan oleh agen AI, dan saya ingin membagikan prosesnya.
Pertama, perkenalan library-nya. Seperti namanya, identitas react-native-pure-chart adalah "pure". Tanpa memakai react-native-svg, ART, maupun Skia yang kini menjadi standar, library ini menggambar chart garis/bar/pai hanya dengan komponen View/Text murni dari RN. Prinsip rendering-nya seperti ini. Jarak dan sudut antara dua titik data dihitung dengan fungsi trigonometri, lalu sebuah View yang tipis dan panjang diputar dengan rotate transform agar terlihat seperti segmen garis, dan potongan-potongan seperti ini disambungkan untuk membentuk keseluruhan chart. Nilai utamanya adalah bisa dipakai hanya dengan satu baris npm install tanpa perlu khawatir build rusak saat menautkan library native drawing atau dalam proses pod install—dengan kata lain, zero dependency. Pada masa puncaknya, npm mencatat 2.000 unduhan mingguan, dipakai di sekitar 820 proyek, dan memiliki 289 star. Setelah itu library ini terbengkalai selama 9 tahun, dan kondisinya bahkan tidak jelas apakah masih berjalan di RN terbaru.
Kebetulan ada satu akun AI yang limitnya akan segera di-reset, jadi saat jam makan siang saya meninggalkan satu prompt.
"Sudah saya git clone, buat agar berjalan baik di lingkungan expo/RN terbaru. Lihat dokumen harness"
Yang dimaksud "harness" di sini adalah lingkungan self-verification yang sudah saya siapkan sebelumnya. Ini adalah konfigurasi yang memungkinkan alat mobile e2e seperti Maestro mengoperasikan iOS Simulator dan emulator Android secara langsung, mengambil screenshot, dan memeriksa hasil rendering. Inti dari pekerjaan kali ini ada di sini.
Untuk membuat codebase RN dari 9 tahun lalu berjalan di expo/RN terbaru, ada banyak bagian yang harus disentuh. Cara penulisan komponen dan API dari masa itu masih tersisa apa adanya, sehingga ini bukan sekadar menaikkan versi, melainkan pada dasarnya membutuhkan refactoring modernisasi. Tingkat kesulitan masing-masing pekerjaan seperti ini tidak tinggi, tetapi jumlahnya banyak, dan setiap kali satu bagian diperbaiki perlu memastikan tidak ada yang rusak di layar nyata, sehingga jika dikerjakan manual oleh manusia akan memakan waktu cukup besar.
Sementara saya mengerjakan hal lain, agen itu menjalankan loop sendiri selama beberapa jam. Ia mengubah kode, menjalankan aplikasi di simulator dan emulator, mengoperasikan layar lewat e2e lalu mengambil screenshot, menilai masalah rendering dari screenshot tersebut, kemudian kembali mengubah kode. Yang penting, verifikasi ini bukan sekadar level error kompilasi atau test pass. Pada library chart, meski build berhasil, jika garis meleset atau sumbu bergeser, itu tetap gagal. Karena ini proyek yang jawabannya adalah "apa yang terlihat di layar", visual regression loop yang memakai screenshot sebagai kriteria penilaian menutupi bagian yang tidak bisa diperiksa dengan unit test.
Perubahan terbesar di versi ini adalah dukungan chart kurva (smooth line). Sebenarnya 9 tahun lalu chart kurva belum bisa didukung. Garis lurus cukup dengan memutar satu View, tetapi kurva perlu dipecah menjadi banyak segmen kecil, menghitung koordinat dan sudut tiap potongan, lalu mengaproksimasikannya dengan segmen garis pendek. Saat itu saya tidak bisa menyelesaikan masalah sambungan antar-potongan yang terlihat sedikit terputus atau bersudut, sehingga fitur tersebut tidak saya masukkan sama sekali. Kali ini agen tidak berhenti pada pemeriksaan screenshot keseluruhan; ia mengambil capture yang diperbesar pada bagian yang dicurigai terputus dan memeriksanya. Lalu ia menyesuaikan nilai variabel yang dipakai untuk menghitung koordinat dan sudut potongan, merender ulang, dan memperbesar lagi untuk memeriksa, dalam siklus berulang. Jika tuning loop yang mengubah parameter lalu memeriksa hasil secara visual ini dilakukan manual oleh manusia, pada titik tertentu biasanya kita akan berkompromi. Namun agen terus mengulang sampai konvergen, dan hasilnya chart kurva yang mulus berhasil ditambahkan sebagai fitur baru. Dengan kata lain, fitur yang tidak berhasil saya implementasikan 9 tahun lalu akhirnya masuk kali ini.
Hasil akhirnya: kompatibilitas dengan lingkungan expo/RN terbaru, dukungan baru untuk chart kurva, pembaruan screenshot chart di README, serta build dan rilis npm 2.0.0 semuanya selesai. Ini pembaruan setelah 9 tahun.
Hal yang saya rasakan dari pekerjaan ini: saya jadi berpikir bahwa bottleneck agentic coding lebih terletak pada lingkungan verifikasi daripada performa model. Jika tersedia harness yang memungkinkan agen memeriksa sendiri hasilnya, kualitas visual pun bisa konvergen tanpa review manusia. Terutama pada proyek seperti library UI, yang jawabannya ada di layar, kombinasi operasi e2e dan penilaian screenshot sangat efektif. Pekerjaan seperti modernisasi legacy, yang tingkat kesulitannya rendah tetapi biaya pemeriksaan berulangnya besar, tampaknya menjadi kategori yang cocok diserahkan kepada agen.
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
Belum ada komentar.