Geleneksel Web Uygulamaları ile Tek Sayfalı Uygulamalar (SPA) Arasında Seçim Yapma

Makale
03/12/2024

İpucu

Bu içerik, .NET Docs'ta veya çevrimdışı olarak okunabilen ücretsiz indirilebilir bir PDF olarak sağlanan ASP.NET Core ve Azure ile Modern Web Uygulamaları Mimarisi adlı e-Kitap'tan bir alıntıdır.

PDF'i indirin

"Atwood Yasası: JavaScript ile yazılabilir tüm uygulamalar, sonunda JavaScript'te yazılacaktır."
- Jeff Atwood

Bugün web uygulamaları oluşturmaya yönelik iki genel yaklaşım vardır: sunucudaki uygulama mantığının çoğunu gerçekleştiren geleneksel web uygulamaları ve web tarayıcısında kullanıcı arabirimi mantığının çoğunu gerçekleştiren ve öncelikli olarak web API'lerini kullanarak web sunucusuyla iletişim sağlayan tek sayfalı uygulamalar (SPA'lar). Karma yaklaşım da mümkündür, en basiti daha büyük bir geleneksel web uygulamasında bir veya daha fazla zengin SPA benzeri alt uygulama barındırmaktır.

Aşağıdaki durumlarda geleneksel web uygulamalarını kullanın:

Uygulamanızın istemci tarafı gereksinimleri basit ve hatta salt okunur.
Uygulamanızın JavaScript desteği olmadan tarayıcılarda çalışması gerekir.
Uygulamanız genel kullanıma yöneliktir ve arama motoru bulma ve referanslardan yararlanır.

Aşağıdaki durumlarda SPA kullanın:

Uygulamanızın birçok özelliğe sahip zengin bir kullanıcı arabirimini kullanıma sunması gerekir.
Ekibiniz JavaScript, TypeScript veya BlazorWebAssembly geliştirme hakkında bilgi sahibidir.
Uygulamanızın diğer (iç veya genel) istemciler için zaten bir API'yi kullanıma sunması gerekir.

Buna ek olarak, SPA çerçeveleri daha fazla mimari ve güvenlik uzmanlığı gerektirir. Sık güncelleştirmeler ve yeni istemci çerçeveleri nedeniyle geleneksel web uygulamalarına göre daha fazla değişim yaşanıyor. Otomatik derleme ve dağıtım işlemlerini yapılandırmak ve kapsayıcılar gibi dağıtım seçeneklerini kullanmak, SPA uygulamalarında geleneksel web uygulamalarından daha zor olabilir.

SPA yaklaşımı tarafından mümkün kılınan kullanıcı deneyiminde yapılan iyileştirmeler, bu hususlara karşı değerlendirilmelidir.

Blazor

ASP.NET Core, adlı Blazorzengin, etkileşimli ve birleştirilebilir kullanıcı arabirimleri oluşturmaya yönelik bir model içerir. Blazor sunucu tarafı, geliştiricilerin sunucuda C# ve Razor ile kullanıcı arabirimi oluşturmasına ve kullanıcı arabiriminin kalıcı signalR bağlantısı kullanarak tarayıcıya gerçek zamanlı olarak etkileşimli olarak bağlanmasına olanak tanır. BlazorWebAssembly uygulamaları için Blazor başka bir seçenek tanıtır ve kullanarak WebAssemblytarayıcıda çalışmalarına olanak tanır. üzerinde çalışan WebAssemblygerçek .NET kodu olduğundan, uygulamanızın sunucu tarafı bölümlerindeki kodu ve kitaplıkları yeniden kullanabilirsiniz.

Blazor , yalnızca sunucu tarafından işlenen bir web uygulaması mı yoksa SPA mı oluşturulup oluşturulmayacağını değerlendirirken göz önünde bulundurulacak yeni, üçüncü bir seçenek sağlar. kullanarak önemli JavaScript geliştirmesine Blazorgerek kalmadan zengin, SPA benzeri istemci tarafı davranışları oluşturabilirsiniz. Blazor uygulamalar, veri istemek veya sunucu tarafı işlemleri gerçekleştirmek için API'leri çağırabilir. JavaScript kitaplıklarından ve çerçevelerinden yararlanmak için gerektiğinde JavaScript ile birlikte çalışabilirler.

Aşağıdaki durumlarda web uygulamanızı Blazor oluşturmayı göz önünde bulundurun:

Uygulamanız zengin bir kullanıcı arabirimini kullanıma sunmalı
Ekibiniz .NET geliştirme konusunda JavaScript veya TypeScript geliştirmeden daha rahat

.NET Core'a veya en son .NET'e geçirmeyi düşündüğünüz mevcut bir web formları uygulamanız varsa, Web Forms Geliştiricilerinin uygulamasına geçirmenin Blazormantıklı olup olmadığını görmesi için ücretsiz e-kitabı Blazor gözden geçirmek isteyebilirsiniz.

hakkında Blazordaha fazla bilgi için bkz . ile Blazorçalışmaya başlama.

Geleneksel web uygulamaları ne zaman seçilir?

Aşağıdaki bölüm, geleneksel web uygulamalarını seçmenin daha önce belirtilen nedenlerinin daha ayrıntılı bir açıklamasıdır.

Uygulamanızın basit, muhtemelen salt okunur, istemci tarafı gereksinimleri var

Birçok web uygulaması, kullanıcılarının büyük çoğunluğu tarafından öncelikli olarak salt okunur olarak kullanılır. Salt okunur (veya çoğunlukla salt okunur) uygulamalar, büyük ölçüde durumu koruyan ve işleyen uygulamalardan çok daha basit olma eğilimindedir. Örneğin, bir arama altyapısı metin kutusu içeren tek bir giriş noktasından ve arama sonuçlarını görüntülemek için ikinci bir sayfadan oluşabilir. Anonim kullanıcılar kolayca istekte bulunabilir ve istemci tarafı mantığına çok az ihtiyaç vardır. Benzer şekilde, bir blog veya içerik yönetimi sisteminin genel kullanıma yönelik uygulaması genellikle istemci tarafı davranışı az olan içeriklerden oluşur. Bu tür uygulamalar, web sunucusunda mantık gerçekleştiren ve HTML'yi tarayıcıda görüntülenecek şekilde işleyen geleneksel sunucu tabanlı web uygulamaları olarak kolayca oluşturulur. Sitenin her benzersiz sayfasının arama motorları tarafından (varsayılan olarak, bu işlevi uygulamanın ayrı bir özelliği olarak eklemek zorunda kalmadan) yer işareti ve dizine eklenebilen kendi URL'si olması da bu tür senaryolarda açık bir avantajdır.

Uygulamanızın JavaScript desteği olmadan tarayıcılarda çalışması gerekiyor

JavaScript desteği sınırlı veya hiç olmayan tarayıcılarda çalışması gereken web uygulamaları, geleneksel web uygulaması iş akışları kullanılarak yazılmalıdır (veya en azından bu tür davranışlara geri dönebilir). SPA'ların çalışması için istemci tarafı JavaScript gerekir; kullanılabilir değilse, SPA'lar iyi bir seçenek değildir.

Ekibiniz JavaScript veya TypeScript geliştirme tekniklerini bilmiyor

Ekibiniz JavaScript veya TypeScript hakkında bilgi sahibi değilse ancak sunucu tarafı web uygulaması geliştirme konusunda bilgi sahibiyse, geleneksel bir web uygulamasını SPA'dan daha hızlı bir şekilde sunabilecektir. SPA'ları programlamayı öğrenmek bir hedef değilse veya SPA tarafından sunulan kullanıcı deneyimi gerekli değilse geleneksel web uygulamaları, bunları oluşturmaya zaten aşina olan ekipler için daha üretken bir seçimdir.

SPA'lar ne zaman seçilir?

Aşağıdaki bölüm, web uygulamanız için tek sayfalı uygulamalar geliştirme stilinin ne zaman seçileceğine ilişkin daha ayrıntılı bir açıklamadır.

Uygulamanızın birçok özelliğe sahip zengin bir kullanıcı arabirimini kullanıma sunması gerekir

SPA'lar, kullanıcılar eylem gerçekleştirirken veya uygulamanın alanları arasında gezinirken sayfayı yeniden yüklemeyi gerektirmeyen zengin istemci tarafı işlevselliğini destekleyebilir. SPA'lar daha hızlı yüklenebilir, arka planda veri getirilir ve tam sayfa yeniden yüklemeleri nadir olduğundan bireysel kullanıcı eylemleri daha hızlı yanıt verir. SPA'lar, kullanıcının form göndermek için bir düğmeye tıklamasına gerek kalmadan kısmen tamamlanmış formları veya belgeleri kaydederek artımlı güncelleştirmeleri destekleyebilir. SPA'lar, sürükle ve bırak gibi zengin istemci tarafı davranışlarını geleneksel uygulamalardan çok daha hazır bir şekilde destekleyebilir. SPA'lar, bağlantı yeniden kurulduktan sonra sunucuya geri eşitlenen istemci tarafı modelinde güncelleştirmeler yaparak bağlantısı kesilmiş modda çalışacak şekilde tasarlanabilir. Uygulamanızın gereksinimleri, tipik HTML formlarının sunduğu özelliklerin ötesine geçen zengin işlevlere sahipse SPA stilinde bir uygulama seçin.

ÇOĞU zaman, SPA'ların geçerli işlemi yansıtan adres çubuğunda anlamlı bir URL görüntüleme (ve kullanıcıların bu URL'ye dönmek için bu URL'ye yer işareti eklemesine veya bu URL'ye ayrıntılı bağlantı eklemesine izin verme) gibi geleneksel web uygulamalarında yerleşik olarak bulunan özellikleri uygulaması gerekir. SPA'lar ayrıca kullanıcıların tarayıcının geri ve ileri düğmelerini, onları şaşırtmayacak sonuçlarla kullanmasına da izin vermelidir.

Ekibiniz JavaScript ve/veya TypeScript geliştirme hakkında bilgi sahibi

SPA'ları yazmak için JavaScript ve/veya TypeScript ile istemci tarafı programlama teknikleri ve kitaplıkları hakkında bilgi sahibi olunma gerekir. Ekibiniz, Angular gibi bir SPA çerçevesi kullanarak modern JavaScript yazma konusunda yetkin olmalıdır.

Başvurular – SPA Çerçeveleri

Angular: https://angular.io

Tepki:https://reactjs.org/

Vue.js:https://vuejs.org/

Uygulamanızın diğer (iç veya genel) istemciler için zaten bir API'yi kullanıma sunması gerekir

Bir web API'sini başka istemciler tarafından kullanılmak üzere zaten destekliyorsanız, mantığı sunucu tarafı biçiminde yeniden oluşturmak yerine bu API'lerden yararlanan bir SPA uygulaması oluşturmak daha az çaba gerektirebilir. SPA'lar, kullanıcılar uygulamayla etkileşim kurarken verileri sorgulamak ve güncelleştirmek için web API'lerini kapsamlı bir şekilde kullanır.

Ne zaman seçileceği Blazor

Aşağıdaki bölüm, web uygulamanız için ne zaman seçim Blazor yapabileceğinize ilişkin daha ayrıntılı bir açıklamadır.

Uygulamanız zengin bir kullanıcı arabirimini kullanıma sunmalı

JavaScript tabanlı SPA'lar gibi uygulamalar da Blazor sayfa yeniden yüklemeleri olmadan zengin istemci davranışını destekleyebilir. Bu uygulamalar kullanıcılara daha duyarlıdır ve yalnızca belirli bir kullanıcı etkileşimini yanıtlamak için gereken verileri (veya HTML) getirir. Düzgün şekilde tasarlanan sunucu tarafı Blazor uygulamalar, bu özellik desteklendiğinde en az değişiklikle istemci tarafı Blazor uygulamaları olarak çalışacak şekilde yapılandırılabilir.

Ekibiniz .NET geliştirme konusunda JavaScript veya TypeScript geliştirmeden daha rahat

Birçok geliştirici JavaScript veya TypeScript gibi istemci tarafı dillere kıyasla .NET ve Razor ile daha üretkendir. Uygulamanın sunucu tarafı zaten .NET ile geliştirilmekte olduğundan, kullanarak Blazor ekipte bulunan her .NET geliştiricisinin uygulamanın ön ucunun davranışını anlamasını ve potansiyel olarak oluşturmasını sağlar.

Karar tablosu

Aşağıdaki karar tablosu, geleneksel bir web uygulaması, SPA veya Blazor uygulama arasında seçim yaparken dikkate alınması gereken bazı temel faktörleri özetler.

Faktör	Geleneksel Web Uygulaması	Tek Sayfalı Uygulama	Blazor App
JavaScript/TypeScript hakkında Gerekli Ekip Bilgisi	Minimal	Required	Minimal
Betik Olmadan Tarayıcıları Destekleme	Destekleniyor	Desteklenmiyor	Destekleniyor
En Az İstemci Tarafı Uygulama Davranışı	Uygun	Overkill	Uygun
Zengin, Karmaşık Kullanıcı Arabirimi Gereksinimleri	Sınırlı	Uygun	Uygun

Dikkat edilecek diğer noktalar

Geleneksel Web Uygulamaları daha basit olma eğilimindedir ve SPA uygulamalarından daha iyi Arama Motoru İyileştirme (SEO) ölçütlerine sahiptir. Arama motoru botları geleneksel uygulamalardan kolayca içerik tüketebilirken, DIZIN OLUŞTURMA SPA'ları için destek eksik veya sınırlı olabilir. Uygulamanız arama motorlarının genel bulma özelliğinden yararlanıyorsa, bu genellikle önemli bir noktadır.

Buna ek olarak, SPA'nızın içeriği için bir yönetim aracı oluşturmadıysanız, geliştiricilerin değişiklik yapmasını gerektirebilir. İçeriğin büyük bir kısmı yalnızca HTML olduğundan ve önizlemesini görüntülemek ve hatta dağıtmak için bir derleme işlemi gerektirebileceğinden, geleneksel Web Apps çoğu zaman geliştirici olmayanların değişiklik yapması daha kolaydır. Kuruluşunuzdaki geliştirici olmayanların uygulamanın içeriğini korumaları gerekmesi olasıysa, geleneksel bir web uygulaması daha iyi bir seçim olabilir.

Uygulama karmaşık etkileşimli formlara veya diğer kullanıcı etkileşimi özelliklerine sahip olduğunda SPA'lar parlar. Kimlik doğrulaması gerektiren ve bu nedenle genel arama motoru örümcekleri tarafından erişilmeyen karmaşık uygulamalar için SPA'lar birçok durumda harika bir seçenektir.

Geri İleri