Blazor, Microsot tarafından geliştirilen C# ve Html kullanılarak açık kaynak kodlu tek sayfalı (singe page application) uygulama geliştirme çerçevesidir. İsmi Browser (tarayıcı) ve Razor (.NET HTML görünümü oluşturma motoru) kelimelerinin bir mutasyonu olarak verilmiştir bunun anlamı, HTML’yi tarayıcıya sunmak için sunucuda Razor görünümlerini yürütmek yerine Blazor’un bu görünümleri istemcide yürütme yeteneğine sahip olmasıdır. Aslında Blazor WebAssembly sayesinde istemcide çalışacak şekilde tasarlanmasına karşın .Net Core sunucusunda SPA olarak da barındılabililir
Blazor’un ortaya çıkmasının arkasındaki en önemli sebeplerden biri sunucu ve istemci tarafında ortak bir dil kullanabilmekti. Bilindiği üzere bir web projesi geliştirilirken sunucu ve istemci olarak iki farklı platforma geliştirme yapılır, Sunucu tarafında C#, Java, Php, Python gibi diller kullanılırken, istemci tarafında Javascript temelli VueJS, React, Angular çerçeveleri kullanılır, Blazor’un felsefesi ise bu ayrıma son verip tek bir dil ile iki tarafta da geliştirme yapılabilmesine imkan vermektir.
Peki bir tarayıcı C# kodunu nasıl çalıştırabilir?
Tarayıcıda C# çalıştırma başta ilginç gelebilir çünkü bilindiği üzere tarayıcılar yalnızca JavaScript’i anlar ve yürütür. Peki istemci tarayıcısında C# kodunu nasıl çalıştırabiliriz? kısa cevap WebAssembly‘dir. Blazor, WebAssembly kullanarak C# kodunu doğrudan tarayıcıda çalıştırabilir. Bunun arkasındaki mantık aslında basittir; uyumlu bir programlama dili ile derlediğiniz WebAssembly binary dosyasını web uygulamanızdan servis edersiniz, tarayıcı bu dosyaları bir defaya mahsus olarak indirir ve tıpkı Javascript kodu gibi çalıştırır, burada Wasm derlenmiş bir kod olduğundan Javascript gibi yorumlanan bir dilden daha hızlı çalışır ancak dezavantajı ise wasm dosyalarının platform bağımlılıklarını da içerdiğinden dolayı Javascript’den çok daha fazla büyük olmasıdır. Bu ilk yüklemede performans sorununa sebep olabilir. elbette bu Blazor istemcide barındırıldığında geçerli olan bir durumdur
Bunun yanında Wasm; Angular, React, Vue vb. JavaScript çerçeveleriyle aynı güvenlik sanal alanında çalışır. Aslında sadece C# değil, WebAssembly kullanarak tarayıcıda her tür kodu çalıştırabiliriz. Chrome’da geliştirici araçlarını açtığınızda Network sekmesi altında Wasm penceresini görürsünüz burada WebAssembly kullanan bir siteye girdiğinizde tarayıcınıza indirilen derlenmiş wasm dosyaları listelenir. WebAssembly, açık web standartlarına dayandığı için mobil tarayıcılar dahil tüm modern tarayıcıların yerel bir parçasıdır. Bu, Blazor uygulamasının çalışması için, silverlight günlerinde olduğu gibi herhangi bir özel eklenti yüklemeye gerek olmadığı anlamına gelir.
WebAssembly JavaScript ile Birlikte Çalışır
C# kodunuz, JavaScript API’lerini ve kitaplıklarını kolayca çağırabilir. Uygulama mantığınızı C# ile yazarken istemci tarafı kullanıcı arayüzü için var olan geniş JavaScript kitaplıkları ekosistemini kullanmaya devam edebilirsiniz. Detaylı bilgi için buraya tıklayabilirsiniz
WebAssembly Nedir
WebAssembly (“Wasm” olarak kısaltılır), uygulama talimatlarını yorumlayabilen veya bunları yerel makine kodunda derleyip yürütebilen herhangi bir bilgisayar üzerinde çalışmak üzere tasarlanmış bir talimat setidir. Wasm, belirli bir binary formatında biçimlendirilmiş bir komut kümesidir ve bu spesifikasyona uyan herhangi bir bilgisayar (donanım veya yazılım), bu binary dosyaları okuyabilir ve bunları yorumlayabilir veya doğrudan cihaza özgü makine diline derleyerek çalıştırabilir.
Blazor ne değildir
Blazor, Microsoft’un tarayıcı içi uygulamaları barındırma konusundaki önceki girişimi olan Silverlight‘a benzemez. Silverlight, istemcide çalışması için bazı cihazların desteklemediği bir tarayıcı eklentisi gerektiriyordu. Blazor, bir tarayıcı içinde yürütmesi için istemcide herhangi bir eklentinin yüklenmesini gerektirmez. Blazor sunucu tarafında ya da WebAssembly kullanarak tarayıcının kendisinde çalışabilir. WebAssembly bir web standardı olduğundan, tüm büyük tarayıcılarda desteklenir, bu da istemci tarafı Blazor uygulamalarının Windows/Linux/Mac/Android ve iOS’ta bir tarayıcı içinde çalışabileceği anlamına gelir.
Blazor açık kaynak kodludur ve repository’sine buradan erişebilirsin. Kaynak kodun sahibi , .NET platformuna dayalı açık kaynak projelerini desteklemek amacıyla oluşturulmuş, kar amacı gütmeyen bir kuruluş olan .NET Foundation’a aittir .NET vakfına göre 3.700 şirket tarafından destekleniyor ve 61.000 katılımcısı var.
Blazor barındırma modelleri
Blazor 2 barındırma modeli sunar. Blazor WebAssembly ve Blazor Sunucusu.
Blazor İstemci Modeli
Buna istemci tarafı barındırma modeli de denir ve bu modelde uygulama doğrudan tarayıcı üzerindeki WebAssembly kodundan çalışır. Böylece uygulamanın ihtiyaç duyduğu her şey, örneğin derlenmiş uygulama kodunun kendisi, bağımlılıkları ve .NET çalışma zamanı tarayıcıya indirilir.
Blazor Sunucu Modeli
Buna sunucu barındırma modeli de denir ve bu modelde uygulama sunucuda ASP.NET Core uygulaması üzerinden yürütülür. İstemci ve sunucu arasında bir SignalR bağlantısı kurulur. İstemcide bir butona tıklama gibi bir olay meydana geldiğinde, olayla ilgili bilgiler SignalR bağlantısı üzerinden sunucuya gönderilir. Sunucu olayı işler ve oluşturulan HTML için bir fark hesaplanır. HTML’nin tamamı tekrar istemciye gönderilmez, yalnızca kurulan SignalR bağlantısı üzerinden istemciye bu fark gönderilir ve tarayıcı bu farka göre kullanıcı arayüzünü günceller. Blazor, kullanıcı eylemine yanıt olarak aynı sayfayı dinamik olarak yeniden render eden tek sayfalı uygulama mimarisini benimser. Kullanıcı arayüzünü güncellemek için yalnızca fark uygulandığından performans artışı sağlanır
Yeni Bir Blazor Projesi Oluşturmak
Visual Studio içerisinden Create a new project seçeneği ile yeni bir projesi başlatın ardından Blazor WebAssembly App template’ini seçin daha sonra açılan pencerede Blazor Server App seçeneğini seçin ve sunucu taraflı Blazor uygulamanızı oluşturun. Şimdi default proje yapısını inceleyelim
App.razor
Bu, uygulamanın kök bileşenidir. built-in Router bileşenini kullanır ve istemci tarafı yönlendirmeyi ayarlar. Tarayıcının iler geri gezinmesini engelleyen ve istenen adresle eşleşen sayfayı oluşturan bu yönlendirici bileşenidir. Yönlendirici, bir eşleşme bulunduğunda içeriği görüntülemek için Found özelliğini kullanır. Bir eşleşme bulunamazsa, NotFound özelliği uyarı mesajı görüntülemek için kullanılır
Pages Klasörü
Bu klasör, _Host.razor sayfasını ve Blazor uygulamasını oluşturan yönlendirilebilir bileşenleri içerir. Bileşenler .razor uzantısına sahiptir. Örnek template içerisinde Dizin bileşeni (Index.razor), Sayaç bileşeni (Counter.razor), FetchData bileşeni (FetchData.razor) ve Hata bileşeni (Error.razor) sayfalarını içerir, Shared klasöründe ise uygululama içerisinde paylaşılan bileşen bulunur
MainLayout bileşeni (MainLayout.razor)
MVC uygulamalarından bilinen Layout.cshtml sayfasının Blazor’daki karşılığı olan ana düzen bileşenidir
NavMenu bileşeni (NavMenu.razor)
Websitenin Sidebar alanında gezinme menüsünü uygular. NavLink bileşeni, index, counter ve fetchdata bileşenleri gibi diğer Razor bileşenlerine navigasyon bağlantılarını render eder. Bir NavLink bileşeni, o anda görüntüleniyorsa navigasyon menü öğesinde aktif olduğunu vurgulama özelliğine sahiptir.
_Imports.razor
Bu, bir Asp.net core MVC projesindeki _ViewImports.cshtml dosyasına benzer. Bu dosya ortak ad alanlarını (namespaces) içerir, bu nedenle bunları her razor bileşenine dahil etmemize gerek yoktur.
Pages/_Host.cshtml
Bu, uygulamanın kök sayfasıdır ve Startup.cs içinde MapFallbackToPage(“/_Host”) yöntemi çağrılarak belirtilir. Bir razor sayfası olarak uygulanır. İlk istek uygulamaya ulaştığında başlangıçta sunulan bu sayfadır. Standart HTML, HEAD ve BODY etiketlerine sahiptir. Ayrıca, kök uygulama bileşeninin yani App.razor’ın nerede oluşturulması gerektiğini belirtir. Son olarak, sunucu ile istemci tarayıcısı arasında gerçek zamanlı SignalR bağlantısını kuran blazor.server.js JavaScript dosyasını da yükler. Bu bağlantı, istemci ve sunucu arasında bilgi alışverişi yapmak için kullanılır. SignalR, uygulamalara gerçek zamanlı web işlevselliği eklemek için harika bir çerçevedir.
ASP.NET Core Razor Bileşenleri
Bu bölümde etkili ve yeniden kullanılabilir asp.net core razor bileşenleri oluşturmak için bilmeniz gereken bazı bilgileri paylaşacağız
- Blazor, bileşen odaklı bir framework’tur, yani bileşenler, bir Blazor uygulamasının temel yapı taşlarıdır.
- İç içe yerleştirilebilirler, yeniden kullanılabilirler ve uygun şekilde uygulanırlarsa birden fazla proje arasında paylaşılabilirler.
- Bileşen dosyaları .razor uzantısına sahiptir
Blazor bileşeni örneği
Yeni bir Blazor projesi oluşturduğumuzda template içindeki Counter bileşeni aşağıdadır. Bileşenin kullanıcı arayüzünü, yani görünümünü tanımlayan HTML kodunu ve işlem mantığını tanımlayan C# kodunun biradada olduğunu göreceksiniz
- Butona tıklandığında C# kodu IncrementCount() fonksiyonunu çağırarak currentCount değişkeninin değerini 1 artırır Bu, onclick özniteliği kullanılarak bağlanır .
- HTML’de, özel değişken currentCount değerine erişmek için @ karakterini kullanabilirsiniz .
- C# kodu @code bloğu içerisine yazılmalıdır. Birden fazla @code bloğuna sahip olmak da mümkündür. Ayrıca C# kodunu tamamen ayrı bir dosyada da yazabilirsiniz
Uygulama derlendiğinde, HTML ve C# kodu bir bileşen sınıfına dönüştürülür. Oluşturulan sınıfın adı, bileşen dosyasının adıyla eşleşir. Bileşen dosya adı büyük harfle başlamalıdır. Küçük harfle başlayan bir bileşen dosyası eklerseniz, kod derlenemez ve derleyici hatası alırsınız.
@page "/counter"Counter
Current count: @currentCount
@code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }
Bir Blazor Server App projesinde butona tıklandığında gerçekleşen işlemlerin sırası şu şekildedir
- Counter bileşeni başlangıçta oluşturulduktan sonra ve kullanıcı düğmeyi tıkladığında sunucu ve istemci tarayıcısı arasında bir SignalR bağlantısı kurulur
- Click olayı ile ilgili bilgiler SignalR bağlantısı üzerinden sunucuya gönderilir.
- Olaya yanıt olarak, bileşen yeniden oluşturulur, ancak HTML’nin tamamı istemciye geri gönderilmez. Sadece fark, yani render ağacındaki fark gönderilir, bu durumda, istemci tarayıcısına gönderilen fark yeni counter değerinin html çıktısıdır
- Tüm sayfayı yeniden yüklemek ve güncellemek yerine sayfanın yalnızca değişen kısmı güncellendiğinden, uygulama kullanıcıya daha hızlı ve daha duyarlı gelir
İçiçe Razor Bileşenleri (Nested Razor Components)
Counter bileşenini oluşturmanın yukarıda gösterildiği gibi bir yolu tarayıcıda “/counter” adresine gitmektir. Bu yol, bileşenin üst kısmındaki @page yönergesi ile belirtilir. Fakat bunun yanında bir bileşen, HTML sözdizimi kullanılarak başka bir bileşenin içine de yerleştirilebilir. Örneğin , Counter bileşenini Index bileşenine yerleştirmek için <Counter/> kullanın.
Bileşenler, bir blazor projesi içinde herhangi bir yere yerleştirilebilir. Web sayfaları oluşturan bileşenleri Sayfalar klasörüne ve yeniden kullanılabilir sayfa dışı bileşenleri Paylaşılan klasörüne yerleştirmek iyi bir uygulamadır. İsterseniz, bunları projenizde tamamen farklı bir özel klasöre de yerleştirebilirsiniz.
Bölünmüş bileşen HTML ve C# kodu
Bu örnekte, hem HTML hem de C# tek bir dosyadadır. Bu counter gibi basit bir bileşen için uygundur , ancak HTML ve C# kodunu kendi dosyalarına ayırmak genellikle iyi bir uygulamadır. Sadece bakım açısından iyi olmakla kalmaz, aynı zamanda unit test yapmak da kolaydır. Bileşen HTML ve C# kodunu kendi ayrı dosyalarına bölmek için 2 yaklaşım vardır.
- Kısmi dosyalar yaklaşımı
- Tek dosya yaklaşımı
Yukarıdaki örnekte tek dosya yaklaşımını gördünüz, Html ve C# kodunu ayırmak için Counter.razor dosyasını aşağıdaki şekilde düzenleyin
// Counter.razor @page "/counter"Counter
Current count: @currentCount
Bileşen derlendiğinde, bileşen dosyasıyla aynı ada sahip bir sınıf oluşturulacağını unutmayın. Counter.razor.cs adında başka bir sınıf dosyası oluşturun ve içine aşağıdaki kodu ekleyin. Bu dosyadaki sınıfın kısmi bir sınıf olarak uygulandığına dikkat edin.
// Counter.razor.cs
public partial class Counter
{
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Bir sonraki makalede Blazor hakkında örnek bir uygulama üzerinden detaylı bilgiler vereceğiz.
Faydalı olması dileğiyle