Her şeyden önce, büyük olasılıkla farkında olmadan zaten düzenli olarak Single Page Application (SPA) kullanıyorsunuz.

Single Page Application, web kullanıcıları için inanılmaz derecede ilgi çekici ve benzersiz deneyimler oluşturmak için harika bir araçtır.


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.

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.

Örneğin, e-postanıza göz attığınızda, gezinme sırasında çok fazla değişiklik olmadığını fark edeceksiniz - siz gelen kutunuzda ilerlerken kenar çubuğuna ve başlığa dokunulmadan kalır.

SPA, her tıklamayla yalnızca ihtiyacınız olanı gönderir ve tarayıcınız bu bilgileri işler. Bu, sunucunun yaptığınız her tıklamayla tam sayfayı yeniden oluşturduğu ve tarayıcınıza gönderdiği geleneksel bir sayfa yüklemesinden farklıdır.

Bu parça parça, istemci tarafı yöntemi, kullanıcılar için yükleme süresini daha hızlı hale getirir ve bir sunucunun göndermesi gereken bilgi miktarını çok daha az ve çok daha uygun maliyetli hale getirir.

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

Single Page Application, birbirini izleyen sayfalar arasında kullanıcı deneyiminin kesintiye uğramasını ortadan kaldırarak uygulamanın daha çok bir masaüstü uygulaması gibi davranmasını sağlar.

Çoğu web sitesinde çok sayıda tekrar eden içerik vardır.


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 bu tekrardan yararlanır.

Örnek vermek gerekirse;

Diyelim ki sıradan bir web sitesi bir evin ve bir ağacın resmini gösteriyor olsun. Geleneksel, çok sayfalı web siteleri, sunucudaki resmin tamamını boyar ve tarayıcınıza gönderir.

SPA ise evin ve ağacın görüntüsünü bir şablon olarak iletir. Bu ağacın ve evin rengini ve diğer özelliklerini veri olarak iletir. Böylece yeni bir ağaç yada yeni bir ev eklemek istediğinizde sunucudan tüm resmi almanıza gerek kalmaz.

Buda sayfanın çok hızlı yüklenmesine yardımcı olur ve çok başarılı bir kullanıcı deneyimi sağlar.

Single Page Application Avantajları

SPA çözümlerinin iyileştirilmiş uygulama performansı, tutarlılığı, azaltılmış geliştirme süresi ve altyapı maliyetleri gibi pek çok avantajı vardır.

Sunumu, içerik ve veriden ayıran geliştirme ekipleri, genel çözüm için entegre olmaya devam ederken farklı hızlarda çalışabilir. SPA, mobil, masaüstü ve tablet için duyarlı tasarım yapmak için iyidir.

Tek Zamanlı Dosya Yükleme

Single Page Application, ilk 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.

Ekstra Sorgu Yoktur

Sunucunun tüm sayfayı yeniden oluşturmak için zaman ve enerji harcamasına gerek olmadığından, SPA'lar genel olarak sunucularınız üzerindeki etkiyi azaltır - yani aynı miktarda trafik için daha az sunucu kullanarak paradan tasarruf edebilirsiniz.

Hızlı ve Duyarlı Ön Yüz

Yukarıda açıklanan daha hızlı performans süresinin yanı sıra, SPA'lar ayrıca geliştiricilerin ön ucu çok daha hızlı oluşturmasına izin verir.

Bunun nedeni, SPA'ların ayrıştırılmış mimarisi veya arka uç hizmetleri ile ön uç ekranının ayrılmasıdır.

Gelişmiş Kullanıcı Deneyimleri

SPA frameworkler, ilgi çekici, dinamik ve hatta hareketli kullanıcı deneyimleri oluşturmak için bu hizmetlerle uğraşmak için harikadır.

Single Page Application Örnekleri

• Gmail
• Google Maps
• Facebook
• Twitter
• Google Drive
• Paypal
• AirBNB
• NetFlix

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

Bir Single Page Application oluşturmak için AJAX ve HTML5'e ihtiyacınız vardır, bir SPA'nın istemci tarafındaki "ağır işleri" ele almaktan Angular, React ve Vue sorumludur.

Angular ve React (ve Ember ve Vue gibi diğerleri), geliştiricilerin SPA'ları verimli ve anlamlı bir şekilde oluşturmak için kullandıkları frameworklerdir.

Basitçe ifade etmek gerekirse, 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.

Bunu bir ev inşa etmek gibi düşünürseniz, kili karıştırabilir, tuğlaları kurutabilir, çeliği kendiniz çıkarabilir ve kalıplayabilirsiniz - ya da diğer insanların zaten tasarladığı tuğlaları ve boruları kullanabilir ve zamanınızı evinizi benzersiz yapan şeylere odaklayabilirsiniz.

Angular ve Single Page Application

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.

Angular, Single Page Application geliştirmek için harika bir seçenektir.

Çerçeveler 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 değecektir.

React.JS ve Single Page Application

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 Single Page Application

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.

ASP.NET (BLAZOR) ve Single Page Application

GitHub deposuna göre tarayıcıda WebAssembly ile çalışan C # / Razor ve HTML kullanan bir .NET frameworktür.

Microsoft, bu çerçevenin 2019'un başlarında yayınlandığını duyurdu ve şu anda sürüm 1.0'ın hazır olduğu görülmektedir.

Blazor kullanışlı bir araçtır çünkü TypeScript veya JavaScript'e gerek yoktur, tüm mantığı C # ile yazabilirsiniz.