Merhabalar herkese,

Canım sıkıldıkça bilgi birikimlerimi sizinle paylaşan yazılar yazıyorum birkaç gündür. Bunları bir beklentim olduğundan değil, yazılımcı arkadaşların daha fazla gelişmesini istediğimden yapıyorum. Aslında tek beklentim geliştirmek, daha teknolojiye yatkın bireylerin topluma kazandırılmasını sağlamak. Bundan sonra da karmaşık bir düzlemde girişten, ileri seviye konulara kadar paylaşımlar yapmak istiyorum. Bugünkü konu modern web geliştirmenin en önemli konularından SPA. Hazırsanız SPA'yı incelemeye başlayabiliriz. Daha önceki konularıma profilimden ulaşıp, incelemenizi tavsiye ederim. En son Docker(Konteynerleştirme) konusunu inceledik. Aşağıdaki linkten sizde inceleyebilirsiniz.

🚛 Docker nedir ? Ne için kullanılır ? İleri seviye programlama 💻




Artık hazırsak SPA'ya başlayabiliriz. SPA'nın açılımı Single Page Application. Tek sayfa uygulama demek. Terimler önemli ama buraya çok takılmıyoruz. SPA'nın ne işe yaradığını, ne avantajlar sağladığını basit anlamda sizinle paylaşmak istiyorum.

Çok önemli olan bir şeyi şimdiden söylemek istiyorum. Kesinlikle SPA teknolojilerinden bir tanesine geçiş yapın. Ancak geçiş yapmadan önce Javascript'i yalayıp, yutmanız gerekiyor. Bunlardan bir tanesine geçtiğinizde çok daha mutlu geliştirme süreçlerine başlayacağınızdan emin olabilirsiniz.

SPA Nedir ?

SPA belirttiğim gibi Single Page Application anlamına geliyor. Basit anlamda tek sayfa üzerinden sayfaları oluşturmakta denilebilir. Ne demek peki bu ? Şöyle anlatalım:

Normal standartlarda bir proje geliştirdiğinizde, sunucuya istekler atıp, karşılığında HTML çıktısını alırsınız. Bu HTML çıktısını tarayıcı alır ve kullanıcıya gösterir. Bunlar gerçekleşirken sunucuya birden fazla işlem yaptırılır ve sunucu tarafında veriler render edilerek kullanıcıya sunulur. Her sayfa değiştiğinde yani bir link'e tıkladığınızda bu işlemler tekrar eder. Örneğin:

5 sayfalı bir projeniz var. Bu sayfalar: Anasayfa, kayıt ol, giriş yap, profil, birde blog sayfası olsun. Kullanıcılarımız ilk giriş yaptığında anasayfayı görüyorlar. Anasayfa yüklenirken sunucuya istek atılıyor ve içerikler geliyor. Daha sonrasında kullanıcımız kayıt oldu ve giriş yaptı. Giriş yaptıktan sonra kullanıcının bilgilerini aldık. Şimdi sayfalar arasında geçiş yaptığımızda, her seferinde sunucudan sayfaları çektiğimiz gibi üyeyi de kontrol ettirmemiz gerekli ve bu verileri Front-End'e iletmemiz gerekiyor. Yani her routing işleminde süreç tekrar ediyor.



SPA'da ise süreç farklı demiştik. SPA'da ilk başta SPA dosyaları sunucudan talep ediliyor. Normal şartlarda render işlemi sunucuda yapılırken, SPA'da render işlemi kullanıcının bilgisayarında yani client'te yapılıyor. Sunucu sadece saf veriyi iletiyor ve işlemeyi client tarayıcısı kendisi yapıyor. Aynı sayfaların olduğunu var saydığımız projemizde kullanıcı giriş yaptıktan sonra veriler kayıt ediliyor SPA içeriside(State Management). Daha sonra sayfalar arasında kullanıcı geçiş yaparsa, tekrardan kullanıcının auth edilmesine gerek kalmıyor. Çünkü bunu SPA aklında tutuyor ve bir daha istek atılmıyor.

Biraz daha farklı yönden anlatalım. Normal şartlarda sayfalı bir ürün listeleme sayfası yaptığınızda, sayfalar arası geçişlerinde sayfadaki tüm elementler yenilenir. Sol taraftaki filtreleriniz, kategorileriniz, içerikleriniz yenilenir. Siz sayfa değiştirdiğinizde sunucuya istek atarsınız ve sayfada bulunan ürünler, filtreler, kategorileri yeniden talep edersiniz. Bu talep sonucunda sunucu verileri DB'den alır, render işlemini yapar, HTML çıktıyı size verir. Sizde client'te ekrana yazdırırsınız.

SPA'da ise sayfa değiştirme isteği attığınızda sadece yeni sayfadaki ürünleri talep edersiniz. Filtreleri, kategorileri tekrardan talep etmenize gerek kalmaz. Ek olarak geleneksel yaklaşımda tüm sayfa yeniden render edilirken, SPA'da sadece ürünlerin bulunduğu kısımlar render edilir. Yani soldaki filtreler, kategoriler alanları render edilmez çünkü buna gerek yoktur. Siz yeni sayfaya geçtiğinizde API'dan size JSON(XML'de olabilir) olarak veri gelir. Daha sonra SPA buradan aldığı verilerle ilgili elementleri oluşturup, sayfaya yansıtır.

Siz SPA'da gerektiği kadar bilgiyi alır, gerektiği kadar alanı render edersiniz. Bu sayede sunucunuzdan mükemmel derecede bir yük kalkar ve işlemler client'e yaptırılır. Şöyle düşünün:

Header, content, footer alanlarınız var. Sayfa değiştiğinde sadece content alanını güncellersiniz. Header ve footer alanlarının güncellenmesine gerek kalmaz.

Anlattığım şeyleri herkesin anlayabileceği şekilde dillendirmek istedim. Ancak yine de size kağıt üzerinde mantıklı gelmiyor olabilir. SPA'lara aşina olduktan sonra ve kullanmaya başladıktan sonra gerçekten faydaları çok büyük.



SPA'nın Avantajları

HIZ: SPA'lar hız konusunda çok ileri seviyedeler. İlk açılışından itibaren performans odaklı çalışan SPA'lar, geleneksel yaklaşımlara göre çok yüksek performanslılar.
CACHE: SPA sistemlerinin cache performansları çok yüksektir. Sayfaları cache ederek, açılan bir sayfayı tekrar açtığınızda bu işlem milisaniyeler sürer. İmzamda bulunan inchels.com bir SPA ürünüdür. Sayfalar arası geçiş hızlarını incelemenizi tavsiye ederim. Anasayfa'dan, iletişim sayfasına gidip tekrardan anasayfa'ya giderseniz anlayacaksınız ne demek istediğimi.
GELİŞTİRME: SPA'lar başlangıç aşamasında size zor gelebilir. Ancak iyice kavradığınızda geliştirme süreçlerinde performans olarak çok büyük artı sağlar. Ek olarak sürdürülebilirlik konusunda da çok büyük etkileri vardır.
MALİYET: Sunucudaki işlem yoğunluğunu büyük oranda düşürüp, işlemleri client tarafına gönderdiği için sunucu maliyetlerinizde düşüş çok fazla olur.
DEBUGGING: Modern tarayıcılarda bulunan konsollar üzerinden çok rahat bir şekilde debug işlemi gerçekleştirebilirsiniz. SPA'lar bu konuda büyük yardım sağlayacaktır size.




SPA'nın Dezavantajları

SEO: SPA'lar SEO konusunda yetersiz'di. Ama artık öyle değiller. İnternetteki dökümanlar eksik kaldığı için bu madde silinmemiş. Bende alıp, düzenlemek istedim. SPA'lar CSR(Client Side Rendering) mantığında çalıştığı için arama motorları kaynak veriyi göremez. SPA ile hazırlanmış bir projenin kaynak kodlarına baktığınızda hiçbir şey göremezsiniz. Çünkü sunucuda render edilmediği için içerik boştur. Bunun için SSR(Server Side Rendering) gerekir. SSR içinde örneğin React'ın NextJS yapısı vardır. Bu yapıyı kullanarak render işlemini sunucuda gerçekleştirip, SEO problemini çözebilirsiniz. Eğer sunucuda render edip, bu şekilde kullanacaksak SPA'nın ne anlamı kaldı ? derseniz, burada da performans artışları ve geliştirme süreçlerine artısını göz önünde bulundurmanız gerekiyor.

SEO maddesi gibi birkaç madde daha var internette döküman olarak ama geçerliliğini yitirmiş haldeler. Sadece SSR konusuna değinmek istediğim için bunu paylaşmak istedim.

SPA Örnekleri

Güncel olarak birkaç SPA teknolojisi mevcut(Ben daha fazlasını araştırmadım). Angular, React, Vue, Ember JS gibi birkaç araçtan bir tanesini inceleyerek, kendiniz için en uygun olanınızı seçmenizi tavsiye ederim. Her birinin kendine göre avantajları mevcut. En popüler ikili React ve Vue'dir.

Sözlerimi tekrardan SPA'ya geçmenizi önererek bitirmek istiyorum. Eksik kaldığım, anlatamadığım alanlar varsa çok özür diliyorum. Elimden geldiğinde açıklayıcı, anlatıcı bir yazı olmasını istedim. Yorumlarınız ve değerlendirmeleriniz için şimdiden teşekkürler