Single Page Application (SPA) Nedir?
Single Page Application yaklaşımı son yıllarda web dünyasında hızla popülerliğini arttırmakta. Ben de birkaç kelime karalayacağım bu konuda.
Single Page Application, routing(yönlendirme) işleminin backend tarafından değilde JavaScript tarafından client-side(istemci) tarafında yapıldığı bir web uygulamasıdır. Özetle web sayfamızda yalnızca bir tane index sayfası oluyor ve istemci tarafında sayfalar router ile değişiyor ve kullanıcıya gösteriliyor. Bunu yaparken de web componentlerden yardım alınıyor. Router, ilgili path için sizin belirlediğiniz componentleri kullanıcıya gösteriyor. Bu da yeni bir sayfaya geçmiş etkisi yaratıyor. Yani tüm bu componentlerin değişimi tarayıcınızda oluyor. Peki SPA’dan önce bu işlem nasıl yürüyordu?
İlk zamanlar web uygulamalarımızda kullanıcı sunucudan bir statik sayfayı istiyordu ve sunucu istenen sayfayı istemci tarafına geri döndürüyordu. Burada istemci sizin internet tarayıcınız olarak düşünebiliriz. Ancak bu durum zamanla gelişti ve sunucular sizin gönderdiğiniz isteğe göre dinamik sayfalar üretmeye başladılar. Yani gelen sayfa dinamik olarak genellikle bir veritabanında depolanan veriler sayesinde oluşturuluyor ve istemciye gönderiliyordu. Ancak halen sunucudan tüm sayfa geliyordu bu kısım önemli. Yani sitede gezinen kullanıcı bu tüm sayfanın sürekli baştan yüklenmesinden kaynaklı daha yavaş bir internet deneyimi yaşıyordu. Ancak AJAX teknolojisinin çıkması ve gelişmesi ile bu durum değişti. AJAX çağrıları ile sayfanın yalnızca belli kısımları değişiyor ve sunucuya gönderiliyordu. Bu yöntem şuanda da birçok websitesinde kullanılmakta. Ancak halen routing işlemi sunucuya yükleniyor.
SPA ile gelen yenilik ne oldu?
Single Page Application ile sunucudaki yük daha da hafifletildi ve istemci tarafına daha çok yük bindi. Sunucu tarafında karar verilen routing istemci tarafında JavaScript tarafından yapılmaya başlandı. Ancak burada önemli nokta bilgisayarlarımız geliştiği için herkesin bu işlemi tek sunucuda yapması yerine kendi tarayıcısında yapması internet deneyimini çok değiştirdi. Yani kullanıcılar sitede daha hızlı gezinebilir oldular. Her geçen gün yeni bir framework çıkmasının altındaki sebeplerden birisi de bu aslında. Her biri webte daha hızlı gezinmeyi vaad ediyor. Tabiki bunun avantajları olduğu kadar dezavantajları da oluyor. Şimdi bu avantaj ve dezavantajlara kısaca bakalım.
Single Page Application Avantajları
- Hız : Single page web uygulamalarında bütün sayfa sürekli yenilenmez, bu sayede büyük bir hız farkı görülür. Çoğu kaynak(html/css/js) birkez sunucudan gelir ve değişen şey veri olur. Sayfa yüklenme hızı bu sayede çok hızlı olur.
- Kullanıcı deneyimi: SPA kullanımı size çok daha iyi bir kullanıcı deneyimi yaşatır. Sayfalar arası geçişi çok daha kolaylıkla yapabilir, sayfaların ortak kullandığı alanlar sürekli değişmediğinden ihtiyacınız olanı daha kolay ve hızlı bulursunuz.
- Caching(Önbellek): Single page uygulamalar local veriyi çok daha etkili şekilde kullanabilir. Bir kez sunucuya istek attıktan sonra gelen veriyi kullanıcının interneti yavaş olsa ya da gitse bile kullanabilir. İnternet bağlantınız geldiğinde websitesi sunucu ile tekrar senkronize olur.
- Debugging: SPA ile debugging işlemi çok daha kolaylaşır. Chrome gibi modern tarayıcıların toolları sayesinde network monitoring, elementlerin takibi, verinin takibi gibi işlemleri daha kolay yaparsınız. Chrome üzerinde AngularJS, React, VueJS gibi frameworklerin gelişmiş toolları ile geliştirme hızınızı arttırabilirsiniz.
Single Page Application Dezavantajları
- SEO: SPA, arama motoru optimizasyonunda biraz zayıf kalıyor. URL eski dinamik sayfalardaki gibi tam anlamıyla değişmiyor, routing işlemi JavaScript tarafından yapılıyor. Bu yüzden arama motorları için aslında tek bir sayfa gibi gözüküyor. Google bu sorunu çözmek için çeşitli değişiklikler yaptığını duyurdu. Frameworklerde kendi içlerinde bu sorunları aşmak için çözümler geliştiriyorlar.
- Tarayıcı Geçmişi: Web tarayıcınızda geri butonuna bastığınızda web uygulamanız içinde bir önceki duruma gidemezsiniz. Sizi bir önceki sayfaya yönlendirir. Uygulamamız “single page” olduğu için de bir önceki siteye gidersiniz. Bu sorunu çözmek için HTML5 History API önerilmiştir.
- Güvenlik: Uygulamanın sunucu tarafından istemci tarafına daha çok yük bindirmesi beraberinde güvenlik problemlerini de getiriyor. İstemci tarafında XSS kullanarak istemci taraflı scriptleri çalıştırmak kolaylaşıyor. Aynı şekilde kullanıcının izni olmadan belli yetkileri almakta kolaylaşıyor. Ancak React, Angular gibi popüler frameworkleri geliştiren firmalarda bu durumun farkında olacaktır ki geliştirdikleri frameworkleri bu yönde güncelliyorlar. Uygulamanın güvenliğinde geliştiricinin yani sizin de öneminiz artıyor.
- Memory leaks(bellek sızıntısı): Single Page Application için önemli sorunlardan birisi de memory leaks. Uygulamanızda çok fazla obje sürekli yüklenir ve sayfadan gider. Ancak siz gitti olarak görsenizde doğru şekilde geliştirmediyseniz aslında bellekten silinmemiş olabilir. Bu sebeple çöp nesnelerin aldığı bellek alanı işletim sistemine geri verilememiş olur. Bu da belleğin şişmesini sağlar. Bu durum da kullanıcı arayüzünün yavaşlamasına ve batarya kullanımının artmasına sebebiyet verebilir. Özellikle mobil kullanıcılar için problem olabilir.
Son yıllarda birçok modern JavaScript frameworkü SPA yaklaşımını benimsemiştir. Bunlardan en popülerleri React, Angular, VueJS, Ember, Backbone, Knockout ve diğerleri. Konu ilginizi çektiyse popüler frameworklerden birisini kullanmaya başlayarak ilk single page uygulamanızı geliştirebilirsiniz. Tabi siz onu öğrenene kadar başka bir framework popüler olmazsa:) Umarım yazı faydalı olmuştur. Bana tgrlbyrk@icloud.com mail adresinden ya da Linkedin üzerinden ulaşabilirsiniz.
