BGrid, kaydırma yüksekliğini veri seti boyutundan ayırarak React grid'lerini bir milyon satırın ötesine taşıyor

Apache-2.0 lisansıyla yayınlanan açık kaynak React ve TypeScript veri grid'i BGrid'in (BeautifulGrid) geliştiricileri, 1.0.3 sürümünün tarayıcıda bir milyon satır görüntüleyebildiğini söylüyor. Dev.to'da yayınlanan bir yazıya göre, bileşenin önceki herkese açık demosu 550.000 satırda duruyordu ve bunun nedeni render performansı değil, tek bir DOM elemanının güvenilir biçimde ne kadar yüksek olabileceğine dair bir sınırdı.

Kimsenin göremediği bir spacer

Modern grid'lerin çoğu gibi BGrid de virtual scrolling kullanıyor: Veri seti boyutundan bağımsız olarak DOM'da yalnızca viewport içinde görünen satırlar var. Yazıya göre sorun kaydırma çubuğundaydı. Kullanıcıların tüm veri seti boyunca sürükleyebilmesi için grid'in, satır başına yaklaşık 29 piksel olacak şekilde tüm veriye karşılık gelen yüksekliğe sahip bir elemana hâlâ ihtiyacı vardı. 550.000 satırda bu yaklaşık 15.950.000 piksele denk geliyor ve ekibin hedeflediği tarayıcılarda çok büyük eleman boyutları için pratik CSS ve layout sınırlarına takılmaya başladıkları aralık da burasıydı.

Belirti öldürücü değil ama tuhaftı. 600.000 ve 700.000 satırın ötesine geçtiklerinde, React çökmese, bellek tükenmese ve yalnızca küçük bir satır penceresi render edilse bile layout bozulmaya başladı. Bu, orijinal demodaki tuhaf biçimde kesin 550.000 rakamını da açıklıyor: Ekip bu sayıyı grid'in 550.001. satırda yavaşlamasından değil, gözlemledikleri pratik kaydırma yüksekliği tavanının altında kalmak için belirledi.

v1.0.3'te mantıksal kaydırma

Sürüm 1.0.3 mimariyi değiştiriyor. BGrid, tarayıcının fiziksel kaydırma konumunun veri seti konumunun yerine geçmesine izin vermek yerine ikisini birbirinden ayırıyor. Tarayıcı yalnızca sınırlı ve güvenli bir fiziksel aralıkta kaydırılıyor; grid bu konumu veri setinin çok daha büyük mantıksal aralığına eşliyor, hedef satır indeksini hesaplıyor ve görünür satırları render ediyor. Container'ın yüksekliği artık veriyle birlikte büyümüyor, böylece bir milyon satır asla 29.000.000 piksellik bir eleman gerektirmiyor. Bu bağımlılık kaldırıldığında eski tavan da ortadan kalktı ve bir milyon satırlık örnek projenin büyük veri demosu haline geldi.

Merakla ekip daha sonra 10 milyon satıra kadar ilerledi ve grid onları da görüntüledi. Yazı, bunun bir öneri değil mimari bir test olduğundan açıkça söz ediyor.

Geriye kalan sınırlar

Mantıksal kaydırma tam olarak tek bir kısıtı ortadan kaldırıyor: Veri seti boyutu ile bir DOM elemanının maksimum fiziksel yüksekliği arasındaki bağı. Diğer her şey hâlâ veriyle ölçekleniyor. Yazı, bellek kullanımını, sıralamayı, filtrelemeyi, aramayı, serileştirmeyi, ağ aktarımını ve uygulama durum yönetimini büyük boyutlardaki gerçek maliyetler olarak listeliyor ve bu ölçekte makul stratejiler olarak sunucu tarafı işlemeyi, sayfalamayı (pagination) ve artımlı yüklemeyi gösteriyor.

Bir benchmark'tan fazlası

BGrid rekor peşinde olmaktan çok iş uygulamalarını hedefliyor. Virtual scrolling'in yanı sıra şu anda hücre düzenleme, hücre birleştirme, sıralama, filtreleme, özetler, pivot, dondurulmuş satır ve sütunlar, özel editörler ve klavye navigasyonu sunuyor. Ekip, grid'i yayınladığı uygulamalar için açık kaynak, güçlü tipli ve React dostu bir şey istediği için geliştirdiğini söylüyor ve Apache-2.0 lisansı, açık kaynak özellikler için ticari lisans gerektirmediği anlamına geliyor.

Neden önemli

Kaydırma yüksekliği tavanı, front-end mühendisliğinin daha sessiz kısıtlamalarından biri: Veri seti, layout motorunun kaldırabileceğinden daha uzun bir spacer ima eden her sanallaştırılmış liste, JavaScript'in veya belleğin gerçekte işleyebileceğinin çok altında sınırlanıyor. BGrid'in çözümü, kaydırma çubuğunun yalnızca bir giriş aygıtı olduğu ve fiziksel aralığının veri setinin kapsamına eşit olmak zorunda olmadığı konusunda faydalı bir hatırlatma. Log görüntüleyiciler, analitik tablolar ve büyük sonuç kümeleri için pratik darboğaz artık zaten ait oldukları yer olan veri iletimi ve işlemeye kayıyor: sayfalama ve artımlı yükleme. Ve düzenleme, pivot ve dondurulmuş paneller sunan bir Apache-2.0 grid olarak BGrid, ticari lisanslamaya hâkim olduğu bir kategoride açık kaynak seçeneklerini genişletiyor.