Single Page Application (SPA) aslında pek çok kişinin farkında olmadan kullandığı uygulamalardandır. Ne olduğu hakkında bilgi sahibi olunmasa da sıkça kullanılan bu uygulama başta Gmail olmak üzere Pinterest, Netflix, Airbnb gibi pek çok kanalda karşımıza çıkar. Genellikle tek sayfa uygulamaları ismiyle anılır. İşletmeler açısından ölçeklendirilebilir ve akıcı bir deneyim için sıkça başvurulan “Single Page Application (SPA) nedir, hangi faydalar sağlar?” sırasıyla ele alalım.
Single Page Application Nedir, Ne İşe Yarar?
Single Page Application web sayfasını yenilemeye ihtiyaç duymadan daha hızlı ve verimli bir performans almayı sağlar. Günümüz koşullarında web uygulamaları için iki farklı yol izlenir. Bu yolların ilki klasik yani MPA, diğeri de SPA’dır. Multi Page Application olarak adlandırılan MPA uygulamaları kullanıcının yaptığı isteği sunucuya, sunucu kontrolünden sonra sayfa iletimine sunar. Bu da elbette söz konusu sayfaların performansını ve akışını olumsuz etkiler. İşte, bu noktada devreye giren SPA yeni sayfalar yüklemek yerine var olan sayfada güncelleme sağlar.
Örnekleme yaparak açıklamak gerekirse Gmail kullanarak postalarınızı kontrol etmek istiyorsunuz. Bu kontroller sırasında siz gelen postalarınız arasında gezerken SPA sayesinde yeni sayfalar açılmaz. Tam tersine neyi talep ederseniz doğrudan önünüze o gelir. Farkında olunmasa da bu sayede daha hızlı işlem yapılır. Çünkü sunucuya iletilen işlem yeniden sorgulanmaya gerek kalmaz. Multi Page Application yani klasik olanlarda ise bu işlemler için yeni sayfalar açılır ve açılma esnasında sunucu sorgusu gerçekleştirir.
Single Page Application Avantajları
Özellikle e-ticaret ile ilgilenen işletmeler için önemli uygulamalardan biri Single Page Application’dır. Hem ürün hem de hizmet sağlayıcılarının bu tarz uygulamaları kullanmalarının nedenlerini açıklayarak ilerlersek:
Hızlıdır
Sunucu ile arasında değişen tek şey kişinin ilettiği talep sorgusudur. Bu nedenle Single Page Application oldukça hızlıdır. Hızlı olması hem bu uygulamayı kullanan işletme hem de müşteri açısından oldukça avantajlıdır. Özellikle ürün yelpazesi geniş online satış platformlarında bu tarz bir uygulama bulunmazsa web sayfasında gezintiye çıkan müşteriler durumdan memnun kalmayabilir. Çünkü her sorguda yeni bir sayfa açılması kişiler için zaman kaybıdır. Bu durum elbette şirketlerin doğrudan ödedikleri sayfa açılma maaliyetlerini de yakından ilgilendirir.
Gelişim süreci karmaşık değildir
Doğrudan talep edilen sorguyu güncelleyerek aynı sayfada sunan SPA için sunucu odaklı kod yazılımlarına gerek duyulmaz. Bu durumda da kişiler bu alanda geliştirme yapacağına kullanıcı arayüzüne odaklanır. Müşterilerin daha keyifli zaman geçirmesi adına arayüz geliştirmeleri daha önemli olduğu gibi firmalar içinde geliştirme için harcanan maliyetlerini azaltır.
Önbellek (Caching)
Single Page Application uygulamalarında sunucuya bir kez istek atılması yeterli olur. Sonraki süreçlerde yapılan yeni sorgulamalar aynı sayfa üzerinden güncellendiği için kullanıcının internet bağlantı hızı dikkate alınmaz. Bu durumda elbette hem firma hem de potansiyel müşteriler açısından önemlidir.
Gelişmiş araç kullanımına olanak sağlaması
Geliştirilebilir bir uygulama olması nedeniyle çeşitli araçlar kullanarak uygulama üzerinde iyileştirmeler sağlanabilir. Daha kolay ve daha hızlı bir hale evrilebilen Single Page Application için başta SEO desteği olmak üzere zayıf görülen her alanda çalışmalar yapılabilir. Böyle bir kolaylığa elverişli olması firmaların pazardaki rekabetlerini yakından etkiler.
SEO’da SWOT Analizi Nasıl Yapılır? başlıklı içeriğimi de ziyaret edebilirsiniz.
Single Page Application Nasıl Çalışır?
Single Page Application uygulamasının en temel hedefi kullanıcı deneyimini artırmaktır. Bu amaçla sunucuya herhangi bir sorgu ileten kullanıcının daha hızlı ve kesintisiz bir şekilde diğer sorgulara da ulaşabilmesini sağlar. Çalışma sistemini daha net anlayabilmek adına öncelikle MPA yani Multi Page Application uygulamasının çalışma sistemini özetlemek gerekir.
MPA’da yani geleneksel ya da klasik yöntem olarak adlandırılan uygulamada çalışma şu şekilde ilerler:
- Kullanıcı sorgusunun sunucuya iletilmesi
- Sunucunun isteği sorgulayıp alakalı içerikleri kullanıcıya iletmesi
- Kullanıcının yeni bir sorgu iletmesi
- Sunucunun yeni isteği incelemesi ve yeni bir sayfada kullanıcıya sunması
SPA çalışma sistemine bakılırsa:
- Kullanıcının sorguyu sunucuya iletmesi
- Sunucunun isteği kullanıcıya sunması
- Kullanıcının yeni bir sorgu iletmesi ve sunucunun aynı sayfayı güncelleyerek hızlı bir şekilde yeni sorguyu vermesi
Single Page Application Geliştirmelerinde Hangi Teknolojiler Kullanılabilir?
Single Page Application kullanabilmek için HTML5 ve AJAX’a ihtiyaç duyulur. Bu esnada uygulamayı geliştirebilmek için birbirinden farklı teknolojilerden faydalanılabilir. İstemci tarafında yapılacak geliştirmeler için VUE, Angular ve React teknolojileri kullanılır. Bu teknolojiler SPA uygulamalarının daha verimli ve anlamlı oluşturulmasına etki eder. Frameworkler olarak adlandırılan bu teknolojiler bir bakıma SPA uygulamalarını daha iyi şekillendirebilmeyi hedefler. En genel haliyle bu teknolojilere bir göz atacak olursak;
- Angular: 2010 yılından Google tarafından hazırlanmıştır. Öğrenimi biraz zorlu olsa da SPA geliştirilmesinde en çok kullanılan frameworker olarak karşımıza çıkar. GitHub’da katılımcısı yüksektir.
- React: 2013 yılında Facebook tarafından hazırlanan bir diğer frameworkerdır. Başta Facebook olmak üzere WhatsApp ve Instagram bu geliştiriciyi kullanılır. GitHub’a en çok kaykıyı sağlayan teknolojidir.
- VUE: 2014’te Yuxi You tarafından hazırlanmıştır. Bu kişi Google’ın eski çalışanlarından biridir. Büyük firmalardan destek almasa da gelişmeye ve popülerliğini korumaya devam etti. Diğer teknolojilere göre daha az tercih edilse de basit, esnek ve en hafif olanı olarak ön plana çıkar.
Bu farklı 3 teknoloji dışında Ember JS ve Backbone JS teknolojileri de mevcuttur. Ember JS doğrudan kullanıcı arayüzü çalışmak isteyenlere hitap ederken Backbone JS basit ve esnektir. Backbone JS teknolojilerinin en çok nerelerde kullanıldığında bakıldığında ise karşımıza şu platformlar çıkıyor: Foursquare, Pinterest, Walmart, Delicious.
