single page application

• bu kavramlara uzak ve ne olduğunu öğrenmek isteyen arkadaşlar için umarım güzel bir yazı olur.
  
  spa : single page application;
  
  klasik yöntemde bir internet sayfasına girdiğimizde biz uzaktaki bir sunucuya istek atıp o sayfanın html'ini istemiş oluruz. mesela www.eksisozluk.com sayfasına girdiğimizde eksisozluk sunucuları bize o sayfanın html'ini hazırlıyıp gönderir. daha sonra sağ üstte (üye olanlar görebilir) ben mesaj veya olay sayfalarına gitmek istediğimizde biz server'a tekrar bir istek atıp o sayfaya gitmek istediğimizi belirtiriz, mesela ben sayfasına gitmek istediğimizde eksisözlük sunucları bize ben sayfasını tekrar html'ni hazırlayıp gönderir. bu tür çalışma prensibine server side render da denilebilir. yani her istek yeni bir html sayfasının server'dan render edilip gönderilmesidir.
  
  spa çalışma mantığında ise olaylar şöyle gelişiyor.
  örnek olarak twitter.com referans alabiliriz. biz twitter.com girmek istediğimizde twitter sunucuları bize klasik yöntemdeki gibi istediğimiz sayfayı kendi sunucusundan render edip gönderiyor. yani twitter.com u kendi serverında hazırlayıp html ini gönderiyor, sonrasında biz başka bir sayfaya gitmek istediğimizde örnek olarak sol üst menüdeki home/natifications/messages sayfalarından notifications a gitmek istediğimizde ise tekrar sunucudan twitter.com/i/notifications adresini istemiyor, evet arkadaşlar burası önemli, tekrar sunucudan bu sayfayı istemiyor, peki biz bu sayfayı nasıl görüyoruz bu sayfa nasıl hazırlanıyor ?
  
  arkadaşlar tarayıcıların ve javascript sürümlerinin ilerlemesiyle artık javascript'i bir dil olarak çoktandır kullanabiliyor, tarayıcı ve server'da javascripti bir dil gibi kullanabiliyoruz, bunu farkeden yazılım geliştiriciler biz bu sayfaları neden javascript ile hazırlamıyoruz diye düşünmüşler. sonra demişlerki biz bu ilk html sayfasını serverdan çekelim sonra kalanlarını javascript kullanarak halledelim demişler. yani çok basit bir şekilde açıklayacak olursak sen twitter.com girdiğinde önce sitenin gerekli tüm javascript dosyalarını da beraber getiriyor. bu javascript dosyalarını içinde diğer sayfalarda hazır geliyor. yani biz javascript e diyoruz ki home route'da şu domları (yani şu element taglarıni getir) diğer route'larda ise ne istediysek onu ekrana bastır diyoruz. tabi burada dom kavramını yani html element taglarını felan iyi algılamak geriyor.
  
  peki şimdi diyeceksiniz ki arkadaş böyle bir sistemde alt sayfaların tüm dataları da birlikte gelmesi gerekiyor bu nasıl olacak ? arkadaşlar burada (bkz: xmlhttprequest) daha geniş bir kavramı olan ajax denilen kavram işin içine giriyor. peki ne oluyor bu durumda ? biz javascirpt'e diyoruz ki sen twitter.com/i/notifications sayfasının taslağını hazırla ben sana içine dökmen gereken datayı uzak sunucudan çekip göndereceğim. ve bu şekilde sayfa yenilemeden xmlhttprequest sayesinde datalarımızı da javascript le hazırladığımız sayfanın içine basabileceğiz. yani biz yeni bir html sayfası değilde sadece data çekmiş olduk sunucudan. bu şekilde sayfalar arası gezerken serverdan html sayfaları çekmek yerine javascript ile kendi sayfalarını hazırlayan web uygulamalarına single page application deniyor.
  
  artılar ~ eksiler
  tüm projenin tarayıcıya inip ve orada render edilmesi sonucu malasef ilk açılışta bir yavaşlama söz konusu olacaktır fakat uygulamamızın ilk sayfasını serverdan render edip gönderebilirsek bu durum sorun olmaktan çıkacaktır.
  tabi bu yavaş açılma sadece ilk sayfa için geçerli bir durum uygulamamıza bir kere girdikten sonra diğer sayfalarda dolaşmaya başladığımızda klasik yönteme göre gözle görülür bir hız artışı göreceksiniz, sayfa yenilemeden uygulama içinde gezinmek süper hızlı olacaktır bundan sonra.
  uygulamamızı javascript ile yazdığımızdan dolayı artık tarayıcıya tam anlamıyla hükmediyoruz ve kullanıcılar için harika arayüz ve etkileşim sunuyoruz.
  maalesef seo anlamında yetersiz kalıyoruz ama bu spa ların, teknolojinin sorunu değil google'un problemi malasef sayfayı tam anlamıyla cashleyemediği için sağlıklı bir seo altyapısı oluşmuyor.
  
  artık günümüzde trend bu yönde insanlar,firmalar uygulamalarını spa olacak şekilde geliştiriyor. bunun için hali hazırda react,vue ve angular başta olmak üzere bir çok kütüphane&framework var. bu durum beraberinde backend ve frontend alanlarının daha da keskinleşmesine sebep oldu. biz frontend de spa mızı yazarken backend den gelen dataları kullanmaya başladık. web teknolojilerinin eksenini kaydırıp klasik yöntemden daha farklı bir geliştirme konseptine adapte olduk.
  
  bu teknoloji yada trendler sürekli değişiyor ayak uydurmakta fayda var. şimdilik anlatacaklarım bu kadar. keep calm and write code, hadi bye.