Render Etmeden Gezinmek: Navix'te Virtualization

Navix'in bileşen kütüphanesi büyüdükçe bazı parçalar öne çıkmaya başladı. Bu yazıda o parçalardan ikisine, NavixPaginatedList ve NavixPaginatedGrid'e yakından bakıyoruz; sorular bana, cevaplar yine yalnızca kaynak kodu okuyarak yanıt veren Claude'a ait.

Virtualization, uzun bir listede yalnızca ekranda görünen ve ona yakın elemanları DOM'a ekleyip geri kalanları hiç render etmeme tekniğidir. 1000 öğeli bir listede kullanıcı yalnızca 5'ini görüyorsa 995 öğe için DOM düğümü oluşturmak gereksizdir; belleği ve render süresini tüketir. Virtualization bu maliyeti ortadan kaldırır.

Navix'te bu teknik iki bileşende uygulanmıştır: NavixPaginatedList ve NavixPaginatedGrid. Her ikisi de React ve Flutter paketlerinde mevcuttur.

Her ikisi de aynı mantıkla çalışır. viewOffset kaç atlama yapıldığını tutar; render edilecek aralık viewOffset - buffer ile viewOffset + visibleCount + buffer arasında hesaplanır. buffer görünür alanın hemen dışındaki birkaç öğeyi de canlı tutar; böylece kullanıcı bir tuşa bastığında bir sonraki öğe zaten render edilmiş olur. Render dışında kalan öğelerin yerini bir spacer div tutar, kaydırma animasyonu CSS transform üzerinden yapılır.

Güçlü yanlar

Virtualization ve odak yönetimi tek bir bileşende birleştirilmiş. Normalde bunlar ayrı katmanlardır ve aralarındaki senkronizasyon geliştiriciye bırakılır. Burada threshold mekanizması her ikisini birden yönetiyor: odak pencere sınırına yaklaştığında hem render penceresi hem viewOffset otomatik kayıyor.

groupKey mekanizması dikkat çekici bir detay. Liste ekrandan kalkıp geri döndüğünde activeIndex ve viewOffset store'dan geri yükleniyor. Kullanıcı bir kategoriden çıkıp döndüğünde liste tam kaldığı yerden devam ediyor.

NavixPaginatedGrid'deki auto-horizontal modu, az sayıda öğeyle gelen bir grid için layout kararını otomatik veriyor. Geliştiricinin bunu elle kontrol etmesi gerekmiyor.

Zayıf yanlar

Her öğe sabit boyutta olmak zorunda. slotWidth container boyutunu visibleCount'a bölerek hesaplanıyor; değişken boyutlu öğeler bu modele girmiyor.

Bileşen ilk mount'ta container boyutunu ölçemediği için containerSize sıfırdan başlıyor. Genellikle sorun çıkarmıyor ama animasyonlu mount senaryolarında fark edilebilir.

Scrollbar yapısal olarak bileşenin içine gömülmüş. Tamamen farklı bir scrollbar konumu ya da layout istendiğinde mevcut yapı buna izin vermiyor.

Evet, oldu. Ama asıl cevabı kod yazarken aldım. Geliştirme sürecinde çok detaylı bir demo hazırladık; Navix'in ne sağladığını orada somut olarak görmek, o soruyu ikinci plana itti.

Bir adım daha ileri gidip Zenith TV uygulamasını tamamen Navix üzerine inşa ettik. Zenith'in hem web app hem Tizen OS portu var, hem de Flutter ile yazılmış Android portu. Her ikisinde de benzer bir navigasyon deneyimi sağlayabildik. Navix bu süreçte uygulama ile birlikte büyüdü; ihtiyaç doğdukça özellik eklendi, sorunlar temizlendi. Hâlâ geliştirilecek alanlar var, ama şu an gerçek bir uygulamayı taşıyacak olgunluğa ulaştı.