ผมได้อัปเดตไลบรารีกราฟ React Native ที่เคยสร้างไว้เมื่อ 9 ปีก่อนเป็นเวอร์ชัน 2.0.0 และเผยแพร่ขึ้น npm แล้ว งานอัปเดตครั้งนี้ส่วนใหญ่ดำเนินการโดย AI agent และนี่คือกระบวนการนั้น
ขอเริ่มจากแนะนำไลบรารีก่อน react-native-pure-chart มีอัตลักษณ์ตามชื่อเลยคือความเป็น "pure" โดยไม่ใช้ทั้ง react-native-svg, ART หรือแม้แต่ Skia ที่กลายเป็นมาตรฐานในปัจจุบัน แต่ใช้เพียงคอมโพเนนต์ View/Text แบบล้วน ๆ ของ RN เพื่อวาดกราฟเส้น/แท่ง/วงกลม หลักการเรนเดอร์เป็นแบบนี้ คือคำนวณระยะทางและมุมระหว่างจุดข้อมูลสองจุดด้วยตรีโกณมิติ แล้วหมุน View ที่ยาวและบางด้วย rotate transform ให้ดูเหมือนเส้นตรง จากนั้นนำชิ้นส่วนเหล่านี้มาต่อกันจนเป็นกราฟทั้งภาพ สิ่งสำคัญคือสามารถใช้งานได้ด้วย npm install เพียงบรรทัดเดียวโดยไม่ต้องกังวลเรื่องการ link native drawing library หรือ build พังในขั้นตอน pod install กล่าวคือคุณค่าหลักคือการไม่มี dependency เลย ช่วงพีคที่สุดเคยมียอดดาวน์โหลดรายสัปดาห์บน npm 2,000 ครั้ง ใช้งานในราว 820 โปรเจกต์ และมี star 289 ดวง หลังจากนั้นก็ถูกปล่อยทิ้งไว้ 9 ปี และไม่รู้ด้วยซ้ำว่ายังทำงานบน RN รุ่นใหม่ได้หรือไม่
พอดีผมมีบัญชี AI เหลืออยู่บัญชีหนึ่งที่ใกล้จะรีเซ็ตโควตา ก็เลยทิ้งพรอมป์ต์ไว้ตอนพักเที่ยง
"git clone ไว้แล้ว ทำให้มันรันได้ดีบนสภาพแวดล้อม expo/RN ล่าสุด อ้างอิงเอกสาร harness"
คำว่า "harness" ตรงนี้หมายถึงสภาพแวดล้อมสำหรับ self-validation ที่ตั้งค่าไว้ล่วงหน้า เป็นชุดที่ทำให้สามารถควบคุม iOS simulator และ Android emulator ได้โดยตรงด้วยเครื่องมือ mobile e2e อย่าง Maestro พร้อมถ่ายสกรีนช็อตเพื่อตรวจสอบผลการเรนเดอร์ได้ แก่นสำคัญของงานครั้งนี้อยู่ตรงนี้เอง
การทำให้โค้ดเบส RN เมื่อ 9 ปีก่อนทำงานได้บน expo/RN ล่าสุด ต้องแก้หลายจุดมาก ทั้งรูปแบบการเขียนคอมโพเนนต์และ API ในยุคนั้นยังคงอยู่ จึงไม่ใช่แค่การอัปเกรดเวอร์ชันธรรมดา แต่แทบจะเป็นการรีแฟกเตอร์ให้ทันสมัย งานลักษณะนี้แต่ละจุดไม่ยากมากนัก แต่มีจำนวนมาก และทุกครั้งที่แก้ก็ต้องตรวจว่าหน้าจอจริงมีอะไรพังหรือไม่ ถ้าให้คนทำเองจะเป็นงานที่กินเวลามาก
ระหว่างที่ผมไปทำงานอย่างอื่น agent ก็วนลูปทำงานเองอยู่หลายชั่วโมง มันแก้โค้ด เปิดแอปบน simulator และ emulator ควบคุมหน้าจอด้วย e2e แล้วถ่ายสกรีนช็อต จากนั้นดูสกรีนช็อตเพื่อตัดสินปัญหาการเรนเดอร์ แล้วกลับไปแก้โค้ดใหม่ซ้ำไปเรื่อย ๆ จุดสำคัญคือการตรวจสอบนี้ไม่ได้อยู่แค่ระดับ compile error หรือแค่เทสต์ผ่าน เพราะสำหรับไลบรารีกราฟ ต่อให้ build สำเร็จ ถ้าเส้นเหลื่อมหรือแกนเลื่อนก็ถือว่าล้มเหลว โปรเจกต์ที่คำตอบคือ "สิ่งที่มองเห็นบนหน้าจอ" แบบนี้ ทำให้ visual regression loop ที่ใช้สกรีนช็อตเป็นเกณฑ์ช่วยเติมเต็มส่วนที่ unit test ตรวจไม่เจอ
ความเปลี่ยนแปลงที่ใหญ่ที่สุดในเวอร์ชันนี้คือการรองรับกราฟเส้นโค้ง (smooth line) จริง ๆ แล้วเมื่อ 9 ปีก่อนยังไม่สามารถรองรับกราฟโค้งได้ เส้นตรงนั้นแค่หมุน View หนึ่งชิ้นก็พอ แต่เส้นโค้งต้องแบ่งช่วงให้ย่อยลง คำนวณพิกัดและมุมของแต่ละชิ้น แล้วประมาณด้วยเส้นตรงสั้น ๆ หลายเส้น ซึ่งตอนนั้นผมแก้ปัญหารอยต่อที่ขาดเล็กน้อยหรือดูเป็นเหลี่ยมระหว่างชิ้นไม่ได้ จึงไม่ได้ใส่ฟีเจอร์นี้เข้าไป ครั้งนี้ agent ไม่ได้หยุดแค่การตรวจสกรีนช็อตทั้งภาพ แต่ยังซูมจับภาพเฉพาะช่วงที่สงสัยว่าเส้นโค้งขาดเพื่อตรวจละเอียดอีกด้วย จากนั้นก็ปรับค่าตัวแปรที่ใช้คำนวณพิกัดและมุมของแต่ละชิ้น เรนเดอร์ใหม่ ซูมดูใหม่ แล้ววนซ้ำแบบเดิม ถ้าเป็นคนทำเอง เมื่อถึงจุดหนึ่งก็มักยอมประนีประนอมกับผลลัพธ์ แต่ agent ทำซ้ำต่อไปจนกว่าจะลู่เข้า และสุดท้ายก็เพิ่มกราฟเส้นโค้งที่ลื่นไหลเป็นฟีเจอร์ใหม่ได้สำเร็จ เท่ากับว่าฟีเจอร์ที่ทำไม่สำเร็จเมื่อ 9 ปีก่อนได้ถูกใส่เข้ามาในครั้งนี้
ผลลัพธ์คือรองรับสภาพแวดล้อม expo/RN ล่าสุด เพิ่มการรองรับกราฟเส้นโค้ง อัปเดตสกรีนช็อตกราฟใน README และสร้างพร้อมเผยแพร่ npm 2.0.0 เรียบร้อยแล้ว เป็นการอัปเดตครั้งแรกในรอบ 9 ปี
สิ่งที่ผมรู้สึกจากงานครั้งนี้คือ bottleneck ของ agent coding น่าจะอยู่ที่สภาพแวดล้อมการตรวจสอบมากกว่าความสามารถของโมเดล เมื่อมี harness ที่ตรวจผลลัพธ์ได้ด้วยตัวเอง ก็สามารถพาคุณภาพด้านภาพให้ลู่เข้าได้โดยแทบไม่ต้องอาศัยการรีวิวจากคน โดยเฉพาะโปรเจกต์อย่าง UI library ที่คำตอบอยู่บนหน้าจอ การผสมกันของการควบคุมแบบ e2e กับการตัดสินจากสกรีนช็อตให้ผลลัพธ์ที่มีประสิทธิภาพ และงานอย่างการทำ legacy ให้ทันสมัย ซึ่งความยากไม่สูงมากแต่มีต้นทุนการตรวจซ้ำสูง ก็ดูจะเป็นหมวดงานที่เหมาะจะมอบให้ agent
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
ยังไม่มีความคิดเห็น