Tablolarda Lazy Load — Angular
Merhabalar , sizlere ikinci yazımda; Angularda performans açısından oldukça kullanışlı olan bir teknikten bahsedeceğim. Lazy Load için sayfamızın performansını arttırmayı amaçladığımız bir optimizasyon tekniği diyebiliriz. Bu teknik sayesinde sayfamızın yüklenmesinin bitmesini beklemeden görüntü almaya başlayabiliriz. Yalnızca tablolarda değil görseller, animasyonlar gibi bir çok farklı şekilde kullanabiliriz. Projelerimizin daha kullanıcı dostu olmasını sağlayan bu yapıya basit bir örnek verelim.
Projemizin ana sayfasında kullanıcının, sisteme son girişlerini gösteren bir tablomuz olduğunu düşünelim. Bu data, sistemi uzun süredir kullanan bir kullanıcı için bir hayli büyük olabilir. Ve kullanıcının bu dataya her zaman
ihtiyacı olmayabilir. Uzun süreli kullanım sonucunda büyüyen bu data ana sayfamızın performansını git gide düşürecektir. İşte bu noktada performansımızı arttırmak için bu tabloyu lazy loading kullanarak, ilk yüklemede belli bir boyutta açılmasını sağlayabiliriz. Kullanıcı bizim belirlediğimiz, varsayılan boyuttan daha fazla bir dataya ulaşmak istediği durumda geri kalan dataları getirmek sistemimizin performansını arttıracaktır. Daha önce Json-Server kullanarak kahramanlarımızı listelediğimiz projemize devam edelim.
Öncelikle Json-Server kullanacağımız için servisimizi buna göre düzenlemeliyiz. Json-Server pagination özelliği destekler ancak
Toplam data bilgisini response header içerisinde gönderir.
Bu yüzden servisimizi, isteği header ve body olarak ayıracak şekilde optimize edeceğiz. Bu sayede datalarımız body’nin içerisinde gelirken, bizde headerdan toplam data sayısı bilgisine ulaşabileceğiz.
Observe:response parametresi ile servisten dönen cevabı istediğimiz hale getirdik. Artık lazy load yapımızı kurmaya başlayabiliriz.
Template’imizi düzenlemeden önce .ts dosyamızın içinde lazy load fonksiyonumuz tanımlıyoruz. ‘loadHeroes’ içerisinde sayfa numarasını ve sayfa numarasına bağlı olarak servisimizi implemente ediyoruz. ‘rowsPerPage’ ile tablo satır sayımızı kontrol edeceğimiz listeyi oluşturuyoruz.
Gelelim template içerisinde önceki yazımızda oluşturduğumuz PrimeNG tablomuzu düzenlemeye; tablomuza bazı parametreler eklememiz gerekiyor. Bunlar lazy load fonksiyonumuzu ve tablo satır boyutunu tanımlamamızı sağlayan parametreler.
Component içerisinde tanımladığımız loading ile datalarımız yüklenirken kullanıcıya spinner gösterebiliyoruz.
Sonuç olarak; tablolarımızda Lazy Load yapısını kullanarak projelerimizin performansında önemli derecede artış sağlayabiliyoruz. Datalarımız büyüdükçe lazy load’ın faydasını daha çok görüyoruz. Genel olarak projelerimizde kuracağımız yapı bu şekildedir. Gelecek yazılarımızda tablomuzu geliştirmeye devam edeceğiz.
