9 yıl önce yaptığım React Native grafik kütüphanesini 9 yıl sonra 2.0.0 olarak güncelleyip npm'e yükledim. Bu güncelleme çalışmasının büyük kısmını bir yapay zeka ajanı yaptı; ben de süreci paylaşıyorum.
Önce kütüphaneyi tanıtayım. react-native-pure-chart, adından da anlaşılacağı gibi kimliğini "pure" olmaktan alıyor. react-native-svg, ART ya da bugün standart haline gelen Skia'yı kullanmadan, RN'in saf View/Text bileşenleriyle line/bar/pie chart çiziyor. Render mantığı şöyle işliyor: iki veri noktası arasındaki mesafe ve açı trigonometrik fonksiyonlarla hesaplanıyor, ardından ince ve uzun bir View rotate transform ile döndürülerek bir çizgi parçası gibi gösteriliyor ve bu parçalar birleştirilerek grafiğin tamamı oluşturuluyor. Native çizim kütüphanelerini link etme ya da pod install sürecinde build'in bozulmasından endişe etmeden, tek satırlık npm install ile kullanılabilmesi — yani sıfır bağımlılık — temel değeriydi. En parlak döneminde npm'de haftalık 2.000 indirmeye, yaklaşık 820 projede kullanıma ulaşmıştı ve 289 star'ı vardı. Sonrasında 9 yıl boyunca bakımsız kaldı ve güncel RN'de çalışıp çalışmadığı bile bilinmiyordu.
Tam da yakında kotası sıfırlanacak bir AI hesabım kalmışken, öğle arasında tek bir prompt bıraktım.
"git clone ettim, bunu güncel expo/RN ortamında düzgün çalışır hale getir. Harness dokümanına bak."
Buradaki "harness", önceden kurduğum self-validation ortamı. Maestro benzeri mobil e2e araçlarıyla iOS simülatörünü ve Android emülatörünü doğrudan kontrol edip ekran görüntüsü alarak render sonuçlarını doğrulayabildiğim bir kurulum. Bu çalışmanın kilit noktası da burasıydı.
9 yıl önceki RN kod tabanını güncel expo/RN'de çalıştırmak için el atılması gereken çok yer vardı. O dönemin bileşen yazım biçimleri ve API'leri hâlâ duruyordu; yani bu iş basit bir sürüm yükseltmesinden çok, fiilen bir modernizasyon refactor'ü gerektiriyordu. Böyle işler tek tek çok zor değildir ama sayıları fazladır; ayrıca her düzeltmeden sonra gerçek ekranda bir kırılma olup olmadığını kontrol etmek gerekir. İnsan eliyle yapılınca ciddi zaman alan bir iş türüdür.
Ben başka işlerle uğraşırken ajan saatler boyunca kendi başına döngü çalıştırdı. Kodu değiştirip simülatör ve emülatörde uygulamayı açtı, e2e ile ekranı kontrol etti, ekran görüntüsü aldı, bu görüntülere bakarak render sorunlarını değerlendirdi ve sonra tekrar kodu düzeltti. Burada önemli nokta, bu doğrulamanın derleme hatası ya da test geçme seviyesinde kalmamasıydı. Bir grafik kütüphanesinde build başarılı olsa bile çizgiler kayıksa ya da eksenler yerinden oynamışsa bu başarısızlıktır. Bu proje için doğru cevap "ekranda görünen şey" olduğu için, ekran görüntüsünü ölçüt alan görsel regresyon döngüsü, unit test'lerin yakalayamadığı kısmı tamamladı.
Bu sürümdeki en büyük değişiklik, eğri (smooth line) grafik desteği oldu. Aslında 9 yıl önce eğri grafikleri destekleyememiştim. Düz çizgide tek bir View'i döndürmek yeterli, ama eğride segmentleri çok küçük parçalara bölüp her parçanın koordinatını ve açısını hesaplayarak kısa çizgi parçalarıyla yaklaşım yapmak gerekiyor. O dönemde parçalar arasında oluşan çok küçük kopuklukları ya da köşeli görünümü çözemediğim için bu özelliği hiç ekleyememiştim. Bu kez ajan, sadece genel ekran görüntüsünü kontrol etmekle kalmadı; eğrinin koptuğundan şüphelenilen bölgeleri yakınlaştırarak da inceledi. Sonra parçaların koordinat ve açı hesaplarında kullanılan değişkenleri ayarladı, yeniden render aldı ve tekrar yakınlaştırıp kontrol etti. Parametre değiştirip sonucu gözle kontrol etme döngüsünü insan kendi başına tekrar edince bir noktada taviz veriyor; ajan ise sonuç yakınsayana kadar bunu sürdürdü ve sonunda düzgün bir eğri grafik yeni özellik olarak eklendi. Yani 9 yıl önce hayata geçiremediğim özellik bu kez eklenmiş oldu.
Sonuç olarak güncel expo/RN ortamı uyumluluğu, yeni eğri grafik desteği, README grafik ekran görüntülerinin yenilenmesi ve npm 2.0.0 build ile dağıtımı tamamlandı. 9 yıl sonra gelen bir güncelleme oldu.
Bu çalışmadan çıkardığım ders şu oldu: ajan tabanlı kodlamada darboğazın model performansından çok doğrulama ortamında olduğunu düşünmeye başladım. Sonucu kendi kendine doğrulayabilen bir harness kurulduğunda, insan incelemesi olmadan bile görsel kalite yakınsayabiliyor. Özellikle doğru cevabın ekranda olduğu UI kütüphanesi projelerinde e2e kontrol ile ekran görüntüsü değerlendirmesinin birleşimi etkiliydi. Özellikle zorluğu düşük ama tekrar tekrar doğrulama maliyeti yüksek legacy modernizasyon işleri, ajana devretmek için uygun bir kategori gibi görünüyor.
GitHub: https://github.com/oksktank/react-native-pure-chart
npm: https://www.npmjs.com/package/react-native-pure-chart
Henüz yorum yok.