İçeriğe geç

Blazor: ASP.NET Core ile tarayıcı tabanlı web uygulamaları

Microsoft bir süre önce Blazor isminde yeni bir .NET web framework’ünü duyurmuştu. Oldukça heyecanlandırıcı bir gelişme olarak gördüğüm bu teknoloji ile önümüzdeki zamanlarda full-stack development kavramını .NET beraberinde sıkça duyacağımızı düşünüyorum. Bu yazımda Blazor nedir, neden Blazor kullanmalıyız, Blazor ne işe yarar gibi konuları irdelemeye çalışacağım.

Blazor nedir?

Blazor; browser üzerinde WebAssembly teknolojisini kullanılarak, ASP.NET Core üzerinde C#, Razor ve HTML kodları ile client-side uygulamalar yapabileceğimiz yeni bir .NET web framework’üdür. Single page application (SPA) oluşturma sürecini basitleştirerek .NET üzerinde full-stack olarak geliştirme yapmamıza yardımcı olmaktadır.

Hali hazırda eğer benim gibi bir .NET geliştiricisi iseniz, ASP.NET MVC’den aşina olduğumuz Razor syntaxı ve C# programlama dilini kullanarak kolay bir şekilde Blazor uygulamaları yapabiliriz. Bunu, ASP.NET Core tabanlı Angular, ReactJS gibi bir JavaScript framework’üne benzetmemiz pekala mümkün.

C# kodunu browser üzerinde yazacağız demiştik. Avantajlarından büyük bir tanesi ise, bunu yaparken herhangi ek bir eklenti yüklememizin gerekmiyor olması. Günümüz modern browserları (mobil browserlar da dahil olmak üzere) Blazor’ı stabil bir şekilde çalıştırabilmektedir.

Mesela eskiden Silverlight vardı. Uygulamanın çalışması için bir client yüklemeniz gerekiyordu, onun gibi bir durum burada söz konusu değil 🙂

Blazor nasıl bir şey, kod yapısı syntax’ı tam olarak nasıl diye merak ediyorsanız, hızlıca aşağıdan bir önizleme yapabiliriz. Aşağıdaki resim basit sayaç uygulamasını göstermekte;
Blazor örnek kod yapısı

Resimde gördüğümüz, butonun onclick eventine alt kısımda tanımlanan fonksiyon verilmiş ve bu fonksiyon, currentCount integer değişkeninin değerini +1 artırmakta. Oldukça basit değil mi? Daha kapsamlı örnek bir Blazor uygulamasını sonraki yazımda beraber yapacağız.

Blazor Özellikleri

En önemli özelliği open-source olması ve bu da tamamaen ücretsiz olarak kullanılabileceği anlamı taşıyor.

Javascript yerine C# kullanarak web uygulamaları oluşturmaya imkan sağlıyor.

Component denilen, tekrar kullanılabilir yapılar oluşturulabilir. Bunu partial view gibi düşünebiliriz. Componentlere ViewBag mantığında değişkenler aktarmak mümkün. Bunları da html attributelerle yapabiliyoruz.

Kodlar C# ile yazılırken JavaScript ile de bağlantı koparılmıyor. Kod tarafında JavaScript, JavaScript tarafında da C# fonksiyonları çağrılabilmekte. Buna JavaScript interop deniyor.

Visual Studio, Visual Studio Code üzerinde veya .NET ortamını sağlayan IDE’ler üzerinde kolayca geliştirme yapılabiliyor.

Yazılan client-side C# kodları WebAssembly kullanarak doğrudan browser üzerinde çalışıyor.

WebAssembly nedir?

WebAssembly nedir, WebAssembly nasıl çalışır
WebAssembly (kısaltma olarak WASM), JavaScript dışındaki programlama dilleri ile yazılan kodun browser üzerinde çalıştırılmasını sağlayan bytecode formatıdır. Böylece klasik JavaScript koduna göre daha fazla performans alınabiliyor. Yapabildiği şeyi yukarıdaki resimde net olarak görnek mümkün.

Blazor ise .NET alt yapısını WebAssembly üzerine konuşlandırarak, C# ile single page application (SPA) türünde web uygulamaları yapmaya olanak sağlıyor. Blazor’ın WebAssembly ile birleştiği alyapının görseli ise şu şekilde;
Blazor ve WebAssembly, Blazor Diagram

Server-side ve client-side Blazor

Blazor için şu anda iki farklı model bulunmaktadır. Biri istemci tarafı, diğer ise sunucu taraflı model.

İstemci taraflı (client-side) model WebAssembly üzerinde çalışıyor. Bir client-side Blazor uygulamasını browser üzerinde açtığımızda önce C# kodları ve Razor dosyaları derleniyor. Derlenen bu dosyalar browser tarafından indirildikten sonra sayfayı çalıştırma işlemi başlıyor. Bu sebeple uygulamanın boyutu, bu kısımda oldukça önem teşkil etmiş oluyor. Çünkü daha fazla boyut, daha yavaş bir performans demek.

Sunucu taraflı (server-side) modelde, UI güncellemeleri, event yönetimi ve Javascript interop çağrıları SignalR bağlantısı üzerinden yapılıyor. Ayrıca .NET altyapısı WebAssembly yerine CoreCLR üzerinde çalışmakta, bu da bize .NET ekosistemine erişme, debug yapma gibi faydalar sağlıyor. Yukarıda bahsettiğimiz derleme ve browser download işlemleri server-side modelde yok. Çünkü zaten derlenmiş bir çıktıyı publish almış oluyoruz. Bu sebeple client-side modele göre daha performanslı çalışmaktadır.

Genel bir deyişle, server-side Blazor, .NET CoreCLR üzerinde çalışıyor, UI güncellemeleri, event yönetimi ve JavaScript fonksiyon çağrımları gibi gibi diğer işlevler ağ üzerinden SignalR bağlantısı tarafından gerçekleştiriliyor. Client-side’da tüm bu işlemler WebAssembly üzerinde yapılmakta.

Neden Blazor?

Blazor bize .NET ortamında single page application (SPA) türünde uygulamaları kolayca yapabilmeyi sağlıyor. Blazor, hızlı, yeniden kullanılabilir bileşenler sağlayan ve geniş bir geliştirici topluluğuna sahip açık kaynaklı bir yazılım.

Artık bir .NET geliştiricisi için Angular, ReactJS, Vue gibi bir JavaScript framework’ü kullanmadan da SPA uygulaması yapması hayal değil 🙂 İçerisinde bir SPA uygulamasının gerekli tüm özelliklerini barındırması (layout, routing, componentler, dependency injection gibi) ve tüm bunları .NET Standart altyapısı üzerinde çalıştırması oldukça güzel artılar.

Blazor ve WebAssembly, internet tarayıcısının DOM API’ına doğrudan erişimi olmasa bile bu negatif yanını JavaScript interop özelliği ile kapatıyor. Böylece mevcut JavaScript kütüphaneleri ile Blazor’ı rahatça konuşturabiliyoruz.

Henüz yeni olan ve kararlı sürüme geçmemiş olan Blazor’ın yeteneklerinin ilerleyen dönemlerde daha da artacağına, Microsoft’un bizi şaşırtmaya devam edeceğine inanıyorum 🙂

İlk Yorumu Siz Yapın

    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir