JavaScript

Single Page Application (SPA) Nedir?

Güncelleme:
Akıllı cep telefonlarıyla hayatımıza giren mobil uygulamalar ve bu uygulamaların sunduğu özellikler beraberinde klasik olarak ifade edebileceğimiz web gezinme deneyimi ve tasarım anlayışında da değişiklikler ...
GÖRSEL

Akıllı cep telefonlarıyla hayatımıza giren mobil uygulamalar ve bu uygulamaların sunduğu özellikler beraberinde klasik olarak ifade edebileceğimiz web gezinme deneyimi ve tasarım anlayışında da değişiklikler oluşmasına neden oldu. 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/ya 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.Single Page Application / SPA

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

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.com ü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/ya 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/ya 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.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.