9 साल पहले बनाई गई React Native chart library को 9 साल बाद 2.0.0 पर update करके npm पर publish किया है। इस update के काम का ज़्यादातर हिस्सा AI agent ने किया, और मैं उसकी प्रक्रिया साझा कर रहा हूँ।
पहले library का परिचय। react-native-pure-chart की पहचान, नाम के मुताबिक, "pure" है। यह react-native-svg, ART, या आजकल standard बन चुके Skia का उपयोग किए बिना RN के pure View/Text components से ही line/bar/pie charts बनाती है। Rendering का सिद्धांत ऐसा है: दो data points के बीच की दूरी और angle को trigonometry से calculate करके, एक पतले और लंबे View को rotate transform से घुमाया जाता है ताकि वह line segment जैसा दिखे, और ऐसे टुकड़ों को जोड़कर पूरा chart बनाया जाता है। Native drawing library को link करने या pod install के दौरान build टूटने की चिंता के बिना, npm install की एक line से उपयोग किया जा सके—यानी zero dependencies—यही इसकी core value है। Peak समय में npm पर weekly 2,000 downloads, लगभग 820 projects में usage, और 289 stars थे। उसके बाद 9 साल तक यह छोड़ी पड़ी रही, और latest RN में चलती भी है या नहीं, यह भी पता नहीं था।
संयोग से एक AI account बचा था जिसकी limit जल्द reset होने वाली थी, इसलिए lunch time में मैंने एक prompt छोड़ दिया।
"git clone कर रखा है, इसे latest expo/RN environment में ठीक से चलने लायक बना दो। harness docs देखें"
यहाँ "harness" पहले से set किया गया self-verification environment है। यह Maestro जैसे mobile e2e tool से iOS simulator और Android emulator को सीधे operate करता है, screenshots लेता है, और rendering result check कर सकता है। इस काम का core यहीं था।
9 साल पुराने RN codebase को latest expo/RN में चलाने के लिए काफी जगह हाथ लगाना पड़ता है। उस समय के component लिखने के तरीके और APIs वैसे ही बचे हुए थे, इसलिए यह सिर्फ version upgrade नहीं बल्कि लगभग modernization refactoring की स्थिति थी। ऐसे tasks की individual difficulty ज़्यादा नहीं होती, लेकिन मात्रा बहुत होती है, और हर fix के बाद actual screen में कुछ टूट तो नहीं रहा, यह check करना पड़ता है; इसलिए इंसान खुद करे तो काफी समय लेने वाला काम है।
जब मैं दूसरे काम कर रहा था, agent कई घंटों तक अकेले loop चलाता रहा। Code modify करना, simulator और emulator में app चलाना, e2e से screen operate करना, फिर screenshot लेना, उस screenshot को देखकर rendering issue का फैसला करना, और फिर code modify करना—यह cycle दोहरती रही। यह महत्वपूर्ण है कि verification सिर्फ compile errors या tests pass होने के स्तर का नहीं था। Chart library में build सफल हो जाए, फिर भी अगर line misaligned हो या axis खिसकी हुई हो तो वह fail है। यह ऐसा project है जहाँ सही जवाब "screen पर दिखने वाली चीज़" है, इसलिए screenshot को judgment criterion बनाने वाली visual regression loop ने unit tests से verify न हो सकने वाले हिस्सों को भर दिया।
इस version में सबसे बड़ा बदलाव curved (smooth line) chart support है। असल में 9 साल पहले curved chart support नहीं कर पाया था। Straight line के लिए एक View को rotate करना काफी है, लेकिन curve के लिए segment को छोटे-छोटे टुकड़ों में बाँटकर हर टुकड़े के coordinates और angle calculate करके छोटे line segments से approximate करना पड़ता है। उस समय टुकड़ों के बीच हल्का gap या angular look आने की समस्या हल नहीं कर पाया था, इसलिए feature ही नहीं जोड़ा था। इस बार agent ने सिर्फ पूरा screenshot check करने पर नहीं रुका, बल्कि जिन segments में curve टूटती हुई लग रही थी, उन्हें zoomed capture करके inspect किया। फिर टुकड़ों के coordinates और angle calculation में इस्तेमाल होने वाले variable values adjust किए, फिर render किया, और फिर zoom करके verify किया—यह cycle दोहराई। Parameters बदलकर result को आँखों से confirm करने वाली tuning loop अगर इंसान खुद repeat करे तो किसी point पर compromise कर लेता है, लेकिन agent convergence तक लगातार repeat करता रहा, और परिणामस्वरूप smooth curved chart एक नए feature के रूप में add हो गया। यानी जो feature 9 साल पहले implement नहीं कर पाया था, वह इस बार आ गया।
नतीजतन latest expo/RN environment compatibility, curved chart का नया support, README chart screenshots update, और npm 2.0.0 build व deployment—सब पूरा हो गया। यह 9 साल बाद का update है।
इस काम से मेरी सीख यह रही: agent coding की bottleneck model performance से ज़्यादा verification environment में है। अगर ऐसा harness तैयार हो जिसमें result खुद check किया जा सके, तो human review के बिना भी visual quality तक converge किया जा सकता है। खासकर UI library जैसे projects में, जहाँ सही जवाब screen पर होता है, e2e operations और screenshot judgment का combination असरदार रहा। Legacy modernization जैसे tasks—जिनकी difficulty कम होती है लेकिन repeated verification cost बड़ी होती है—अब agent को सौंपने के लिए अच्छी category लगती है।
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
अभी कोई टिप्पणी नहीं है.