• gmail, google docs vb gibi tek web sayfasi uzerinden tum ihtiyaclarinizi karsilayan web sitelerine verilen ad...

    genelde css ve ajax'in dibine vurulmus olan masaustu uygulamalarina benzeyen web siteleridir...
  • (bkz: asp.net mvc 4)
    (bkz: https://www.youtube.com/watch?v=vs8-l2uo1cq)
  • dezavantajlarını şöyle sıralamış.
    https://adamsilver.io/…of-single-page-applications/

    yazının içinde yönlendirdiği linklerden birisi de: twitter'ın spa'dan vazgeçip eski geleneksel methoda dönerek yapmış olduğu performans artışı.

    https://blog.twitter.com/…rmance-on-twittercom.html
  • "tek sayfalı bir uygulama" olarak çevirdim al.
    bir sunucudan yeni sayfaların tamamını yüklemek yerine kullanıcının geçerli sayfayı yeniden yazarak etkileşime giren bir web uygulaması veya web sitesidir. bu yaklaşım, uygulamanın daha çok bir masaüstü uygulaması gibi davranıp kalmasını sağlayarak ardışık sayfalar arasındaki kullanıcı deneyiminin kesilmesini önler. bir spa'da gerekli tüm kodlar (html, javascript ve css), tek bir sayfa yüklemesiyle alınır veya uygun kaynaklar dinamik olarak yüklenir ve gerektiği gibi kullanıcı işlemlerine göre sayfaya eklenir.
  • medium'da geleneksel mpa* yöntemi ile detaylı bir karşılaştırması olan güncel ve güzel bir makaleye konu alan yöntem/metottur.
  • 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.
  • arkadaşlar bu bir tek sayfalık internet sitesi hedesi değildir, yanılgıya düşmeyelim. single page dediği nane; tarayıcının f5 refresh yapmadan ya da başka bir adrese (url) yönlenmeden (navigate) aynı adres üzerinde komple siteyi gösterebilmesidir.

    ha diyeceksiniz ki ben şuna tıkladığımda adres değişiyor; işte o da modern tarayıcıların bir mucizesi, aslında adres falan değişmiyor hala aynı sayfadasınız (single page), sadece adres, istemci tarafında modifiye ediliyor.

    bazı siteler bu değişen adresleri kopyalayıp yeni bir tarayıcı sekmesine yapıştırdığınızda aynen sitenin o bölgesini getirebilirken bazı siteler de bu yetenekten mahrum olup şak diye daha üst bir sayfaya ya da direk ana sayfaya yönlendirmektedir. angularjs falan yeteneklidir, tüm detayları verilen adresten geri yükleyebilir.
hesabın var mı? giriş yap