Single Page Application (SPA) Nedir?

Web uygulamalarının oluşturulmasının iki genel yolu olduğunu biliyorsunuzdur: bunlar çok sayfalı uygulamalar (MPA) veya tek sayfalı uygulamalar (SPA) olarak da tasarlanabilir. Ve hayattaki her şey gibi, her iki tasarım türünün de kendi avantajları ve dezavantajları vardır.

Tek Sayfalı Uygulamalar (SPA)

Tek sayfa uygulama, tarayıcıda çalışan ve kullanım sırasında sayfa yeniden yüklenmesini gerektirmeyen bir uygulamadır. Bu uygulamalar her gün milyonlarca kullanıcı tarafından fark edilmeden kullanılmaktadır. En büyük örnekler GitHub, Gmail, Google Haritalar ve hatta Facebook websiteleri.

Geleneksel olarak, bir kullanıcı bir web sayfasındaki bir bağlantıyı tıkladığında, tarayıcı sunucuya yeni bir sayfa için istek gönderir. Sunucu isteği aldığında, yeni sayfayı kullanıcının tarayıcısına gönderir. Bu, sık ve sıkıcı bir işlemdir, sık sık popüler siteler için sunuculara ağır yükler yerleştirir, çünkü web sayfasının tamamı için veriler her tıklamaya gönderilir.

Ancak, Tek Sayfa Uygulamaları (SPA) oyunu değiştiriyor. Günümüzün yüksek trafik alan sitelerinden ve sosyal medya platformlarından birçoğu, tüm bilgilerin ayrı sayfalar olarak yüklenmek yerine tek bir sayfaya yüklenmesini sağlayan SPA'ları benimsemektedir.

"Tek Sayfa" (SPA) nereden geliyor?

Tek Sayfa Uygulamasının arkasındaki temel kavram, tarayıcının yalnızca bir URL kullanmasıdır. Bu, tarayıcınızın adres çubuğundaki konum değişmeden sitenin etrafında sıçrama yapabilir, formları doldurabilir veya normal bir aktivite gerçekleştirebilirsiniz. Bu kullanıcının bakış açısından basit bir şey, ancak programcı için zorluk düzeyi var.

Tek Sayfa Uygulamaları (SPA) nelerdir?

Bir tek sayfa uygulama (SPA) web tabanlı bir uygulama olmasıdır tarayıcı içinde önceden yükler . Bunu yaparken, SPA tam web sayfasının sürekli olarak yeniden yüklenmesi ihtiyacını ortadan kaldırır ve her kullanıcı etkileşimi için yalnızca ilgili içeriği dinamik olarak yeniden yükler. Bu , farklı gezinme bölümleri arasında geçiş yaparken daha hızlı bir kullanıcı deneyimi ile sonuçlanır.

En popüler web sitelerinin çoğu, Google’ın Gmail, Google Maps ve Google Drive gibi araçlarının birçoğunu içeren SPA’lar olarak işlev görür. Facebook ve Twitter da dahil olmak üzere sosyal medya devleri de SPA olarak inşa edildi. SPA'ların işlevselliği tarayıcıda işlendiğinden, bu tür bir uygulama her zaman React, Angular, Vue, Ember.js, Meteor.js, Mithril.js veya Knockout.js gibi ön uç çerçeveler kullanılarak yapılır.

Tek Sayfalı (SPA) Uygulamaların Avantajları:

Dünyanın en iyi web sitelerinin çoğunun arkasındaki beyinlerin kanıtlayabildiği gibi, SPA'ların hem kullanıcılar hem de geliştiriciler için sayısız faydaları vardır. Bu avantajlardan bazıları şunlardır:

• Daha Hızlı Kullanıcı Deneyimi: Kullanıcılar bir gezinti bağlantısını her tıkladığında sunucudan gelen yanıtları artık beklemek zorunda olmadıklarından, kullanıcılar istedikleri bilgileri çok daha hızlı alabilirler. Site için gerekli tüm istemci tarafı yapısı zaten mevcut olduğundan, SPA yüklendikten sonra sunucu yanıtları yalnızca boşlukları doldurmak için verileri içermelidir.
• Daha Az Sunucu Kaynağı: SPA, bir kez tarayıcıya yüklenir. Bir kullanıcı istek yaptığında, sunucu her seferinde tüm sayfanın HTML işaretlemesi yerine JSON benzeri bir biçimde istenen verileri döndürür. Bu, SPA'ların bant genişliği ve sunucu kaynaklarından tasarruf sağladığı anlamına gelir; bu da günde milyonlarca ziyaretci tarafından gezilen sitelerin verimlilik ve güvenilirlik için SPA'lara güvenmesinin nedenlerinden biridir.
• Hata Ayıklaması Daha Kolay: Binlerce satır sunucu tarafı kodunu okumak yerine, geliştiriciler tarayıcılarda oluşturulan JavaScript kodunu inceleyerek SPA'larda hata ayıklayabilir. SPA'ları destekleyen JavaScript çerçevelerinin çoğu, Chrome tarayıcısı için kullanılabilen kendi hata ayıklama araçlarına sahiptir. Bu araçlar, geliştiricilere sayfa öğelerinin nasıl görüntülendiğini, sayfanın sunucudan nasıl veri istediğini ve sayfanın verileri nasıl önbelleğe aldığı gösterebilir.
• Diğer Uygulamalara Daha Kolay Geçiş: Geliştiriciler, bir SPA'dan mobil uygulamaya geçiş yapmak için aynı kodun çoğunu kullanabilirler. Tüm içerik bir kerede yayınlandığından, SPA'lar kaydırma için oldukça uygundur ve bu da mobil uygulamalar için ideal bir başlangıç ​​noktasıdır. SPA'lar ayrıca, kullanıcılara anında bildirimler, çevrimdışı erişim ve yerel önbellekleme gibi işlevler sunan aşamalı web uygulamaları oluşturmak için de kullanılır.

Tek Sayfa(SPA) Uygulamalarının Dezenvantajı

Hem geliştiriciler hem de kullanıcılar, SPA'ların geleneksel çok sayfalı uygulamalara göre sayısız avantajlarından yararlanırken, SPA'ların dezavantajları vardır. Bu dezavantajların bazıları şunlardır:

• Daha Düşük İlk Yükleme Süreleri: SPA'lar tüm uygulamayı bir kerede yüklediğinden, ilk yükleme genellikle bir seferde bir sayfa yüklenen karşılaştırılabilir bir siteden çok daha uzun sürebilir. Bu, SPA'yı çalıştırmak için kullanılan JavaScript kodunun ne kadar karmaşık olduğuna bağlıdır. Bu kurulum, ilk indirme sırasında hem sunucu kaynaklarını hem de kullanıcı sabrını sınar.
• SEO Zorlukları: SPA'ların yapısı, siteden gelen her bir sayfanın tek bir URL'den geldiği anlamına gelir. Bu yapı, SPA'ların açılış sayfaları, gelen bağlantılar ve site yetkilileri gibi arama motoru optimizasyonu (SEO) tekniklerinden yararlanmak için kullanabilecekleri yetenekleri sınırlayabilir. Google ve diğer arama motorları, SPA'ları dikkate almak için endeksleme rutinlerini ayarlamasına rağmen, geliştiriciler daha yüksek arama motoru sonuç sayfası (SERP) sıralaması elde etmekle ilgili sorunlarla karşılaşabilirler.
• Güvenlik Sorunları: SPA'ları çalıştırmak için istemci tarafı JavaScript'e güvenmek, bu uygulamaları, bilgisayar korsanlarının web tabanlı uygulamalara kötü amaçlı komut dosyaları enjekte edebildiği siteler arası komut dosyası çalıştırma (XSS) dahil olmak üzere güvenlik saldırılarına karşı da savunmasız bırakabilir. Uygun önlemler alınmadan, SPA'lar bir site sahibinin hassas verilerini kullanıcılara da gösterebilir.
• Memory leaks(bellek sızıntısı): Single Page Application(SPA) için önemli sorunlardan birisi de memory leaks. Uygulamanızda çok fazla Nesne sürekli yüklenir ve sayfadan silinir. Ancak siz silindi 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.

Tek Sayfa Uygulamalarını Ne Zaman Kullanmalı?

Hızlı ve kusursuz bir kullanıcı deneyimi sunmayı amaçlayan siteler için, SPA'ler çok uygun olabilir. Facebook ve Twitter gibi sitelerin gösterdiği gibi sosyal ağlar, SPA'ların kullanıcıları nasıl çekebileceğine dair güçlü örneklerdir. Geliştiriciler, SPA'ları mobil uygulamalar için bel kemiği olarak da kullanabilir , böylece kullanıcılara birden fazla cihazda tutarlı bir deneyim sunar. React Native gibi platformlar arası çerçevelerle, SPA'lar hızlı ve kolay bir şekilde mobil cihazlara taşınabilir.

Uygulamanız öncelikli olarak blog veya standart web siteleri gibi statik içerik gösteriyorsa, tek sayfalık bir uygulama en uygun maliyetli çözüm olmayabilir. Bununla birlikte, oldukça dinamik deneyimler için, SPA’lar ağır kaldırma işleminin çoğunu sunucularınızdan istemci tarayıcılara taşıyabilir.

Çok Sayfalı Uygulama (MPA)

Çok sayfalı uygulamalar daha klasik bir mimariye sahiptir. Her sayfa sunucuya bir istek gönderir ve tüm verileri tamamen günceller. Bu veriler küçük olsa bile. Böylece, aynı unsurları sergilemek için verimlilik harcanır. Buna göre, bu hız ve performansı etkiler. Birçok geliştirici hızı artırmak ve yükü azaltmak için JavaScript / jQuery kullanıyor. İyi bir örnek, bir çevrimiçi mağazada filtreler kullanırken sayfayı yeniden yüklemeden ürünleri güncellemektir. Çok daha rahat ve en önemlisi daha hızlı. Çok Sayfalı Uygulamanın (MPA) Temel Yararları:

• Kolay SEO optimizasyonu. MPA mimarisi, arama motorları için her sayfayı kolayca optimize etmenizi sağlar.
• Kolay gelişim Genellikle, çok sayfalı bir uygulama geliştirmek için daha küçük bir teknoloji yığını gerekir.
• Çok fazla çözüm var.

MPA kullanmanın dezenvatajı

• Mobil uygulama geliştirme çok daha fazla zaman alacaktır. Çoğu durumda, sıfırdan Backend kısmı yazmanız gerekir.
• Web arayüzü ve backend gelişimi sıkıca birleştirilmiştir.
• Gelişme oldukça karmaşık bir hal alıyor. Geliştiricinin hem istemci hem de sunucu tarafı için framework kullanması gerekir. Bu, uygulama geliştirmenin daha uzun sürmesine neden olur.

MPA veya SPA Kullanma

Her mimarinin avantajları ve dezavantajları vardır ve Kulanılmaları belirli bir proje türü için çok uygundur. SPA, bitmiş koda dayalı bir mobil uygulama geliştirme hızı ve kabiliyetiyle ayırt edilir. Ancak aynı zamanda SPA'nın zayıf SEO optimizasyonu var. Bu nedenle, bu mimari, arama motoru optimizasyonunun önemli olmadığı SaaS platformları, sosyal ağlar, kapalı topluluklar için mükemmel bir yaklaşımdır.

MPA, çevrimiçi mağazalar, iş siteleri, kataloglar, pazarlar vb. İçin daha uygundur. İyi optimize edilmiş bir MPA yüksek bir hıza sahiptir, ancak bir mobil uygulamanın geliştirilmesini kolaylaştırmaz. Doğru mimari MPA ve SPA, ölçeklenebilir web uygulamaları geliştirmek için çok uygundur.