Single Page Application (SPA) Nedir?

Performansın (hız ve etkileşim) ve sürekliliğin esas olduğu bu anlayışa cevap vermek amacıyla web uygulamaları olarak ifade edebileceğimiz yeni bir biçimin ortaya çıktığını söyleyebiliriz. Öncelikle klasik olarak ifade ettiğimiz yapıyı tekrar hatırlayalım.

Klasik Web Sayfaları

Klasik web sayfası (ya da web uygulamaları) yapısında (multipage application olarak da ifade edebiliriz), bir web sayfasını görüntüleyen ziyaretçi sayfalar arasında gezindiğinde sunucuyla etkileşim halindedir. Yaptığı istek sunucuya ulaşır, sunucu isteği kontrol eder ve bir sorun yok ise statik bir sayfayı iletir. İstek bir internet tarayıcısıyla sağlanır ve client (istemci) olarak ifade edilir. Bu sürece ayrıca başka yazılar dahilinde değineceğim. Evet, devam edelim. Eğer, veritabanı kullanımı ve/veya farklı işlemler söz konusu ise (PHP gibi bir programlama dilinin kullanıldığını varsayalım, örneğin bir arama ya da oturum işlemi gerçekleştirilmiş olsun) bu işlemler sunucuda gerçekleştirilir ve sonuç yine statik olarak ziyaretçiyle paylaşılır. Yük sunucudadır. İşlemler sunucu tarafında dinamik olarak ele alınsa da ziyaretçiye iletilen sayfalar bütün olarak ele alınır. Bu sayfalar CSS ve JavaScript kodları, fontlar ve görseller gibi zengin içerikler içeriyor olabilir. Bu dosyalar haricen önbelleğe alınsalar da sayfanın tamamı kullanımdadır. Dolayısıyla sunucudaki yükün yanı sıra hız ve kaynak yönetiminde optimizasyon arayışları ortaya çıkmıştır.

AJAX (Asynchronous JavaScript and XML)

Hız ve sunucudaki yükün optimize edilmesi / kaynakların daha başarılı bir şekilde yönetimi çerçevesinde, zaman içerisinde Ajax (Asynchronous JavaScript and XML) adı verilen yeni yapılar (MVC) hayatımıza girmeye başladı. Ajax çağrıları ile sayfanın tamamı yerine ilgili alanların sunucuyla ilişkili olarak güncellenmesi mümkün hale gelmiştir. Ancak, Ajax’ın da yeterli olmadığı durumlara cevaben routing olarak ifade edilen yeni bir biçim ortaya çıkmıştır ve bu sayede işlemlerin tarayıcılar tarafından ele alınması mümkün hale gelmiştir. Uzun bir süre boyunca jQuery, XMLHttpRequest, DOM manipülasyonları gibi işlemlerle sayfa içerisindeki alanlar sayfanın tamamından bağımsız bir şekilde yönetilebilmiştir. Alışveriş sitelerinde, ürünün sayfa değişikliği olmadan sepete atılması ve form gönderimleri bu sürecin en yoğun örnekleri arasında gösterilebilir.

Tek Sayfa Uygulaması (SPA / Single Page Application)

SPA ile sunucu yükü istemciye aktarılır ve sayfa geçişleri olarak ifade edebileceğimiz değişiklikler JavaScript vasıtasıyla routing ile çözümlenir. Bu sayede bir web sayfasındaki tüm yapı değil, ilgili alanın değişmesi / güncellenmesi (data-flow, client-side templating) sağlanır. Bu işlemler için pek çok harici araç (framework, library vb.) kullanılabilir. Vue bu araçlardan biridir ve vue-router ile bu yeteceği sunar. Ancak, şu da unutulmamalıdır ki klasik web sayfası veya tek sayfa uygulaması ihtiyaçlar çerçevesinde ve olumlu-olumsuz yönleri değerlendirilerek tercih edilmelidir. Aksi durumda, ziyaretçiler ve kaynak yönetimi açısından gereksiz bir süreç izlenmiş olur.

Routing

Kullanıcı yeni bir bağlantı tıkladığında bağlantı URI’si üzerinden bir istek gönderilir. Router kullanımında yine bağlantılar söz konusudur ancak istek sunucuya gitmez ve istemci tarafından (client-side) ele alınır. Özellikle Twitter üzerinden Tweet görüntülemelerinde, URI içeriğindeki hash # kullanımlarını anımsamışsınızdır. Değişiklikler router tanımlamalarına bağlı olarak ele alınır. Yani, istekte bulunanda JavaScript ile isteğe cevap veren de tarayıcının kendisidir. Konuyla ilgili olarak Routing Nedir? başlıklı yazıyı okuyabilir ve/veya Vue.js Routing örneğini inceleyebilirsiniz.

SPA’nın Avantajları

Hız/Performans

Birkaç kez belirttiğim üzere, SPA kullanımında bütün sayfa değil, sadece değişmesi istenen alanda değişiklik gerçekleştirilir. Bu sayede harici kaynaklar için istekte bulunmamış ve sunucudan cevap beklenmemiş oluruz. Dolayısıyla işlemler hızlı bir şekilde ve gerekli olduğu durumlarda gerçekleştirilir.

Kullanıcı Deneyimi

SPA kullanımı mobil uygulamalara yakın bir deneyim sunduğu için daha pratik ve etkili bir süreç sunar. Elbette sayfalandırmalar doğru bir şekilde çözümlenmelidir.

Caching (Önbellek)

SPA kullanımında lokal veriler ve bağlantı akışı etkin bir şekilde kullanılabilir.

Gelişmiş Araçlar

Server-side-rendering gibi süreçlerle zayıf olan SEO desteği yine harici uygulamalarla (modüller, bağımlılıklar vb.) düzenlenebilir. Ayrıca, internet tarayıcıları ve buna bağlı olarak arama motorları da modern araçları daha akıllı bir şekilde çözümleyebilmektedirler.

Ek olarak, HTML History API gibi akıllı özellikler sayesinde History modu kullanılarak ziyaretçiler görüntüledikleri sayfalar arasında da geçişler yapabilmektedirler¹.

SPA mimarisi WebSockets² ve RxJS³ (Reactive Extensions For JavaScript) gibi geliştirmelerle daha önce mümkün olmayan ve/veya pratik bir şekilde çözümlenemeyen real-time (eşzamanlı) özellikleri de kolay kullanılabilir hale getirmektedir.

Son Olarak

Single Page Applications (SPAs), ilerleyen zaman içerisinde, yeni araçlar (framework, library vb.) ve gereksinimler doğrultusunda çok daha tercih edilebilir ve pratik bir şekilde kullanılabilir hale gelecektir. Elbette, bu süreci tetikleyen durum mobil ve masaüstü uygulamalardaki alışkanlıkların web uygulamaları tarafında da bekleniyor oluşu olacaktır. Bu sürece dair yayınlanan olumlu ve olumsuz (yetersizlikler) pek çok görüş mevcut. Zaman içerisinde, yapılan değerlendirmelerin de yeni gelişmeler ışığında değişiklik göstereceği aşikar. Aşağıda, bu yazıya da kaynaklık etmiş, farklı görüşler ve bağlamlar içeren bazı yazıları listeliyor, hararetle göz atmanızı rica ediyorum.