Single Page Application Nedir?

Her şeyden önce, büyük olasılıkla zaten düzenli bir single page application (tek sayfa uygulaması) kullanıcısı olabilirsiniz. Single Page Application (SPA), kullanıcılarınız 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ı SPA örnekleri vardır. Bunlara ek olarak pek çok yer daha akıcı, ölçeklenebilir ve daha deneyim odaklı bir alan oluşturmak SPA kullanımı her geçen gün artış göstermektedir.

Single Page Application 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 pek fazla değişiklik olmadığını fark edeceksiniz.

Single Page Application, her tıklamayla yalnızca ihtiyacınız olanı gönderir. 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önetimi, kullanıcılar için yükleme süresini daha hızlı hale getirir. Bir sunucunun göndermesi gereken bilgi miktarını çok daha az ve çok daha uygun maliyetli hale getirir. Bir anlamda karşılıklı kazan-kazan durumu söz konusudur.

Single Page Application Mimarisi

Single Page Application, 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. Bu noktada farklı bir yaklaşım söz konusudur.

Bu yaklaşım, 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 sitede çok sayıda tekrar eden içerik vardır.

Bazıları kullanıcı nereye giderse gitsin (header, footer, logo, menü vb.) aynı kalır. Bazıları yalnızca belirli bir bölümde (başlıklar vb.) ve blog gibi birçok yinelenen düzen ve şablon vardır. Single Page Application bu tekrardan yararlanılır.

Şimdi sitenizde bir evin ve bir ağacın resmi olduğunu düşünelim. Geleneksel çok sayfalı siteler, sunucudaki sizin için resmin tamamını boyar ve tarayıcınıza gönderir. SPA ise site için sayılarla boyama kılavuzları verir ve ardından şablonu doldurmak için doğru boyayı (veri ve içerik) kullanır.

Her iki durumda da aynı ağacı görürsünüz. Ancak yeni içerik talep ettiğinizde SPA hızı devreye girer. Sonraki tuşuna tıklamak, sonuçları filtrelemek veya bir postayı açmak gibi durumlarda işlem değişir. Geleneksel sitede tekrar istek gönderilir ve yeniden işlem gerçekleştirilir.

SPA ile sunucu ise size yeni bir ağaç ve boya için güncellenmiş talimatlar gönderir. Boyama işinin (sayfa oluşturma) sunucudan istemciye (siz) aktarılmasıyla, sayfanın tamamı yeniden yüklemeden geçmek yerine dinamik olarak yeniden yazılabilir.

Single Page Applications Avantajları

Single Page Applications çözümlerini iyileştirilmiş uygulama performansı, tutarlılığı, azaltılmış geliştirme süresi ve altyapı maliyetleri gibi birçok faydası vardır. Sunumu içerik ve verilerden ayıran geliştirme ekipleri, genel çözüm için entegre olmaya devam ederken farklı hızlarda çalışırlar.

1. Tek Seferlik Yükleme

Single Page Application, ilk sayfa yüklemesinden sonra, sunucu size artık HTML göndermez. Çünkü hepsini en başından indirmiş olursunuz. Sunucu size bir shell sayfası gönderir. Bunun karşılığında kullanmış olduğunuz tarayıcınız UI oluşturur.

Ardından, tıkladığınız SPA veri ve biçimlendirme isteklerini geri gönderir. Sunucu ihtiyaç duyulan hammaddeleri geri çeker ve tarayıcınız bunu alır. Tam sayfayı yenilemeye gerek kalmadan parçaları değiştiren güncellenmiş bir kullanıcı arabirimi oluşturur.

2. Ekstra Sorguya Gerek Olmaması

Single Page Application ile elde edilen hızlı değiştirilebilme yeteneği, Single Page Application'ı yüksek oranda gezinilen ve yinelenen şablonlar kullanan sayfalarda inanılmaz derecede kullanışlı hale getirmektedir. En önemli avantajlarından birisi budur.

Sunucunun tam çizimini yapmak için zaman ve enerji harcamasına gerek olmadığından, SPA genel olarak sunucularınız üzerindeki etkiyi azaltır. Yani aynı miktarda trafik için daha az sunucu kullanarak paradan tasarruf edebilmeniz mümkündür.

3. Hızlı ve Esnek Yapı

Daha hızlı performans süresinin yanı sıra Single Page Application, ayrıca geliştiricilerin ön ucu çok daha hızlı bir biçimde oluşturmasına izin verir. Bunun nedeni, SPA'nın ayrıştırılmış mimarisi veya arka uç hizmetleri ile ön uç ekranının ayrılmasıdır.

İş açısından kritik olan birçok işlev, arka planda çok fazla değişmez. Müşterilerinizin oturum açma, kayıt olma, satın alma ve siparişleri izleme şekli zaman zaman görünüşünü veya sunumunu değiştirebilse bile arkasındaki mantık ve veri düzenlemesi oldukça sabittir.

Benzer şekilde, ham içeriğiniz ve verileriniz aynı kalabilir. Ancak nasıl görüntülemek istediğiniz farklıdır. Arka uç mantığını ve verilerini sunulma biçiminden ayırarak, onu bir hizmete dönüştürmüş olursunuz. Geliştiricilerin birçok farklı ön uç yolu oluşturması mümkündür.

4. Gelişmiş Kullanıcı Deneyimi

Giderek artan daha fazla işlevsellik, bağımsız olarak güncellenebilen modüler hizmetler olarak inşa edildikçe, bunların nasıl görüntülendiğini ve kullanıldığını denemek daha kolay hale gelir. SPA çerçeveleri, ilgi çekici, dinamik ve hatta hareketli kullanıcı deneyimleri oluşturmak için harikadır.

Ayrıca, pek çok insan sadece belirli bir programlama dilinde geliştirme yapmayı sever. Birçok Single Page Application framework oluşturma işleminde JavaScript kullanılır. API kullanılarak farklı dillerde geliştirilen arka uç hizmetlerine entegrasyon mümkündür.