React, Google Maps ve WebSocket Performans Sorunu

For English press 9.

Trendyol GO Admin Panel üzerinde tüm siparişleri, kuryeleri, alıcıları ve satıcıları anlık olarak WebSocket ile takip ettiğimiz bir Canlı Harita’mız var. Bu haritanın yazılması aşamasında ve devamında yaşadığımız sorunları anlatabilmek adına bir hikaye yaratalım;

Mesela “ t ” anında 1000 kuryemiz ve 1000 siparişimiz olduğunu varsayarsak;

• 1000 alıcı marker’ını (pin’ini) haritaya eklememiz gerekiyor.
• 1000 satıcı marker’ını haritaya eklememiz gerekiyor.
• 1000 kurye marker’ını haritaya eklememiz gerekiyor.
• Her kurye 3 saniyede bir WebSocket üzerinden güncel koordinatlarını gönderiyor dolayısıyla 1 saniyede yaklaşık 300 kurye marker’ını haritada güncel lokasyonuna hareket ettirmemiz gerekiyor.
• Her bir siparişin hangi alıcı, hangi satıcı ve hangi kurye ile bağlantısı olduğu belli olsun diye de 2 adet polyline (doğrusal çizgi) ekliyoruz, toplamda 2000 polyline.
• Her bir marker için info window (popup) ekliyoruz, toplamda 3000 info window.
• Her bir sipariş durumu değiştiğinde (‘Mağazaya Gidiyor’, ‘Teslimata Gidiyor’ vs) haritada sipariş ile ilgili olan her şey güncelleniyor.

Yani harita yüklendikten sonraki 1 dakika içerisinde haritada yaklaşık 26000 civarı işlem yapılıyor. Bu işlemlerin bağımlı olduğu diğer fonksiyonların da çalıştığını düşününce işlem sayısı yüz binleri geçebiliyor. Durum böyle olunca performans bizim için kritik bir öneme sahip oldu.

Projeye ilk başladığımızda hızlı bir araştırmada Google Maps’i React projesine native olarak implemente (dahil) etmekle ilgili bir doküman ya da bir yol görememiştik, performans olarak bir sorun yaratacaklarını da düşünmemiştik çünkü herkes native implementasyon yerine kütüphane kullanmayı önermişti. Biz de önce kütüphane kullanmayı denedik, 2 farklı React Google Maps kütüphanesi denedik fakat ikisinden de performans olarak memnun kalmadık. Bu kütüphaneler Google Maps API’ındaki tüm özellikleri sağlamıyorlardı ve her marker, her polyline için ayrı bir component kullanmak gerekiyordu. Böyle olunca tüm marker’ları ya da polyline’ları template’te döngü yaratarak oluşturmamız gerekiyordu. Döngü ile oluşturulan marker ya da polyline’ların içerisinden spesifik birini güncellemek istediğimizde tüm marker’lar ve polyline’lar yeniden yükleniyordu. Bu da hem görsel hem de teknik açıdan istediğimiz bir durum değildi.

Çözüm olarak şöyle bir yol bulup Google Maps API’ını native olarak implemente ettik; (Aşağıdaki örneği yol göstermesi açısından paylaşıyoruz, projenize uygun bir şekilde modüler hale getirmek sizin elinizde :)

Bu yöntem ile performans sorunlarımız çözüldü, gereksiz render maliyetinden kurtulduk ve uzun bir süre hiç bir sorun yaşamadan devam ettik.

Sonra bir gün sayfa ilk yüklenmesinden sonra WebSocket’in bazen 20 dk bazen de 30 dakika sonra durduğunu ve çalışmadığını fark ettik. İlk başta harita üzerinde on binlerce işlem yapıldığı için bir performans probleminin buna sebebiyet verdiğini düşündük. Yaptığımız detaylı bir araştırma sonrasında bunun performans ile ilgili olmadığını WebSocket Server’da bulunan Buffer Size ve Time Limit’inin az olmasından kaynaklandığı fark ettik. Buffer Size ve Time Limit’ini artırdığımızda bütün sorunlarımız çözülmüş oldu :)

Edindiğimiz deneyimleri paylaşmaya devam edeceğiz, umarız deneyimlerimizin size bir faydası dokunur, bir sonraki yazıda görüşmek üzere hoşçakalın :)