Blazor nedir, bu makalede microsoft’un Webassembly teknoloji için geliştirmiş olduğu Blazor framework’ünden bahsedeceğiz. Ne olduğundan kısaca bahsettikten sonra, sonraki günlerde yayınlanacak Blazor makalelerinin temelini hazırlayacak olan Blazor geliştirme ortamı nasıl ayarlanır sorusuna da cevap bulacağız ve ufak bir demo ile blazor proje yapısına ufaktan değiniyor olacağız.

Blazor nedir, geliştirme ortamı nasıl kurulur?

VİDEO ANLATIM

Makale okumaktan çok video izleyerek bir şeyleri öğrenmek isteyenlerdenseniz bu makale ile başlayıp sonraki makaleler için artık video eklemeyi düşünüyorum. Umarım ilk video ile ilgili çok fazla olumsuz feedback ile karşılaşmam ama ilk video olması dolayısıyla olumlu olumsuz tüm feedbacklerinizi bekliyorum. Devamının gelmesi için de çok önemli 😊

Tarayıcıda dll dosyalarını WebAssembly üzerinden derleyebilen ve kısacası tarayıcı üzerinden çalışan bir .NET framework’ü olduğunu söylesek yanılmış olmayız ama aklımıza sakın bir plugin, add-ons, dönüştürücü v.s. gelmesin yada yeni bir Silverlight değil :). Sadece tarayıcı üzerinden çalışan bir .NET Framework’ü olduğunu söyleyebiliriz.

.NET web geliştiricilerinin çoğunu mutlu edeceğini ve heyecanlandıracağını düşündüğüm Blazor’ı muhakkak denemelerini tavsiye ederim kısa süre içerisinde proje geliştirme deneyimine sahip olduğum Blazor ile Component yapısını bolca kullanarak birkaç ürün ortaya çıkardım. Beni en çok cezbeden olaylardan bazıları ise şöyle Routing konfigürasyonu tek satır :), Two way binding’e AngularJS’in beta aşamasında tanıştığımdan beri aşığım ve bunda da yer almış olması beni çok sevindirdi yine aynı şekilde daha önce Knockout, Angular ve React gibi web framework’lerinden aşina olduğumuz SPA özelliği Blazor’da yer almaktadır.

Açıkçası Blazor ile ilk projemi çıkarmam sonrası yorumum gayet olumlu ama şunu öncesinde belirtmek isterim, Blazor geliştirmeye karar verdiğinizde karşınıza iki seçenek çıkıyor bu seçenekler de Client Side(WebAssembly) – Server Side’dır. Şimdiye kadar bahsettiğimiz tarayıcı üzerinden çalışması, dll’lerin tarayıcı üzerinden webassembly ile derlenmesi ve çalıştırılması gibi durumlar Client Side kısmına dahil olmaktadır. Client Side olmasının dezavantajı şu; maalesef ki eski sürüm tarayıcı kullananlar halen mevcut ve bundan dolayı en yeni sürüm tüm tarayıcılarda WebAssembly desteği varken eğer müşteri kitleniz içerisinde eski tarayıcı kullanan varsa Client Side proje türünden sorun yaşamanız mümkün. Peki Client Side ve Server Side seçeneği neden var? Şöyle ki dll’lerin derlenmesi ve gerekli kod bloklarının çalıştırılması kullanıcı tarayıcısında yapıldığından iş yükünü sunucudan alıp kullanıcı tarayıcısına ve sistemine yüklemiş oluyorsunuz ama sunucu konusunda sıkıntım yok yada çok fazla kitleye sahip bir ürüne sahip değilim sunucu performansı etkilenmez diyorsanız Server Side Blazor oluşturup bu tür durumları düşünmek durumunda kalmazsınız.

Buradaki tek fark sunucu performansını client cihazlarına dağıtmak değildir. WebAssembly ile hazırladığınız blazor projesine ait dll, script ve css dosyaları kullanıcı tarayıcısından download boyutu büyük olabiliyor. Orta ölçekli bir projede 15-20mb’ı bulabiliyor. Bu download miktarınıda gözönünde bulundurmakta fayda var. Ama diğer taraftan PWA olarak çalışmaya çok uygun ve projeye ait dosyalar kullanıcı cihazında olduğundan Offline çalışmaya imkan tanıyor. Server Side’dan özel olarak bashetmeye gerek yok kendi sunucunuzdan host edip kullanıcıların host edilen projeye erişerek render edilmiş ui, js ve css’leri elde etmesi gibi klasik web süreçleri ile ilerlemektedir ama serverside için sadece şu notu düşmekte fayda var, sunucu tarafı ile olan iletişimi arada otomatik olarak kurulmuş olan SignalR üzerinden sağlıyor.

Client side ve server side farkını örnek grafik üzerinden daha net görebiliriz

Ayrıca WebAssembly için yapılan alttaki alıntı yorumu bırakıp açıklama kısmından bizi daha çok ilgilediren Blazor ortamı nasıl kurulur sorusuna cevap verelim ve basit bir Blazor yapısına gözatmaya başlayalım.

WebAssembly(Kısaca wasm olarak adlandırılır), yürütülebilir programlar için taşınabilir bir ikili kod formatı ve buna karşılık gelen bir metinsel montaj dilinin yanı sıra bu programlar ve ana bilgisayar ortamları arasındaki etkileşimi kolaylaştırmak için arayüzler tanımlayan açık bir standarttır.

👨‍💻 Geliştirme Ortamı

Geliştirme ortamı için ihtiyacınız olan şey “Visual Studio 2019” ide’si veya “Visual Studio Code” editörüdür. Visual Studio’nun son sürümü ile çalışıyorsanız ve Web geliştirme özelliği etkinleştirilerek kurulum gerçekleştiyse ekstra bir sdk kurulumuna ihtiyacınız yoktur. Eğer sisteminizde Visual Studio, Rider gibi .NET ide’leri yoksa minimum  .NET Core 3 SDK‘sının son sürümünün yüklü olduğundan emin olunuz.

Dotnet core sdk’sının bilgisayarınızda kurulu olduğundan emin olmak yada veriyonu kontrol etmek için alttaki komutları kullanabilirsiniz. Öncelikle dotnet core’un yüklü olup olmadığını bir Command Prompt vey iTerm açarak alttaki komutu yazın.

Üstteki gibi bir çıktı iler karşılaşırsanız sisteminizde dotnet core’un yüklü olduğunu anlıyoruz.

Sisteminizde kurulu olan dotnet core versiyonunu kontrol etmek için ise alttaki komutu çalıştırmalısınız

‘dotnet’ is not recognized as an internal or external command şeklinde bir hata alırsanız yeni bir komut satırı penceresi açarak tekrar komutu deneyin yada dotnet core sdk’sının yüklü olduğundan emin olun.

Üstteki dotnet --version çıktısından gördüğünüz gibi dotnet core’un özellikle 5.0.102 versiyonu blazor için kullanıyorum çünkü .NET 5 ile beraber performans ve özellik bakımından çok büyük değişikliklerle geldi. Blazor geliştirmelerinizde .NET 5’i tercih etmenizi şiddetle tavsiye ederim.

Yeni Proje Oluşturma

Yeni bir blazor webassebly projesi oluşturmak için alttaki dotnet core cli komutunu çalıştırabilirsiniz.

Yeni bir blazor server projesi oluşturmak için alttaki dotnet core cli komutunu çalıştırabilirsiniz

Oluşan örnek projedeki bazı dosyaları tanımak gerekirse şöyle özetleyebiliriz

• Program.cs blazor aslında .net core üzerine kurulu olan bir yapı olduğundan sunucunun ayağa kaldırılması için bazı tanımlamaların yapıldığı ana dosya diyebiliriz.
• Startup.cs .net core projelerimizde yaptığımız gibi servislerimizi konfigüre ettiğimiz yada middleware katmanlarımızı tanımlayabildiğimiz dosya.
• App.razor uygulamamızın root component’i.
• BlazorApp/Pages Bu dizinde örnek olması açısından uygulamamız için oluşturulmuş bazı sayfalar yer almaktadır.
• BlazorApp.csproj uygulama projesinin ve bağımlılıklara ait tanımların yer aldığı dosyadır.

Projeyi Ayağa Kaldırma

Şimdi projemizi ayağa kaldırmak için alttaki komutu çalıştırın

Gördüğünüz gibi projesi çalıştırdığınızda bootstrap css ui template kullanılarak oluşturulmuş örnek blazor projesinin Pages/Index.razor sayfasının render edilmiş hali ile karşılaşıyor olacaksınız.

dotnet watch run komutu ile projeyi ayağa kaldırmanızın en büyük avantajı yaptığınız her değişiklik sonrası projenin tekrar render edilerek sayfanın otomatik olarak refresh edilmesi sağlanmaktadır.

Index.razor Sayfası

Üstteki ekran görüntüsünde gördüğümüz Pages/Index.razor sayfamızın örnek kodu ise şu şekildedir

Üstteki kodumuzda değinmek istediğim 2 nokta var.

1. @page direktifi ile routing mekanizmasına bu sayfanın hangi route eşleşmesi ile render edileceğini söylüyorsunuz ve ekran görüntüsünde gördüğünüz gibi base domain’e eriştiğimizde render edilmesini istediğimiz bir sayfa olmasını istediğimizden "/" gibi bir routing tanımı yaptık.
2. SurveyPrompt ise diğer JS SPA library’lerinden alışkın olduğumuz component yapısında farklı bir şey değildir. Blazor tarafında component yapısı için kullanabileceğiniz çok fazla özellik mevcuttur bu component oluşturma konusuna farklı bir makalede değineceğiz.

Counter.razor Sayfası

Üstteki ekran görüntüsünde gördüğümüz counter sayfasını diğer farklı example projeleri oluşturduğumuzda karşımıza çıkan yapıdan farklı değildir. Buton’a her tıklamanız sonrası sayı her seferinde bir arttırılarak render edilmesi sağlanır. Blazor’ın SPA olarak çalışması dolayısıyla siz reload’a zorlamadığınız sürece tekrar render edilmeden yaşamına SPA olarak devam etmektedir. Bu sayfaya ait kod Pages/Counter.razor dosyasında yer almaktadır ve hemen Counter.razor sayfasına ait kodlara göz gezdirelim.

@page direktifinde gördüğünüz gibi routing kuralı olarak route path’inin /counter olması durumunda sayfanın render edilmesini sağlıyoruz

Html elementlerine ait eventlerde “@” eki koymadan yazdığınız eventler için javascript fonksiyonlarını set edebilirken “@” eki koyarak yazdığınız eventler için @code blokları arasında tanımladığınız C# metodlarını set edebiliryorsunuz üstteki örnekde html button elementinin onclick event’ine C# metodunu geçebilmek için @onclick tanımlamasını yaptığımız görüyoruz ve böylelikle button elementine her tıklama sonrası currentCount adlı değişkenimiz bir arttırılarak <p> etiketleri arasında kullandığımız @currentCount tanımı ile sayfaya değişkenin güncel değerinin render edilmesini sağlıyoruz.

Blazor’da C# kod bloklarını isterseniz üstteki kod bloğunda gördüğünüz gibi @code direktifi altında yazabilir yada Counter.razor.cs altında yazabilirsiniz. Üstteki gibi basit bir sayfa yada component’iniz var ise aynı dosya içerisinde yönetmek faydalı olabilir ama çok uzun içeriğe sahip sayfalarda ayırmanızı öneririm.

Sayfayı Component Olarak Kullanmak

Sayfaları component gibi farklı sayfalarda kullanabilirsiniz. Örnek olarak Counter.razor sayfasını Index.razor sayfasında component gibi kullanmak için alttaki gibi bir tanımlama yapabilirsiniz. Aslında sayfa dediğimiz şeyi component’den ayıran tek şeyin tanımladığımız @page direktifi olduğunu bilmekte fayda var ve bu tanım da sayfayı component olarak kullanmaya engel olmadığından aslında sayfası component olarak kullanmak tabiri doğru olmasada en azından sayfa olarak tanımladığımız componentlerinde bir component gibi kullanıldığını bilmek faydalı olacaktır.

Component’de Değişiklik Yapalım

Counter sayfamız(componentimiz)’da ufak bir değişiklik yaparak aslında parametre alabilen bir component’e dönüştürelim.

Üstteki kodda işaretlediğim 12 ve 13’üncü satırda Counter componentimizin dışarıdan parametre olarak alabileceği bir property tanımı yaptık böylelikle butona her tıklamadan değerin kaçar kaçar arttırılacağını belirlemiş oluyoruz eğer component’i kullanım sırasında bu paremetreye bir değer geçişi yapılmaz ise varsayılan değerinin 1 olmasını belirliyoruz böylelikle currectCount değerinin 1-1 arttırılmasını sağlıyoruz.

Index.razor sayfamızda(componentimizde) kullandığımız Counter component’inin IncrementAmount parametresine 10 değerini geçerek her tıklama sonrası 10’ar artmasını sağlıyoruz. Örnek olarak alttaki ekran görüntüsünde Index.razor sayfasında Counter component’ine ait button’a 4 defa tıkladığımızda currentCount değerinin 40 olduğunu görüyoruz.

Yaptığımız kod değişikliği ise şu şekildedir

📚 Diğer .NET Core Makaleleri

• Blazor select multiple sorunu ve çözümü
• Asp.Net Core “… ‘Context’ only declares a parameterless constructor?” Hatası ve Çözümü
• ReactNative dotnetify ile .Net Core SignalR”a Bağlantı
• ASP.NET Core”da Server.MapPath Alternatif Yöntemi

✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından adlı makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.