Blazor Sıfırdan: Bölüm 1 — Blazor Nedir?

Blazor Sıfırdan serisinin 1. Bölümüne hoş geldiniz. Bu serinin amacını ve kime hitap ettiğini açıkladığım giriş yazısını kaçırdıysanız, önce oradan başlayın — kısadır.

Bu bölümde temel soruyu yanıtlayacağız: Blazor nedir? Kulağa basit geliyor ancak yanıt birkaç katmanlıdır — özellikle “Blazor"un yıllar içinde biraz farklı anlamlar kazanmış olması nedeniyle. Bu yazının sonunda Blazor’un ne olduğunu, .NET ekosistemine nasıl uyduğunu, farklı render modellerinin neler olduğunu ve neden bir JavaScript framework’ü yerine onu tercih edebileceğinizi — ya da etmeyebileceğinizi — öğreneceksiniz.

Kısa bir tarihçe

Blazor, 2017 civarında Microsoft’ta Steve Sanderson’ın deneysel bir projesi olarak başladı. Fikir kışkırtıcıydı: WebAssembly kullanarak tarayıcıda C# çalıştırmak ve JavaScript’e olan ihtiyacı tamamen ortadan kaldırmak. Bu bir kavram kanıtıydı ve isim, Blazer ile Razor‘un — Blazor’un sonunda üzerine inşa edileceği şablon motorunun — bilinçli bir birleşimiydi.

Deney, Microsoft’un ciddiye alması için yeterince heyecan yarattı. Blazor, Eylül 2019’da ASP.NET Core 3.0’ın bir parçası olarak piyasaya sürüldü — önce Blazor Server olarak: sunucuda C# kodunuzu çalıştıran ve UI güncellemelerini tarayıcıya göndermek için gerçek zamanlı bir SignalR bağlantısı kullanan bir model. Blazor WebAssembly, ASP.NET Core 3.1’in bir parçası olarak Mayıs 2020’de geldi ve framework’e gerçek istemci tarafı yürütme getirdi.

.NET 6 ve 7, geliştirici deneyimini iyileştirdi. Ardından Kasım 2023’te yayımlanan .NET 8, Microsoft’un tam yığın web UI’ı adını verdiği şeyle render modelini temelden yeniden düşündü. Statik sunucu tarafı render, akış render, etkileşimli sunucu, etkileşimli WebAssembly ve yeni Auto modu, tek bir projede aynı çatı altında bir arada yaşamaya başladı. .NET 9, bu temeli geliştirdi ve pürüzlü kenarları düzeltti.

Bugün bulunduğumuz yer burası.

Blazor gerçekte nedir

Özünde Blazor, .NET için bileşen tabanlı bir UI framework’üdür. Kullanıcı arayüzünüzü bileşenlerden oluşturursunuz — durum tutabilen, olaylara yanıt verebilen ve daha büyük yapılara dönüşebilen C# ve HTML işaretlemesinin bağımsız parçaları. React veya Vue ile çalıştıysanız bu zihinsel model tanıdık gelecektir. Temel fark, JavaScript yerine C# yazmanızdır.

Blazor’daki bileşenler .razor dosyalarına yazılır. .razor dosyası, ASP.NET MVC görünümlerinden zaten biliyor olabileceğiniz Razor sözdizimini kullanarak HTML işaretlemesini C# koduyla karıştırır. Basit bir bileşen şöyle görünür:

@page "/counter"

<h1>Sayaç</h1>
<p>Mevcut sayı: @currentCount</p>
<button @onclick="IncrementCount">Tıklayın</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Ortada hiç JavaScript yok. @onclick direktifi düğme tıklamasını bir C# metoduna bağlar. @currentCount ifadesi mevcut değeri render eder. Durum değiştiğinde Blazor DOM’da neyin güncelleneceğini belirler.

İşte bu, özüdür. Geri kalan her şey — yönlendirme, bağımlılık enjeksiyonu, formlar, HTTP çağrıları — bu bileşen modelinin üzerine inşa edilmiştir.

Render modelleri

Burada çok fazla kafa karışıklığı var, bu yüzden kesin olalım. Bugün “Blazor”, tek bir dağıtım modeli değil, render modlarının bir ailesini ifade eder. Farkı anlamak önemlidir çünkü performansı, altyapı gereksinimlerini ve bileşenlerinizin yapıp yapamayacağı şeyleri etkiler.

Statik SSR

En basit mod. Razor bileşenleriniz sunucuda HTML’e render edilir ve bu HTML tarayıcıya gönderilir. Kalıcı bağlantı yok, WebAssembly yok ve varsayılan olarak istemci tarafı etkileşim yok. Bu esasen Razor Pages’in yaptığı şeydir ama bileşen modeli kullanılarak.

İçerik ağırlıklı sayfalar, açılış sayfaları, canlı etkileşim gerektirmeyen her şey için kullanın.

Etkileşimli Sunucu

Bileşen kodunuz sunucuda çalışır. Tarayıcı ile sunucu arasında bir SignalR WebSocket bağlantısı kurulur. Bir düğmeye tıkladığınızda veya bir girişe yazı yazdığınızda olay WebSocket üzerinden sunucuya iletilir, C# kodunuz çalışır, fark hesaplanır ve DOM güncellemeleri tarayıcıya geri gönderilir.

Avantajlar: Sunucu kaynaklarına tam erişim (veritabanları, dosya sistemi, gizli anahtarlar). Hızlı ilk yükleme. Küçük indirme boyutu. WebAssembly desteği olmayan tarayıcılarda çalışır.

Dezavantajlar: Her kullanıcı etkileşimi sunucuya gidiş-dönüş gerektirir ve bu gecikme ekler. Sunucu kaynakları aktif bağlantı sayısıyla ölçeklenir. Bağlantı kesilirse uygulama bozulur.

İş kolu uygulamaları, dahili araçlar, çevrimdışı özelliğinden daha çok sunucu tarafı veri erişiminin önemli olduğu uygulamalar için kullanın.

Etkileşimli WebAssembly

.NET çalışma zamanı tarayıcıya indirilir ve uygulamanız tamamen istemcide çalışır. İlk indirmeden sonra uygulama tamamen çevrimdışı çalışır ve her etkileşim anlıktır — UI mantığı için sunucu gidiş-dönüşü gerekmez.

Avantajlar: Gerçek istemci tarafı yürütme. Çevrimdışı çalışır. Uygulama yüklendikten sonra sunucu yükü azalır.

Dezavantajlar: Daha büyük ilk indirme (.NET çalışma zamanı + uygulamanız). Daha yavaş ilk yükleme. Sunucu tarafı verilere erişmek için bir API gerekir.

Çevrimdışı yetenekli uygulamalar, anlık yanıt verme gerektiren araçlar, UI için sunucu işlemesi gerekmeyen senaryolar için kullanın.

Auto modu

.NET 8’de tanıtıldı. Uygulama Etkileşimli Sunucu modunda başlar (hızlı ilk yükleme, WebAssembly indirmesini bekleme yok). WebAssembly dosyaları arka planda indirildikten sonra sonraki ziyaretler otomatik olarak WebAssembly moduna geçer.

Bu size Sunucu modunun hızlı ilk yüklemesini ve nihayetinde WebAssembly’nin tam istemci tarafı yürütmesini birlikte sağlar. Anlaşılması en karmaşık modeldir ama birçok uygulama için pratik bir varsayılandır.

Aynı uygulamada modları karıştırma

.NET 8 ve sonrasında, tüm uygulama için tek bir render moduna bağlı kalmanız gerekmez. Pazarlama açılış sayfası Statik SSR olabilir; kimliği doğrulanmış gösterge paneli Etkileşimli Sunucu olabilir; veri görselleştirme widget’ı Etkileşimli WebAssembly olabilir. Framework geçişleri yönetir.

Bu seride Etkileşimli Sunucu ile başlayacağız çünkü çalıştırması en kolay olandır ve en doğrudan zihinsel modele sahiptir. Diğer modları ilerledikçe keşfedeceğiz.

Blazor’un JavaScript framework’leriyle karşılaştırması

React, Angular veya Vue ile geliştirme yaptıysanız, muhtemelen merak ettiğiniz karşılaştırma budur.

Benzerlikler gerçektir. Blazor’un bileşen modeli kasıtlı olarak React’e benzer. Props’lar (Blazor’da Parametreler), yerel durum (@code bloğundaki alanlar), yaşam döngüsü kancaları ve aynı iletişim deseni var: veri aşağıya, olaylar yukarıya. React biliyorsanız birkaç saat içinde kendinizi evde hissedeceksiniz.

Temel fark dildir. Blazor’da C# yazarsınız. İş mantığınız, doğrulama kurallarınız ve veri modellerinizin tümü Blazor frontend’iniz ile ASP.NET Core backend’iniz arasında paylaşılabilir. Zaten C#’ta sahip olduğunuz User sınıfını TypeScript’te tekrar yazmak zorunda kalmazsınız.

Ekosistem farkı gerçektir ama kapanmaktadır. npm ekosistemi devasa. UI bileşenleri için NuGet ekosistemi daha küçüktür, ancak önemli ölçüde büyümüştür. Belirli bir grafik kütüphanesi veya sürükle-bırak widget’ına ihtiyacınız varsa JavaScript’te hâlâ daha fazla seçenek var. Ama iş kolu uygulamalarının çoğu için .NET dünyasında mevcut olanlar fazlasıyla yeterlidir.

JavaScript birlikte çalışabilirliği ihtiyaç duyduğunuzda mevcuttur. Blazor, C#’tan JavaScript’i ve JavaScript’ten C#‘ı çağırmanıza izin verir. Henüz .NET sarmalayıcısı olmayan tarayıcı API’leri için veya mevcut bir JS kütüphanesi kullanmak istediğinizde interop mevcuttur. Bir katman ekler ama acı verici değildir.

Dürüst cevap: Ekibiniz tamamen JavaScript geliştiricilerden oluşuyor ve SEO, performans ve npm ekosisteminin kritik olduğu halka açık bir ürün oluşturuyorsanız JavaScript’te kalın. Ekibiniz .NET geliştiricileri ise, dahili veya iş kolu uygulamaları oluşturuyorsanız ya da frontend ile backend arasında kod paylaşımı sizin için önemliyse Blazor ikna edici bir seçimdir.

Takip etmek için ihtiyacınız olanlar

Serinin geri kalanı için ihtiyacınız olanlar:

• .NET 9 SDK — dot.net adresinden indirin
• Bir IDE — Visual Studio 2022 (Community sürümü ücretsizdir), C# Dev Kit uzantısıyla VS Code veya JetBrains Rider
• C# temel bilgisi — sınıflar, özellikler, arayüzler, async/await

Hepsi bu kadar. Node yok, npm yok, webpack yok.

Sırada ne var

2. Bölümde ilk Blazor uygulamanızı oluşturacak, proje yapısını inceleyecek ve yerel olarak çalıştırabildiğinizden emin olacağız. Sonunda çalışan bir uygulamanız ve her dosyanın ne yaptığına dair net bir resminiz olacak.

Orada görüşürüz.