Her gün onlarca web uygulamasıyla etkileşime giriyoruz. Düşünün ki ben bu yazıyı yazarken siz de şu an bu yazıyı okurken, pek çok web uygulamasıyla etkileşime giriyoruz. Sosyal medya platformlarından e-ticaret sitelerine, blog sayfalarından bankacılıkta kullanılan sitelere kadar hepsi birer web uygulaması. Peki, bu uygulamalar nasıl bugünkü hallerine geldiler?

Web’in ilk günlerinde aslında her şey işleyiş olarak şimdiye göre çok basitti. Statik HTML sayfaları, birkaç resim ve biraz metin vardı. Ancak kullanıcıların beklentileri arttıkça, web teknolojileri de bu beklentilere ayak uydurmak zorunda kaldı. JavaScript motorlarının güçlenmesi, HTML5’in yeni özellikleri ve CSS3’ün gelişmiş stil yetenekleri, web uygulamalarını bambaşka bir boyuta taşıdı.

Bu evrim sürecinde, statik HTML sayfalarından PHP ve ASP gibi sunucu taraflı teknolojilere, oradan da React, Vue ve Angular gibi modern JavaScript framework’lerine uzanan heyecan verici bir yolculuk yaşandı. Bu gelişimin arkasındaki itici güç ise hep aynıydı: daha iyi performans ve kusursuz bir kullanıcı deneyimi sunma arzusu.

Bu arayış, web uygulamalarının mimarisini şekillendiren iki temel yaklaşımı ortaya çıkardı: MPA (Multi Page Application) ve SPA (Single Page Application). Şimdi, bu iki yaklaşımın tarihsel gelişimine göz atalım.

1990’ların ilk günlerinde, web sitelerinin çoğu Multi-Page Application (MPA) modelini kullanıyordu; her kullanıcı etkileşiminde yeni bir sayfa sunucudan tamamen yeniden yükleniyor ve Yahoo! ile Amazon gibi dev platformlar da bu yapıya dayanıyordu. 2000’lerin başlarına gelindiğinde, özellikle Internet Explorer 5 (1999) ile gelen XMLHttpRequest nesnesinin devreye girmesiyle birlikte, sayfayı yenilemeden veri alışverişi yapmak mümkün hâle geldi. Bu yöntem, 2005’te “AJAX” teriminin resmen ortaya atılmasıyla iyice popülerleşti. Microsoft’un Outlook Web Access (OWA) uygulaması, asenkron veri alışverişi sayesinde sayfanın tamamını yenilemeden kısmi güncellemeler yapabilen ilk örneklerden biri sayılabilir; bu yönüyle modern Single Page Application (SPA) yaklaşımının erken öncülerinden biri olarak kabul edilir.

2004’te Gmail’in lansmanı, SPA konseptini kitlelere tanıttı. 2006’da jQuery’nin gelişi ve 2007’de iPhone’un piyasaya sürülmesi, bu dönüşümü hızlandırdı. 2010’lar, modern SPA framework’lerinin altın çağı oldu: Backbone.js, AngularJS, React ve Vue.js gibi güçlü araçlar art arda sahneye çıktı.

Şimdi, bu tarihsel yolculuğun ardından, MPA’nın detaylarına geçelim ve modern web geliştirmenin bu önemli yapı taşını daha yakından inceleyelim.

MPA (Multi-Page Application)

MPA, geleneksel web uygulaması mimarisidir ve birden fazla HTML sayfasından oluşur. Her sayfa, sunucudan gelen farklı bir HTML dosyasıdır. Kullanıcı bir sayfadan diğerine geçtiğinde, tarayıcı sunucuya bir istek gönderir ve sunucu ilgili sayfanın HTML’ini oluşturarak tarayıcıya gönderir. Bu işlem, sayfanın tamamen yeniden yüklenmesine neden olur.

MPA’nın Çalışma Prensibi

MPA’da, her kullanıcı etkileşimi (sayfa geçişi, form gönderimi vb.) sunucuya bir istek gönderir. Sunucu bu isteği alır, gerekli işlemleri gerçekleştirir ve ilgili HTML sayfasını oluşturur. Bu HTML sayfası, sunucuda bulunan şablonlar (templates) kullanılarak dinamik olarak oluşturulur. Şablonlar, genellikle sunucu tarafı programlama dilleri (PHP, Python, Java vb.) kullanılarak hazırlanır ve veritabanından gelen verilerle birleştirilir. Oluşturulan HTML sayfası, tarayıcıya gönderilir ve tarayıcı bu sayfayı kullanıcıya gösterir. Kullanıcı başka bir sayfaya geçmek istediğinde, tüm bu işlem tekrarlanır.

Örneğin, bir e-ticaret uygulamasında, kullanıcı ürün listesi sayfasından bir ürünün detay sayfasına geçmek istediğinde, tarayıcı sunucuya bir istek gönderir. Sunucu, ürün detay sayfasının HTML’ini oluşturur ve tarayıcıya gönderir. Tarayıcı, yeni sayfayı yükler ve kullanıcıya gösterir. Bu işlem, her sayfa geçişinde tekrarlanır.

MPA’nın Avantajları:

1. SEO Dostu: Her sayfa ayrı bir URL’ye sahip olduğundan ve sunucu tarafında oluşturulduğundan, arama motoru botları içeriği kolayca tarayabilir ve indeksleyebilir.
2. İlk Yükleme Performansı: İlk sayfa yüklemesi genellikle daha hızlıdır, çünkü sadece gerekli HTML, CSS ve JavaScript yüklenir.
3. Sunucu Taraflı İşleme: Sunucu taraflı işleme, düşük performanslı cihazlarda bile iyi bir kullanıcı deneyimi sağlayabilir.
4. Geleneksel Analitik Araçlarla Uyumluluk: Sayfa görüntülemeleri ve kullanıcı davranışları geleneksel web analitik araçlarıyla kolayca takip edilebilir. Örneğin, Google Analytics gibi araçlar her sayfa geçişini ayrı bir olay olarak kaydeder, bu da kullanıcı yolculuğunu net bir şekilde izlemeyi sağlar. Ayrıca, ısı haritası araçları her sayfa için ayrı bir görsel oluşturabilir, böylece kullanıcıların sayfada nerede zaman geçirdiği kolayca anlaşılabilir. Bu özellik, site sahiplerine kullanıcı davranışları hakkında bilgiler sunar.
5. Daha Az Karmaşık Geliştirme: MPA’lar genellikle daha basit bir yapıya sahiptir ve daha az karmaşık JavaScript kodu gerektirir.

MPA’nın Dezavantajları:

1. Sayfa Yenileme: Her sayfa geçişinde tam sayfa yenileme gerektiğinden, kullanıcı deneyimi kesintiye uğrayabilir.
2. Sunucu Yükü: Her istek için sunucunun tam bir sayfa oluşturması gerektiğinden, yüksek trafikli sitelerde sunucu yükü artabilir.
3. Daha Yavaş Gezinme: Sayfalar arası geçişlerde tüm içeriğin yeniden yüklenmesi gerektiğinden, gezinme hızı yavaşlayabilir.
4. Veri Kullanımı: Her sayfa geçişinde tüm sayfa içeriğinin yeniden indirilmesi, özellikle mobil cihazlarda veri kullanımını artırabilir.
5. Daha Az Etkileşimli Kullanıcı Arayüzleri: Karmaşık, dinamik kullanıcı arayüzleri oluşturmak MPA’larda daha zor olabilir.

Single-Page Application (SPA)

SPA, adından da anlaşılacağı gibi, tek bir HTML sayfasından oluşan web uygulamalarıdır. Kullanıcı, uygulama içinde gezinirken sayfa yenilenmez, bunun yerine JavaScript kullanılarak sayfa içeriği dinamik olarak güncellenir. Bu, daha akıcı ve etkileşimli bir kullanıcı deneyimi sağlar. Bu yaklaşımda, ilk yüklemede tüm uygulama kodu (JavaScript, CSS) indirilir ve sonraki tüm sayfa değişimleri client-side routing ile yönetilir.

Bir SPA’nın temel yapısı şöyle görünür:

<!DOCTYPE html>
<html>
<head>
   <title>SPA Application</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/dist/styles.css">
</head>
<body>
   <div id="root"></div>
   <!-- Application Bundle -->
   /dist/vendor.js
   /dist/app.js
</body>
</html>

Bu yapı, SPA’nın çalışma prensibini açıkça gösterir:

1. HTML yapısı son derece basittir ve sadece bir kök element (<div id=”root”>) içerir. Tüm uygulama içeriği dinamik olarak bu kök element içerisinde oluşturulacaktır.
2. JavaScript dosyaları genellikle iki ana parçaya ayrılır:

• vendor.js: React, Vue veya Angular gibi framework’lerin kendisi ve üçüncü parti kütüphaneleri içerir
• app.js: Uygulamanın kendine özgü kodlarını içerir (bileşenler, rotalar, state yönetimi vb.)

3. Sayfa içeriğinde neredeyse hiç HTML bulunmaz çünkü tüm içerik JavaScript tarafından dinamik olarak oluşturulacaktır. Bu, MPA’ların sunucudan her seferinde tam HTML aldığı yaklaşımın tam tersidir.

4. Style dosyası (styles.css) genellikle webpack gibi bir bundler tarafından optimize edilmiş ve birleştirilmiş halde gelir.

Bu minimal yapı, SPA’nın “tek sayfa” konseptini mümkün kılar. Tüm navigasyon ve sayfa değişimleri bu tek HTML dosyası üzerinde JavaScript aracılığıyla gerçekleştirilir. Bu sayede klasik sayfa yenileme davranışı ortadan kalkar ve daha akıcı bir kullanıcı deneyimi sağlanır.

SPA’nın Doğuşu ve İhtiyaç

Şimdiye kadar MPA ve SPA dan bahsettik. Burada tarihsel yolculuk kısmında da görebileceğimiz gibi SPA’lar MPA’dan sonra hayatımıza girdi. Peki neden girdi? Hangi soruna çözüm buluyorda böyle bir ihtiyaç doğdu. Buraya kadar satır aralarında da az çok bunu belirtmiştik fakat şimdi biraz daha detayını girip netleştirelim. SPA konsepti, web uygulamalarının giderek daha karmaşık ve etkileşimli hale gelmesiyle ortaya çıkmıştır. MPA’ların bazı sınırlamaları, özellikle kullanıcı deneyimi açısından, SPA’ların geliştirilmesine yol açmıştır:

1. Kesintisiz Kullanıcı Deneyimi İhtiyacı: MPA’lardaki her sayfa geçişinde yaşanan yükleme süreleri ve sayfa yenilemeleri, akıcı bir deneyimi engelliyordu.
2. Mobil Cihazların Yaygınlaşması: Mobil internet kullanımının artmasıyla, daha hızlı ve daha az veri tüketen uygulamalara ihtiyaç duyuldu.
3. Zengin Kullanıcı Arayüzleri Talebi: Kullanıcılar, masaüstü uygulamalara benzer, hızlı tepki veren ve dinamik web uygulamaları beklemeye başladı.
4. AJAX Teknolojisinin Gelişmesi: Asenkron JavaScript ve XML (AJAX) teknolojisinin gelişmesi, sayfa yenilemeden veri alışverişi yapılmasını mümkün kıldı.
5. JavaScript Frameworklerinin Ortaya Çıkışı: Angular, React ve Vue gibi modern JavaScript frameworkleri, SPA geliştirmeyi daha kolay ve etkili hale getirdi.

SPA’ların çalışma prensibi şu şekildedir:

1. Uygulama ilk yüklendiğinde, tüm gerekli HTML, CSS ve JavaScript dosyaları tarayıcıya yüklenir.
2. Kullanıcı, uygulama içinde bir bağlantıya tıkladığında, tarayıcı sunucuya bir istek göndermek yerine, ilgili içeriği JavaScript kullanarak dinamik olarak günceller.
3. Sunucudan yalnızca gerekli veriler alınır. Bu veriler, JavaScript kullanılarak işlenir ve sayfa içeriği güncellenir.
4. Sayfa içeriği güncellenirken, tarayıcının adres çubuğundaki URL değişmez. Bu, kullanıcının geri ve ileri düğmelerini kullanarak uygulama içinde gezinmesini sağlamak için bir zorluk oluşturabilir. Bu sorunu çözmek için, HTML5 History API veya URL hash kullanılarak sayfa URL’leri simüle edilir.

Örneğin, bir e-posta uygulamasında, kullanıcı gelen kutusundan bir e-postayı açmak istediğinde, SPA sunucudan yalnızca ilgili e-postanın verilerini alır ve sayfayı dinamik olarak günceller. Kullanıcı, e-postalar arasında gezinirken sayfa yenilenmez, bunun yerine içerik dinamik olarak değiştirilir.

SPA’nın Avantajları:

1. Hızlı ve Akıcı Kullanıcı Deneyimi: Sayfa yenileme olmadığından, kullanıcı deneyimi daha akıcı ve masaüstü uygulamalara benzer hale gelir.
2. Azaltılmış Sunucu Yükü: Sunucu sadece veri sağladığından, sunucu yükü azalır ve ölçeklenebilirlik artar.
3. Çevrimdışı Çalışma Kabiliyeti: Service Workers kullanılarak, SPA’lar çevrimdışı çalışabilir hale getirilebilir (Progressive Web Apps — PWA).
4. Zengin Etkileşimli Arayüzler: Karmaşık ve dinamik kullanıcı arayüzleri oluşturmak daha kolaydır.
5. Mobil Performans: İlk yüklemeden sonra daha az veri transferi gerektiğinden, mobil cihazlarda daha iyi performans sağlar.

SPA’nın Dezavantajları:

1. İlk Yükleme Süresi: Tüm uygulama kodunun başlangıçta yüklenmesi gerektiğinden, ilk yükleme süresi uzayabilir.
2. SEO Zorlukları: JavaScript tarafından dinamik olarak oluşturulan içerik, arama motoru botları tarafından her zaman doğru şekilde indekslenemeyebilir.
3. Tarayıcı Geçmişi Yönetimi: URL ve tarayıcı geçmişi yönetimi ek çaba gerektirir.
4. Bellek Kullanımı: Uzun süreli kullanımda, özellikle eski cihazlarda bellek sızıntıları oluşabilir.
5. Geliştirme Karmaşıklığı: SPA’lar genellikle daha karmaşık bir kod yapısına sahiptir ve daha fazla JavaScript bilgisi gerektirir.

MPA mı, SPA mı?

Buraya kadar ikisininde ne olduğundan, avantajlarından ve dezavantajlarından bahsettik. Peki farzedelim sıfırdan bir uygulama yapacağız? Hangisini tercih etmeliyiz? Bu seçimi yapmak, projenin gereksinimlerine, hedef kitlesine ve teknik kısıtlamalara bağlıdır. Seçim yaparken dikkat edilmesi gereken faktörler ve bazı senaryolar:

1. İçerik Odaklı vs. Etkileşim Odaklı:

• MPA Uygun: Bloglar, haber siteleri, e-ticaret katalogları gibi içerik ağırlıklı siteler için MPA daha uygundur. 
• SPA Uygun: Sosyal medya uygulamaları, e-posta istemcileri, proje yönetim araçları gibi yüksek etkileşimli uygulamalar için SPA tercih edilebilir. 

2. SEO Önceliği:

• MPA Uygun: SEO’nun kritik olduğu projeler için MPA daha avantajlıdır. 
• SPA Uygun: SEO’nun çok önemli olmadığı veya Server-Side Rendering (SSR) teknikleriyle desteklenebilecek projeler için SPA kullanılabilir. Örneğin, bir şirket içi dashboard uygulaması SPA olarak geliştirilebilir.

3. Hedef Kitle ve Cihaz Çeşitliliği:

• MPA Uygun: Geniş bir kullanıcı tabanına hitap eden ve çeşitli cihazlarda (eski mobil cihazlar dahil) çalışması gereken projeler için MPA daha uygundur. Örneğin, bir kamu hizmet portalı MPA olarak geliştirilebilir.
• SPA Uygun: Modern cihazları kullanan, teknolojik açıdan daha gelişmiş bir hedef kitleye yönelik uygulamalar için SPA tercih edilebilir. Örneğin, bir web tabanlı grafik tasarım uygulaması SPA olarak geliştirilebilir.

4. Geliştirme Süresi ve Bütçe:

• MPA Uygun: Daha hızlı geliştirme süreci ve daha düşük başlangıç maliyeti gerektiren projeler için MPA tercih edilebilir. Örneğin, küçük bir işletmenin kurumsal web sitesi MPA olarak geliştirilebilir.
• SPA Uygun: Uzun vadeli, karmaşık ve sürekli geliştirilecek projeler için SPA daha uygun olabilir.

5. Uygulama Karmaşıklığı:

• MPA Uygun: Görece basit, bilgi sunumu ağırlıklı uygulamalar için MPA tercih edilebilir.
• SPA Uygun: Karmaşık iş mantığı, zengin kullanıcı etkileşimleri ve gerçek zamanlı güncellemeler gerektiren uygulamalar için SPA daha uygundur. Örneğin, bir borsa takip ve analiz uygulaması SPA olarak geliştirilebilir.

6. Güncelleme Sıklığı:

• MPA Uygun: İçeriği sık güncellenen ancak yapısal değişikliklerin az olduğu projeler için MPA kullanışlı olabilir.
• SPA Uygun: Kullanıcı arayüzünün ve işlevselliğinin sık sık değiştiği, sürekli yeni özellikler eklenen projeler için SPA daha uygun olabilir.

7. Offline Çalışma İhtiyacı:

• MPA Uygun: Çoğunlukla online kullanılacak ve offline özellikler gerektirmeyen projeler için MPA yeterli olabilir. Örneğin, bir online rezervasyon sistemi MPA olarak geliştirilebilir.
• SPA Uygun: Offline çalışma özelliği gerektiren veya Progressive Web App (PWA) olarak geliştirilmesi planlanan projeler için SPA tercih edilebilir. Örneğin, bir saha satış uygulaması SPA ve PWA teknolojileri kullanılarak geliştirilebilir.

MPA ve SPA arasında seçim yaparken projenin spesifik ihtiyaçlarını, hedef kitlesini ve teknik gereksinimlerini dikkatle değerlendirmek önemlidir. Bazı durumlarda, hibrit bir yaklaşım benimsemek ve uygulamanın bazı bölümlerini MPA, bazı bölümlerini SPA olarak geliştirmek de mümkün olabilir.

Sonuç olarak, SPA ve MPA arasındaki seçim, uygulamanın hedef kitlesine ve performans gereksinimlerine göre değişiklik göstermektedir. SPA’lar, kullanıcı deneyimini geliştiren hızlı ve dinamik bir yapıya sahipken, MPA’lar çok yönlü sayfa yönetimi ve SEO avantajlarıyla öne çıkmaktadır. Bu bağlamda, uygulama türü seçiminde projenin ihtiyaçlarının dikkatlice değerlendirilmesi ve modern teknolojilerle desteklenmesi kritik bir öneme sahiptir.

İyi çalışmalar.

• Genel