Tek Sayfalı Uygulamalar ve Çok Sayfalı Uygulamalar: Web Uygulamalarının Savaşı

Tek sayfalı web uygulamaları neredeyse yirmi yıldır var, ancak popülerlikleri nispeten yeni. Bunun nedeni teknolojik gelişmedir: mevcut teknoloji, geliştiricilerin eskiden büyük dezavantajlar olan şeyleri uygulanabilir çözümlere ve hatta faydalara dönüştürmesine olanak tanır. Bu yazıda, tek sayfalı uygulamalar ile çok sayfalı uygulamalar arasındaki farklardan ve işletmeniz için hangisini seçmeniz gerektiğinden bahsedeceğiz.

Tek sayfa uygulaması (SPA) ve çok sayfalı uygulama (MPA) savaşı göründüğünden daha karmaşıktır. Her tür web uygulamasının tüm artılarını ve eksilerini yakından inceleyelim.

İçindekiler:

1. SPA nedir?
2. SPA'lar nasıl inşa edilir?
3. SPA'nın Avantajları
4. SPA'nın Dezavantajları
5. MPA nedir?
6. MPA'nın Avantajları
7. Çok sayfalı web uygulamalarının dezavantajları
8. SPA vs MPA - Hangisini seçmeli?
9. Aşamalı web uygulamaları
10. Bir SPA ve MPA geliştirmenin maliyeti nedir?

SPA nedir?

Layman'ın terimleriyle, tek sayfalık bir uygulama, içeriğin sayfayı yeniden yüklemeye gerek kalmadan dinamik olarak yüklendiği bir web uygulamasıdır. Örneğin, Facebook veya Twitter'daki özet akışınızı veya Gmail web uygulamasındaki e-postanızı kontrol ederken, ağırlaştırıcı bir sayfa yükleme ekranı görmüyorsunuz. Sekmeler arasında gezinir ve geçiş yaparsınız ve içerik anında yüklenir.

Tek sayfalık bir web uygulamasında, sayfayı açtığınızda tüm HTML ve CSS bir kez yüklenir. Bundan sonra, sitede dolaşırken yalnızca yeni veriler yüklenir; sayfanın kendisi yeniden yüklenmiyor. Bu, kullanıcı deneyimini daha sorunsuz hale getirir - tek bir şey için bekleme süresi çok azdır veya hiç yoktur ve sayfalar anında yükleniyormuş gibi görünür. 100 milisaniyelik bir gecikmenin 1,6 milyon doların üzerinde satış kaybına yol açabileceği bir dünyada, bu, işletme sahiplerinin görmezden gelemeyeceği bir sorundur.

SPA'lar nasıl inşa edilir?

Tek sayfalık uygulamalar JavaScript çerçeveleriyle oluşturulur ve geliştiriciler, çerçeveyi kişisel tercihler de dahil olmak üzere bir dizi faktöre göre seçer. Mind Studios'taki geliştiricilerimize göre bugünün büyük üç JavaScript çerçevesi:

Çoğu iyi ön uç geliştiricisi birden fazla çerçeve bilir. Birçoğu React, Angular, Vue ve ardından bazılarını biliyor.

Tek sayfalık uygulamaların avantajları

Tek sayfalık uygulamaların avantajları çoktur, bu nedenle çeşitli dezavantajlara rağmen bu kadar popüler hale geldiler. Aslında, mevcut teknoloji ile bu dezavantajlar bir dereceye kadar ele alınabilir ve bu da SPA'ları giderek daha fazla web sitesi sahibinin tercihi haline getirir. SPA'ların artılarıyla başlayacağız , sonra eksilerini ele alacağız .

1. Hızlı sayfa yükleme

Aktif olarak yeniden yüklemeye gerek kalmadan sayfalar arasında hızlı ve sorunsuz geçiş, SPA ile MPA arasındaki savaşın en büyük silahı haline geldi. Dinamik yükleme - içeriği bir kerede değil, küçük parçalar halinde yüklemek - yanıt sürelerini büyük ölçüde kısaltarak kullanıcı deneyimini iyileştirir.

SPA'lar içerik işlemeyi kısmen sunuculardan tarayıcıya taşır. Bu şekilde, tarayıcının sunuculara istek göndermesine ve yanıt beklemesine daha az ihtiyaç duyulur. Bu sayede SPA'lar bir dereceye kadar çevrimdışı bile çalışabilir.

2. Ön ucu ve arka ucu ayırın

SPA'ların diğer avantajlarından biri, ön uç ve arka ucun sıkıca bağlandığı MPA'ların aksine, bir SPA'da arka uç üzerinde minimum etki ile ön ucu tek başına yeniden yazabilmenizdir. Bu, SPA'ları güncellemeyi daha kolay, daha hızlı ve daha ucuz hale getirir. Ancak ayrı ön ve arka uçların daha büyük bir avantajı, bir mobil uygulama oluşturmaya karar verdiğinizde/olduğunda bir mobil uygulama için bir SPA arka ucunu kullanabilmenizdir. Bir MPA ile, bir mobil uygulamanın arka ucunu sıfırdan değil, önemli ölçüde yeniden oluşturmanız gerekir.

3. Geliştirme ve bakım

Bir SPA inşa etmek, bir MPA oluşturmaktan daha az zaman alır. Mutlaka daha kolay değil - bir SPA için teknoloji yığını bir MPA'dan biraz daha büyüktür - ancak kod yazmaya ve her sayfa için ayrı UI/UX tasarımları oluşturmaya gerek olmadığından daha az zaman alır.

Bunun yanı sıra, SPA'ların avantajları arasında en popüler üç JavaScript çerçevesi için yerel geliştirici araçları sayesinde büyük ölçüde basitleştirilmiş Chrome hata ayıklaması bulunur.

Şimdi dezavantajlara geçelim.

Tek sayfalık web uygulamalarının dezavantajları (ve bunların üstesinden nasıl gelinir)

Unbound tarafından 2018 araştırmasına göre, kullanıcıların neredeyse %70'i sayfa yükleme hızının bir siteden satın alma veya satın almama kararlarını etkilediğini söylüyor. Bununla birlikte, SPA'ların dezavantajları özellikle büyük çevrimiçi mağazalar için elverişsiz olduğundan, çoğu pazar yeri daha yavaş DKA'lar olarak inşa edilmiştir. Geliştiriciler, çevrimiçi mağaza sahiplerinin web sitelerini SPA olarak oluşturmasını engelleyen sorunları çözmek için SPA geliştirmeyi zorluyor. Tek sayfalık uygulamaların dezavantajları ve günümüz teknolojisi ile bunların nasıl aşılabileceği aşağıda belirtilmiştir.

1. Devre Dışı JavaScript

Tek sayfa uygulamaları JavaScript çerçeveleri kullanılarak geliştirilir - React, Vue, Angular ve bazen diğerleri. Bu nedenle, kullanıcılar tarayıcılarında JavaScript'i devre dışı bırakırsa boş bir sayfa görürler. Bu sorun, sunucu tarafı oluşturma (SSR) kullanılarak kısmen çözülebilir; bu durumda uygulama tarayıcı yerine sunucuda işlenir. Mükemmel bir çözüm değil, ancak bir dereceye kadar işe yarıyor. Neyse ki, ilk etapta çok fazla kullanıcı tarayıcılarında JavaScript'i devre dışı bırakmıyor.

2. Arama motoru optimizasyonu

Tek sayfalık web uygulamaları içeriği AJAX aracılığıyla yüklediğinden, bir arama botunun aldığı şey, esasen bir DOM (Belge Nesne Modeli) öğesidir - içeriksiz bir web uygulaması yapısı. Yani hemen elde edilecek hiçbir anahtar kelime yok.

Bu, sonuç olarak, SPA'lar için düşük arama motoru sıralamalarına yol açar. Ve bir sitenin kullanıcılar tarafından bulunabilmesi için üst sıralarda yer alması hayati önem taşıyorsa, uygun SEO bir zorunluluktur . Bu nedenle, bu tür web siteleri için geliştiriciler genellikle çok sayfalı uygulamalar önerir.

Ancak, SEO sorunu, sunucu tarafı oluşturma ile çözülebilen başka bir sorundur. Sunucu tarafı oluşturma, kullanıcı sayfada gezinirken içerik yüklemek yerine (istek üzerine) tam olarak yüklenmiş bir sayfayı sunucuda görüntülendiği gibi gönderir. Bu, tarayıcıların SPA'larla daha iyi çalışmasına olanak tanır.

Web uygulamanızın SEO oyununu geliştirmenin bir başka yolu, geliştiricilerinizin siteyi, arama botlarının tüm web sitesini kapsamasına yardımcı olmak için web sayfaları arasında gezinmek için uygun etiketlerle kodlamasıdır.

3. Ölçeklenebilirlik

SPA'lar, yeni özellikler ve tamamen yeni işlevler ekleme açısından çok ölçeklenebilir değildir. Bunun nedeni, her şey tek bir sayfa olarak yazılırken, yeni özellikler eklemek kodu bozabilir, bu nedenle geliştiricilerin dikkatli olması gerekir. Ayrıca, çok fazla ekstra kod, tüm kod tabanı hemen yüklendiğinden, tek sayfanızın çok yavaş yüklenmesine neden olabilir.

Neyse ki , JavaScript çerçeveleri, bazıları tarafından yığın tembel yükleme paketleri olarak da bilinen kod bölme yönlendiricilerine sahiptir . Bunlar, bir sitenin daha hızlı yüklenmesini sağlamak için kodun parçalar halinde (dolayısıyla adı) yüklenmesine izin verir.

4. Güvenlik endişeleri

Tek sayfalı uygulamalar, siteler arası komut dosyası çalıştırma (XSS) saldırılarına açıktır. Bu, bilgisayar korsanlarının JavaScript tabanlı bir web uygulamasına kötü amaçlı kod eklemesine izin veren bir güvenlik açığıdır. Yine de React.js yerleşik XSS korumasına sahiptir ve deneyimli bir web geliştiricisinin bir web uygulamasını her türlü saldırıya karşı korumasının başka yolları da vardır.

5. Navigasyon

Tek sayfalık bir web uygulaması tam olarak budur - tek bir sayfa. Bu, tüm site için yalnızca bir URL olduğu anlamına gelir. Bu, gezinmeyi zorlaştırır - ileri ve geri düğmeleri genellikle çalışmaz ve içeriğin belirli bir bölümüne bağlantı vermek imkansızdır.

Bu sorun bir API ile çözülebilir. Dinamik değerlere yol önekleri ekleyen ve genellikle başlıklar olmak üzere sayfanın belirli bölümlerine bağlantı vermeyi mümkün kılan API'ler vardır.

MPA nedir?

Çok sayfalı bir web uygulaması, geleneksel bir web sitesi olarak kabul ettiğimiz şeydir - bir sayfadan diğerine geçerken site tamamen yeniden yüklenir. Bu tür bir web sitesinde, özellikle bağlantı hızınız yavaşsa ve medya içeren birden çok sayfayı ziyaret etmeniz gerekiyorsa, yükleme bazen can sıkıcı olabilir.

Çok yakından bakmadan, DKA'ların geçmişin bir kalıntısı olduğu ve yakında tamamen yok olacağı görünebilir. Elbette, daha hızlı sayfa yükleme satışlar için her zaman daha iyidir. Ancak, bu o kadar basit değil ve bir MPA'nın daha iyi bir seçim olduğu durumlar vardır .

Çok sayfalı uygulamaların avantajları

1. Navigasyon

Çok sayfalı web uygulamalarının en büyük avantajı, geleneksel gezinmeye izin vermeleridir. Bununla, bir MPA'nın her sayfasının, kullanıcıların kopyalayıp yapıştırabileceği, yer imlerine ekleyebileceği, paylaşabileceği vb. kendi URL'si olduğunu kastediyoruz. Tarayıcılardaki geri ve ileri düğmeleri de sorunsuz çalışır. Bir SPA'da, ayrı URL'ler oluşturmak ve kullanıcıların düğmeler aracılığıyla iç "sayfalar" arasında ileri ve geri atlamalarını sağlamak için geliştiricilerinizin bir API kullanması gerekir.

2. Ölçeklenebilirlik

İşte çok sayfalı web uygulamalarının yadsınamaz bir avantajı: Bir MPA ile web siteniz olmasını istediğiniz kadar ölçeklenebilir. Daha kolay gezinme ve daha hızlı yükleme için içeriği bölerek düzinelerce sayfa üzerine düzinelerce oluşturabilirsiniz. SPA'lar genellikle tüm web sitesi yapısını - DOM - bir kez yüklediğinden, web sitenizde çok fazla kod varsa (örneğin bir çevrimiçi mağazanız varsa), onu bir SPA olarak oluşturmak yığınınızda ekstra teknolojiler gerektirecektir. Bu nedenle, web geliştiricilerinin bunun yerine çevrimiçi mağazalar için MPA'ları önermesi nadir değildir.

3. SEO

İşletmeniz büyük ölçüde arama motoru sonuçlarına dayanıyorsa, genellikle daha iyi sıralandıkları için çok sayfalı bir web uygulaması düşünün. Bir SPA'nın dinamik içerik yüklemesi, MPA'ların karşılaşmadığı bir sorun olan arama motoru tarayıcılarının önüne geçer. SPA'lar bir kez daha geliştiricilerinizin ek SEO teknolojisi kullanmasını gerektirirken, bir MPA doğal olarak arama motorlarıyla iyi ilişkiler içindedir.

4. Teknoloji yığını

İki tür web uygulamasından daha eski olan MPA'lar daha gelişmiş bir teknoloji yığınına ve biraz daha büyük bir geliştirici topluluğuna sahiptir. Ayrıca, çok sayfalı web uygulamalarının geliştirilmesi, çok sayıda sayfa nedeniyle daha uzun sürse de, SPA'lardan daha basit ve daha küçük bir teknoloji yığını ile oluşturulmuştur.

Çok sayfalı web uygulamalarının dezavantajları

1. Yükleme hızıyla ilgili sorun siyah beyaz değil

Her şeyden önce, DKA'lar SPA'lardan tam olarak daha yavaş değildir. SPA'lara kıyasla daha yavaş oldukları şey, sayfalar arasında geçiş yapmaktır. Bunun nedeni, bir MPA ile bir kullanıcı sayfayı her değiştirmeye çalıştığında (örneğin, profiline gidin veya ödemeye devam edin), sitenin sunucuya yeni sayfanın kodu için bir istek göndermesidir. İsteğin kendisi ve yanıtın işlenmesi zaman alır, dolayısıyla yükleme süresi.

Yeni bir sayfanın yüklenmesi için gereken süre birden çok faktöre bağlıdır:

• Kullanıcının internet bağlantı hızı
• Yüklenen içeriğin miktarı ve türü
• Siteyi aynı anda kaç kullanıcı ziyaret ediyor
• Sitenin sunucuları ne kadar güçlü
• Sitenin üzerine inşa edildiği teknoloji
• Ön uç geliştiricilerinizin becerileri ve deneyimi

Öte yandan, SPA'lar, bir kullanıcı siteyi açtığı anda kodun tamamını yükler. Bundan sonra, aynı sayfadaki iç "sekmeler" arasında geçiş yaparak tam yüklü önbellekten istenen içeriği dinamik olarak gösterir. Ve çok fazla kod olduğunda, bu ilk yükleme SPA ile MPA'dan çok daha uzun sürebilir. Yani, bir MPA ve bir SPA arasında seçim yapmanız gerektiğinde, söylendiği gibi, her şey buna bağlıdır.

2. Geliştirme

Çok sayfalı bir web uygulaması oluşturmak, tek sayfalı bir uygulama oluşturmaktan daha uzun sürer. Bunun nedeni, web uygulamanızdaki her sayfanın ayrı bir koda ve ayrı bir tasarıma ihtiyaç duymasıdır. Çoğu şirket ve serbest çalışan, işe harcanan saatlere göre ücret aldığından, özelliklerin sayısına ve karmaşıklığına bağlı olarak süre de maliyeti etkileyebilir.

3. Uyarlanabilirlik

MPA'lar öncelikle masaüstü tarayıcılar için oluşturulmuştur ve günümüzde herkes web sitelerinin arayüzlerini mobil tarayıcılar için esnek hale getirirken, MPA'lar için tam uyarlanabilirlik SPA'lara göre daha zordur. Tek sayfalı uygulamalar yerel mobil uygulamalara çok benzerken, mobil cihazlardaki çok sayfalı uygulamalar dikey modda web sitelerine benziyor.

Ve bu sadece kullanıcı arayüzü değil. Bir noktada çok sayfalı web sitenizi temel alan yerel bir mobil uygulama oluşturmaya karar verirseniz, kullanıcı arabirimini/UX'i, görselleri ve arka ucu tamamen sıfırdan oluşturmanız gerekir. SPA'lar, arka ucu yeniden kullanmanıza izin verir ve genellikle bir mobil uygulama arayüzüne benzer bir ön uca sahiptir.

SPA vs MPA - Hangisini seçmeli?

Yukarıda ortaya koyduklarımızı özetlemek için, tek sayfalı ve çok sayfalı bir web uygulaması arasındaki temel farkları özetleyen aşağıdaki tabloya bakın.

Gördüğünüz gibi, her iki tür web uygulaması da güçlü ve zayıf yönleriyle birlikte gelir. Ve tek sayfalık uygulama teknolojisi hızla ilerlerken ve SPA'lar yakında geleneksel web sitelerini alt edebilirken, bugün işiniz için ne tür bir web sitesi oluşturacağınıza karar vermeden önce artıları ve eksileri tartmanız gerekiyor: bir SPA veya MPA.

Biraz ekstra: Aşamalı web uygulamaları

Aşamalı web uygulamaları veya PWA'lar, son birkaç yıldır bir web geliştirme trendi olmuştur. Kısacası, PWA, bir web uygulaması ile yerel bir uygulamanın karışımıdır. Özünde, JavaScript, HTML ve CSS kullandıkları için web uygulamaları - genellikle tek sayfalı uygulamalardır. Ancak bir akıllı telefonun ana ekranına sabitlenebilirler ve bir dereceye kadar yerel bir uygulama gibi çevrimdışı çalışabilirler.

Bilgisayarınızın masaüstündeki uygulamalara ve klasörlere nasıl kısayollar oluşturabileceğinizi biliyor musunuz? PWA'lar benzer şekilde çalışır, ancak akıllı telefonunuzun ana ekranında web sayfalarına uygulama görünümlü bağlantılar oluştururlar. En son teknoloji yığını ve API'lerle, uygulamanın gerektiğinde çevrimdışı çalışabilmesi için akıllı telefonun önbelleğine belirli miktarda veri yüklerler.

PWA'lar henüz yerel uygulamalar kadar zengin özelliklere sahip değil - belirli izinler gerektiren NFC, Bluetooth veya akıllı telefon özelliklerini kullanamazlar. Tam çevrimdışı işlevsellik de sunmazlar. Ancak esnektirler, oluşturması kolaydır, geliştirmesi ucuzdur ve kullanıcıların telefonlarına web sitenizi sürekli olarak hatırlatırlar .

Bir SPA ve MPA geliştirmenin maliyeti nedir?

Tek sayfalık uygulamalar bir nedenden dolayı popülerlik kazanıyor. Gördüğünüz gibi, SPA'ların sahip olduğu çoğu sorun hafifletilebilir ve bu nedenle web uygulamanızın ölümü değildir. Başka bir deyişle, bu çözümler için yine de ekstra teknolojiler kullanmanız gerekecek ve bu, tek sayfalık bir uygulama geliştirmenin zamanını ve maliyetini etkileyebilir. Bir SPA veya MPA geliştirmeye karar vermeden önce fikrinizin tüm yönlerini değerlendirmeniz ve web geliştirme şirketinizin deneyimini dikkate almanız gerekir.

İşte denkleme eklenebilecek parametrelerden bazıları:

• İşletmenizin türü
• Web sitesinin boyutu
• Ölçeklenebilirlik gereksinimleri
• SEO'nun siteniz için önemi

Tek sayfalık bir uygulama kullanmaya karar verirseniz, aşağıdaki uzmanlara sahip bir geliştirme şirketi kiralamanız gerekir:

• Proje Müdürü
• UI/UX web tasarımcısı
• JavaScript ve çerçevelerinde uzmanlaşmış ön uç geliştirici
• Arka uç geliştiricisi
• kalite kontrol mühendisi

Tabii ki, bir SPA web sitesi kurmanın maliyeti, sitenin boyutuna ve türüne, özellik setine ve gereken teknoloji yığınına bağlı olacaktır, bu yüzden onu sadece kabaca tahmin edebiliriz.

Basit bir tek sayfalık uygulama - örneğin bir açılış sayfası - iki ila dört hafta içinde oluşturulabilir ve maliyeti 4.200 ABD doları kadardır . Daha karmaşık bir SaaS platformunun araştırılması, oluşturulması ve başlatılması üç veya dört ay sürebilir. Böyle bir SPA geliştirmenin maliyeti yaklaşık 29.000$ ve üzeri olacaktır . Bir SPA'nın teknoloji yığını bir MPA'dan daha büyük olduğundan, geliştiricilerin deneyimi tek sayfalık bir web uygulaması oluşturmak için gereken süreyi de etkileyebilir.

Öte yandan, tek bir sayfadan daha fazlasına sahip en basit çok sayfalı uygulamanın (aksi takdirde, anlamı nedir, değil mi?) kodlanması yaklaşık dört ila beş ay sürer ve karmaşıklığına ve tasarımına bağlı olarak 35.000 ila 42.000 ABD Doları arasında bir maliyete sahiptir. Ne kadar çok özelliğe ihtiyacınız olursa, fiyat o kadar yüksek ve geliştirme süresi o kadar uzun olur.

Sonuç: SPA vs MPA

Tek sayfalık uygulamalar şu anda dünyayı fethediyor. Ve DKA'ları bir kenara bırakmak için çok erken olsa da, ilerlemeyi durduramayacağınızı ve durdurmamanız gerektiğini düşünüyoruz. Yani Mind Studios'ta gözümüzü dört açıyoruz ve çoğunlukla SPA geliştirme için olan en yeni teknolojileri takip ediyoruz. Geliştiricilerimiz hem geleneksel web sitesi geliştirme yöntemlerine hem de JavaScript çerçevelerine aşinadır, bu nedenle web uygulamanızı istediğiniz şekilde oluşturabiliriz.

Bir SPA'nın nasıl geliştirileceği hakkında daha fazla bilgi edinmek veya danışmak isterseniz bize ulaşın.

Artem Chervichnik ve Svitlana Varaksina tarafından yazıldı.