Single Page Application ve REST API yaklaşımı son yıllarda modern web mimarilerinde yaygın olarak kullanılmaya ve hayatımızı kolaylaştırmaya devam ediyor.

REST API’yi nerede kullanacağım, neden REST API kullanayım gibi sorularınıza yanıt arıyorsanız, “REST API Nedir, Standartları ve Kaynakları Nelerdir?” blog yazımıza göz atabilirsiniz.

Gmail, Google Maps, AirBNB, Netflix, Pinterest, Paypal gibi bazı Single Page Application örnekleri ve daha pek çoğu, akıcı, ölçeklenebilir bir deneyim oluşturmak için SPA’lar kullanıyor.

Bu blog yazımızda Single Page Application’ın nasıl çalıştığı, avantajları ve örnekleri üzerine konuşacağız!

Single Page Application (SPA) Nedir?

Single Page Application (SPA), birçok bilginin aynı kaldığı ve bir seferde yalnızca birkaç parçanın güncellenmesi gereken tek bir sayfadır.

Sunucudan yeni sayfaların tamamını yüklemek yerine geçerli sayfayı dinamik olarak yeniden yazarak kullanıcıyla etkileşime giren bir web uygulaması veya web sitesidir.

Routing(yönlendirme) işleminin backend tarafından değil de JavaScript tarafından client-side(istemci) tarafında yapılır.

Single Page Application Nasıl Çalışır?

Sayfalar arasında kullanıcı deneyimini iyileştirerek uygulamanın bir masaüstü uygulaması gibi davranmasını sağlar.

Bazıları kullanıcı nereye giderse gitsin (başlıklar, altbilgiler, logolar, gezinme çubuğu vb.) aynı kalır, bazıları yalnızca belirli bir bölümde sabittir. Single Page Application ise, bu tekrardan yararlanarak işlemlerini gerçekleştirir.

Bu nedenle, günümüzde trafiği oldukça yüksek olan web siteleri ve uygulamalar SPA kullanır.

Single Page Application Avantajları

SPA’nın iyileştirilmiş uygulama performansı, hızlı geliştirme süresi ve daha uygun altyapı maliyetleri gibi pek çok avantajı vardır.

• 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. Bunun nedeni, SPA’ların ayrıştırılmış mimarisi veya arka uç hizmetleri ile ön uç ekranının ayrılmasıdır.
• Kullanıcı deneyimi: SPA kullanımı çok iyi bir kullanıcı deneyimi sağlar. İlk sayfa yüklemesinden sonra, sunucu size artık tüm sayfanın HTML’si göndermez. Sadece ilgili bölümlerin yüklenmesi için veri gönderir. Buda çok ciddi bir performans sağlar.
• Caching(Önbellek): Single page uygulamalar local veriyi etkili kullanma sayesinde internet bağlantınız kesilse bile websitesi sunucu ile tekrar senkronize olarak işlemlerini yürütür.
• Debugging: SPA ile debugging işlemi çok daha kolay olur.

Dezavantajları

SEO: SPA, arama motoru optimizasyonunda biraz zayıf kalır.

Bu nedenle, Google ve frameworkler bu sorunu çözmek için çözümler geliştiriyorlar.

Tarayıcı Geçmişi: Tarayıcınız üzerinde back işlemi yapmak istediğinizde sizi bir önceki sayfaya yönlendirir. Bu sorunu çözmek için HTML5 History API önerilmiştir.

Güvenlik: Uygulamanın sunucu tarafı yoğunluğu olmasından kaynaklı güvenlik problemleri açığa çıkıyor. İstemci tarafında XSS kullanımı ile scriptleri çalıştırmak daha kolay oluyor. Benzer şekilde kullanıcının izni olmadan bazı yetkileri almak daha kolay oluyor fakat React, Angular gibi frameworkleri geliştiren firmalar bu açığı fark ederek daha dikkatli davranıyor.

Memory leaks: Uygulamanızda çok fazla obje yüklenir, bu objeler sayfadan gittiğinde siz arka planda olduğunu görseniz bile silinmemiş olabilir. Bu sebeple çöp nesnelerin aldığı bellek alanı işletim sistemine geri verilememiş olur. Böylece belleğin şişmesini sağlar. Bu durum, kullanıcı arayüzünün yavaşlamasına ve batarya kullanımının artmasına sebebiyet verebilir.

Angular, React, Vue ile Tek Sayfalı Uygulama Geliştirilebilir mi?

SPA oluşturmak için AJAX ve HTML5’e ihtiyaç duyulur.

Angular, React, Ember ve Vue gibi diğerleri geliştiricilerin SPA’ları verimli ve anlamlı bir şekilde oluşturmak için kullandıkları frameworklerdir. Bu frameworkler, birçok geliştiricinin katkıda bulunduğu ve tanımlanmış bir dizi yapı kuralını izleyen yeniden kullanılabilir bileşenlerin bir koleksiyonudur.

Angular ve SPA

Angular, Google tarafından 2010’da piyasaya sürülen bir JavaScript framewoktür. Karşılaştırdığımız üç seçenek arasında Angular en eskisidir ve TypeScript’e dayanmaktadır.

SPA geliştirmek için harika bir seçenektir, çünkü frameworkler arasında en olgun olanıdır ve GitHub’da yeterli sayıda katılımcısı vardır. Öğrenme eğrisi açısından daha zor olabilir, ama buna kesinlikle değecektir.

React.JS ve SPA

React.JS, 2013 yılında Facebook tarafından oluşturulan bir JavaScript frameworküdür. Facebook’un kendisi, Instagram ve WhatsApp gibi iyi bilinen tek sayfalı uygulamalar dahil olmak üzere ürün yelpazeleri boyunca kapsamlı bir şekilde kullanılmaktadır.

Üç rakip arasında, React, GitHub’a en çok katkıda bulunan – binin üzerinde – geliştiricilerin her gün karşılaştığı çeşitli zorluklarla güncel kalmaya yardımcı olur.

VUE.JS ve SPA

Vue.JS, 2014’te eski bir Google çalışanı Yuxi (Evan) You tarafından oluşturulan bu üçlünün en küçüğüdür. Hiçbir büyük şirket onun gelişimini desteklemese de, Vue popülaritesini artırmayı başarmıştır.

Ön uç frameworkünüzde basitliği ve esnekliği tercih ediyorsanız, Vue iyi bir seçenektir. Ayrıca, en hafif olanıdır.