Tek sayfa uygulamalarının ve aşamalı web uygulamalarının avantajları: Müşteri Deneyimini Geliştirme

Yayınlanan: 2019-06-06

Müşteri deneyimi, e-ticaret sağlayıcılarının onlarla hızlı ve güvenilir etkileşimler sağlamasını gerektirdiğinden, tek sayfalı uygulamaların faydaları giderek daha net hale geldi.

Son 20 yılda, çoğu web sitesi aynı şekilde oluşturuldu – HTML, CSS ve JavaScript kullanılarak. Bu teknolojiler zamanla daha gelişmiş hale geldi, ancak ilke büyük ölçüde aynı kaldı: Bir kullanıcı bir web sayfasıyla etkileşime girer ve kullanıcının tarayıcısı bir web sunucusuna çağrı yapar ve bu sunucu da başka bir HTML, CSS ve diğer grupla yanıt verir. Daha sonra yüklenen ve tarayıcıda görüntülenen JavaScript.

(Vay. Bu çok fazla.)

AJAX gibi bazı teknolojiler, geliştiricilerin tüm sayfayı yenilemeden bazı içerikleri değiştirmesine izin verse de, bu işlem en yaygın olarak sayfanın yenilenmesini içerir. Bu nedenle, çoğu web sitesi bir uygulamadan çok bir web sitesi gibi hareket eder ve davranır.

Çoğu web sitesinde ayrıca sıkı bir şekilde bağlanmış bir arka uç ve sunum katmanı bulunur; bu, her ikisi de tek bir monolitik uygulamanın parçası olduğu için bir web sitesinin ön ve arka ucu arasında gerçek bir ayrım olmadığı anlamına gelir.

Tek sayfa uygulamaları ve aşamalı web uygulamaları müşteri deneyimini nasıl iyileştirebilir?

Son on yılda, yerel iOS ve Android uygulamaları neredeyse hepimiz için ortak bir yer haline geldi. Bu uygulamalar, gerçek web sitelerinden farklı davranır ve kullanıcılara çok farklı ve genellikle daha tatmin edici bir deneyim sunar.

Bir bağlantıya veya düğmeye basıldığında sayfalar yenilenmez, değişiklikler çok daha hızlı yüklenir ve deneyim genellikle eşdeğer mobil web sitesinden çok daha iyidir. Yerel bir e-ticaret uygulaması söz konusu olduğunda, bir kullanıcı bir bağlantıyı tıkladığında, uygulama bir arka uç sunucuya çağrı yapar, ancak bu sunucunun HTML, CSS ve JavaScript sunum katmanını döndürmesi yerine, yalnızca gerekli ham verileri gönderir ve uygulama bunun kullanıcıya nasıl görüntülendiğini yönetir.

Örneğin, bir kullanıcı ayrıntılarını görüntülemek için bir ürüne tıklarsa, uygulama arka uç sunucuyu arayacak ve o ürünün ayrıntılarını soracak ve sunucu, ürün adı, ürünün adı gibi öğeleri içeren bir dizi veriyle yanıt verecektir. fiyat ve bir görsele bağlantı, ancak nasıl görüntüleneceğini tanımlamak için herhangi bir HTML, CSS veya JavaScript göndermesi gerekmez.

Uygulamanın kendisi sunum katmanıdır, bu nedenle arka uç sunucudan bunların hiçbirine ihtiyaç duymaz. Bu çok daha hızlıdır ve uygulamanın, bir sayfayı yenilemeden müşteriye ürün ayrıntılarını görüntülemesini sağlar. Teknoloji, geliştiricilere geleneksel modelin kısıtlamaları olmadan sorunsuz ve akıcı bir müşteri deneyimi oluşturma özgürlüğü veriyor.

Yerel bir uygulama ile bir web sitesi arasındaki ayrımın bulanıklaşması için bir web tarayıcısı aracılığıyla uygulamaya benzer bir deneyim sunulsa harika olmaz mıydı?

Tek Sayfa Uygulamaları (SPA'lar) ve Aşamalı Web Uygulamaları (PWA'lar) burada devreye girer.

Tek Sayfa Başvurusu Nedir?

SPA, JavaScript ile yazılmış, bir web tarayıcısında çalışan ve genellikle yeni bilgileri göstermek için sayfa yenileme gerektirmeyen bir uygulamadır.

Bir kullanıcı web sitesini ilk ziyaret ettiğinde, uygulama ve sunum kaynakları (HTML, CSS ve bazı komut dosyaları) tarayıcıya yüklenir. Bu andan itibaren kullanıcı tek bir web sayfasındadır ve uygulama ilgili içeriği yüklemekte ve gerektiğinde ekranı değiştirmektedir.

Yerel bir uygulama gibi, bir kullanıcı bir bağlantıya tıkladığında, uygulama arka uç sunucuyu çağırır ve bu da gerekli verileri bir dizide gönderir ve bu sunucu genellikle önceden olduğu gibi sunum kaynaklarının hiçbirini içermez. kullanıcı web sitesini ilk ziyaret ettiğinde yüklenir.

Kullanıcı aslında yalnızca tek bir web sayfasında olduğundan, gerçekten bir sayfayı yenileme kavramı yoktur. Bunun yerine uygulama, gerektiğinde farklı bilgileri gösterecek şekilde sayfayı değiştirir.

SPA'lar genellikle arka uç uygulamadan ve arayüzlerden bir dizi API aracılığıyla arka uca tamamen ayrılır. Genellikle kendi sunucusuna oturur ve ayrı olarak dağıtılabilir. Bir bakıma, arka uç uygulamasına karşı oldukça agnostiktir, çünkü sadece ona veri gönderip ondan veri alır – ona bir üçüncü taraf sistemi gibi davranır.

Hepimiz bir süredir SPA'ları kullanıyoruz, muhtemelen farkında bile olmadan. Facebook, Gmail, Twitter, LinkedIn ve Instagram (diğerlerinin yanı sıra), web siteleri yerine SPA'ları kullanır.

Bu web sitelerinden herhangi birini şimdi ziyaret ederseniz, geleneksel bir web sitesinden çok yerel bir uygulama gibi davrandıklarını fark edeceksiniz. Sayfalar nadiren, hatta onlarla etkileşim kurduğunuzda yenilenir ve çok hızlıdır. Bağlantılara ve düğmelere tıklamak, baktığınız içeriği değiştirir, ancak üst bilgi ve alt bilgi gibi öğeler, ilk yüklendikten sonra neredeyse hiçbir zaman yenilenmez.

Tek Sayfa Başvurularının Faydaları

Bir SPA'nın en büyük ve en belirgin avantajı, tasarımcıların ve geliştiricilerin uygulama benzeri bir deneyim sunmalarına izin vererek ve geleneksel sayfaları yeniden yükleme yaklaşımıyla kısıtlanmadan müşteri deneyimini geliştirmek için nasıl kullanılabileceğidir.

Normal kurallar artık geçerli olmadığı için bu, yeni bir tasarım ve düşünme yöntemi gerektiriyor, ancak kullanıcı deneyiminin faydaları çok büyük olabilir.

SPA'lar, sunum kaynaklarının çoğu (HTML,CSS) yalnızca bir kez yüklendiğinden, içeriği genellikle standart web sitelerinden çok daha hızlı yükler. Uygulama ile etkileşimler, tam olarak oluşturulmuş HTML/CSS sayfaları yerine, yalnızca küçük miktarlarda veri almak için arka uç sunucuya bir çağrı gerektirir. Uygulama daha sonra sayfayı yeniden yüklemek zorunda kalmadan değiştirilen verileri hızla görüntüleyebilir.

Bir SPA, arka uç uygulamasından tamamen ayrıldığından, ayrı olarak dağıtılabilir ve bu da çok büyük bir avantaj sağlayabilir. Küçük bir ön uç değişikliği, tüm uygulamanın dağıtılmasını gerektirmez ve bu oldukça büyük bir görev olabilir ve bazen kesinti gerektirir.

SPA'nın Dezavantajları

SPA kullanmanın en büyük zorluklarından biri SEO üzerindeki etkisidir. Her zaman, her biri farklı bir URL'ye sahip farklı sayfaların geleneksel yapısına sahip olmadıklarından, bu, arama motorlarının içeriği dizine eklemesiyle ilgili sorunlara neden olabilir. Ancak bu, sunucu tarafı oluşturma ve tıklamaların benzersiz URL'ler oluşturmasını sağlama gibi tekniklerin kullanılmasıyla karşılanabilir.

Ayrıca, arama motoru botları SPA'larla başa çıkmak için değiştirildiğinden, zaman içinde daha az sorun haline geliyor. Ne de olsa Google, onları savunan şirketlerden biri.

Uygulama ve sunum kaynakları ilk sayfa görünümünde yüklendiğinden, bazı SPA'ların ilk ziyarette yüklenmesi biraz zaman alır.

Bu, web sitesini ilk ziyaret ettiğinizde büyük bir yükleme resmine sahip oldukları Gmail gibi SPA'larda çok fark edilir. Bu sorun, uygulamanın ve kaynakların ilk yükünün çok büyük olmamasını sağlamak için sunucu tarafı oluşturma ve verimli programlama kullanımıyla giderilebilir.

Aşamalı Web Uygulaması nedir?

Bir PWA'yı tanımlamak biraz zordur, çünkü belirli bir teknoloji değil, birlikte bir web sitesini veya uygulamayı az çok PWA yapan bir geliştirme metodolojisi veya ilkeler dizisidir.

PWA terimi, ilk olarak, bir PWA'yı neyin oluşturduğunu tanımlamak için bir kontrol listesi oluşturan Google tarafından icat edildi. Google, diğer şeylerin yanı sıra bir PWA'nın olması gerektiğini tanımlamıştır:

Güvenli – https altında sunulur
Duyarlı – herhangi bir form faktörüne uyar
Çevrimdışı çalışabilme – sayfaları önbelleğe almak için hizmet çalışanlarını kullanma
Hızlı – 3G bağlantılarında hızlı yüklenebilir
Uygulama benzeri – bir uygulama gibi hissetmek için uygulama kabuğu modunu ve tasarımı kullanma
Yüklenebilir – uygulamanın ana ekrana eklenmesine izin vermek için bir bildirim dosyası kullanın
İlgi çekici – push bildirimleri gibi araçları kullanma
Aşamalı - tüm tarayıcılarda çalışır ancak modern tarayıcılarda giderek daha iyidir

Gördüğünüz gibi, bazı kontrol listesi maddeleri biraz belirsiz veya öznel. Ayrıca bazılarının bir SPA'ya benzediğini de görebilirsiniz. Geleneksel bir HTML/CSS web sitesi, SPA gibi bir PWA'ya dönüştürülebilir. Bir SPA otomatik olarak bir PWA değildir, ancak onu bu yöne iten bazı özelliklere sahiptir.

Henüz kafanız mı karıştı?

PWA'ların Avantajları

SPA'da olduğu gibi, PWA'nın en büyük avantajlarından biri, müşteri deneyimindeki iyileştirme, ona uygulama benzeri bir his vermesi ve geleneksel bir mobil web sitesi ile yerel bir iOS veya Android uygulaması arasındaki boşluğu doldurmasıdır.

Ana ekranınıza kaydetme veya servis çalışanları aracılığıyla sayfaları önbelleğe alabilme gibi özellikler, web sitesinin yerel bir uygulama gibi görünmesini ve hissettirilmesini sağlayabilir.

PWA'lar ayrıca çok hızlı olma eğilimindedir, çünkü bu kontrol listesindeki temel ilkelerden biridir.

Android işletim sistemi, tarayıcılara mobil cihazın donanımına erişim sağlar. Bu, CX'i gerçekten iyileştirebilecek push bildirimleri ve NFC taramasının kullanılması gibi şeylere izin verir.

PWA'ların dezavantajları

PWA'ların en büyük dezavantajı, Apple'ın desteğinin olmamasıdır. Bir PWA'dan en iyi şekilde yararlanmak için gerçekten bir Android cihazında çalışması gerekir, çünkü Android işletim sistemi tarayıcılara cihazdaki önemli miktarda özelliğe erişim sağlarken Apple bunu ciddi şekilde kısıtlar. Bu yavaş yavaş gelişiyor, ancak daha gidilecek çok yol var.

Diğer bir dezavantaj ise, yoruma açık olabilecek net bir tanımın olmamasıdır.

SPA'lar ve PWA'lar web sitesi geliştirmenin geleceğidir

Bu teknoloji, çoğu e-ticaret web sitesi için hala tamamen yaygın olmasa da, şüphesiz web sitesi geliştirmenin geleceğidir.

SPA'lar, bir e-ticaret uygulaması oluşturmak için kullanılabilecek belirli bir teknoloji olsa da, PWA'lar genellikle Google tarafından belirlenen ve en iyi müşteri deneyimini sağladığını düşündükleri bir metodoloji izlenerek oluşturulmuş web siteleridir.

Bir SPA geliştiren herkes, mümkün olan en iyi CX'i sağlamak için PWA kontrol listesini mümkün olduğunca karşılamayı hedeflemelidir. Bu teknolojiler, tasarımcılara ve geliştiricilere kullanıcı deneyimi ve yolculuklarında daha fazla özgürlük vererek, geleneksel sayfa sayfa modelden uzaklaşmalarına olanak tanır.

SAP ve IBM gibi birçok yazılım sağlayıcısı, e-ticaret platformları için SPA ön uçları oluşturmaya yoğun bir şekilde yatırım yapıyor ve birkaç yıl içinde çoğu e-ticaret web sitesinin Angular gibi JavaScript çerçeveleri kullanılarak bu şekilde oluşturulacağından şüpheleniyorum, Vue veya React.

Geleneksel HTML/CSS modeli kullanılarak giderek daha az e-ticaret sitesi oluşturulacak ve web siteleri ile yerel uygulamalar arasındaki boşluk giderek küçülecek ve aralarında ayrım yapmak zorlaşacak.