Selamlar,

Geçtiğimiz 18 haziran günü Microsoft Türkiye’de Build 2019′ un Türkiye ayağını gerçekleştirdik. Çok değerli konuşmacı ve katılımcı dostlarımızla çok faydalı bir etkinlik olduğunu düşünüyorum. Birçok konuya değindiğimiz bu etkinlikte ben de WebAssembly ve Blazor hakkında bilgiler paylaştım.

Bir önceki yazımda WebAssembly ile alakalı yazımı bulabilirsiniz. Bunun üzerine bu yazımda da sizlere Blazor bahsetmek istiyorum.

WebAssembly’yi .Net dünyasında kullanmak için henüz official pre-relase halinde bulunan Blazor a başvuracağız. Blazor ile Visual Studio da 3 farklı şekilde geliştirme yapmak mümkün. Bunların detayından aşağıda bahsedip örnekler göstereceğim.

1. Client-Side Blazor
2. Asp.Net Core Hosted Blazor
3. Server-Side Blazor

Client-Side Blazor

Bir önceki yazımda bahsettiğim gibi high-level dillerde yazılan kodun wasm a dönüşüp, browser içerisinde javascript sandbox ı içerisinde çalıştırılabilmesi mümkün. Hatta bu zaten WebAssembly nin en güçlü özelliklerinden biri.

Blazor için bu senaryo aşağıdaki şekilde gerçekleşiyor.

yazdığımız C#/Razor dosyaları compile olup .dll haline geliyor. daha sonra bu .dll dosyalarımız mono.wasm runtime ın da çalışabilir hale geliyor. mono.wasm da, javascript runtime üzerinde çalışıyor. Yani özetle şuan bir .dll dosyamız wasm olarak browserda çalışmak için mono ya biraz muhtaç. Ama bunlar arka planda olan şeyler, kullanırken mono vs uğraşmıyorsunuz. Ama yine de bu mono dan itibaren başlayan xamarin in gücünü ve arka planındaki güzelliği de bilmek açısından değerli 🙂

Projemizde bir mvc projesinde kullandığımız .cshtml sayfalarına benzer olarak, Client-side Blazor da .razor uzantılı dosyaları kullanıyoruz. Bu dosyalar derlendiğinde elde ettiğmiz dll, mono-runtime ile browser içerisinde javascript runtime ın da çalışabilir bir wasm a dönüşüyor.

Tamamen javascript kadar güvenli olduğundan tekrar söz etmek istiyorum, çünkü aşağıdaki resme baktığımızda bir .net web developer ın çok da alışık olmadığı bir takım dosyaların browser tarafına yüklendiğini göreceğiz. Bir çok yazılımcının aklına, browsera a yüklenen .net dll lerini gördüğünde güvenlik ile alakalı sıkıntılar yaratıp yaratmayacağı geliyor. Ama dediğimiz gibi herşey en sonunda javascript kendisinin çalıştığı, sandbox environment ında çalıştığı için en az javascript kadar güvenli.

Yukarıda ki resme baktığınızda, C# kodumuzun browser içerisinde wasm olarak çalışması için ne kadar fazla dll in de browser a yüklendiğini görüyoruz.

Mono.Security.dll, Mono.WebAssembly.Interop.dll, mono.wasm, solutionname..dll, System.dll, System.Core.dll gibi hem mono hem de .net e bağlı birçok dll in browser a yükleniyor. Bu sayede yazdığımız C# kodları, client side tarafında çalıır hale geliyorlar.

Peki direk filmin sonunu göstermiş olduk ama biraz daha başa sararak herşeye daha detaylıca bakalım.

Öncelikle  ister Blazor ile ister diğer pre-release olan tüm yeni feature ları denemek için neler yapacağımıza bir bakalım.

Blazor .net core 3.0 ile beraber sadece Server-Side desteği ile official olarak gelecek. Client-Side ve Core Hosted taraflarının release olmasına biraz daha vari ama denemekten hatta basit projeleri bu yöntemler ile de yapmaktan çekinmenize hiçbir sebep yok.

Yeni .net core feature larını denemek için aşağıdaki yöntemleri izlemenizi tavsiye ederim.

1. Öncelikle şuradan Visual Studio 2019 Preview ı download edin. Yeni featureları mevcut stabil VS 2019 da da aktif edebilirsiniz ama, preview ı indirip tüm yeni-henüz release olmamış özellikleri buradan daha hızlı update ler ile takip etmenizde fayda var.
2. Sonrasında şuradan son güncel .net-core 3.0 sdk sını indirmeniz gerekiyor.

Bu adımlar aslında birçok feature ı deneminiz için yeterli ama Blazor için iki adımımız daha var.

1. Buradan Asp.Net Core Blazor template ini download edip kurmanız gerekiyor. Oldukça basit bir işlem, bir VSIX dosyası (Visual Studio Extension) kurmaktan farklı değil
2. Son olarak da, aşağıdaki komutu çalıştırmanı yeterli olacaktır.
   1. dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview6.19307.2

Yukarıdaki tüm adımları tamamladığımızda, Visual Studio 2019 Preview ı açtığımızda, File-> New Project seçip yeni bir Asp.Net Core Project seçtiğimizde karçımıza aşağıdaki gibi bir ekran çıkacak. Yeni gelen, ve gelecek olan tüm proje template lerini burada görebilirsiniz.

yukarıdaki 4 adımı da tamamladığımızda tüm yeni Blazor template leri karçımıza çıkıyor.

Blazor dışında, gRPC service, Worker Service (eski IHostedServices veya Background Services ın yeni hali) gibi yeni templateleri de denemenizde fayda var. Bunlar ile ilgili de en kısa sürede yazmayı planlıyorum.

Şimdilik Blazor a geri dönelim. Seçeneklerden Blazor (Client-Side) seçip Create e bastığımızda karşımıza aşağıdaki gibi bir solution açılacak.

Yukarıda gördüğünüz gibi, Asp.Net Core projelerinde olduğu gibi bir Startup.cs, ve Program.cs dosyalarımız mevcut. Değişik gelecek ilk şey, .razor uzantılı dosyalar.Bunlar aslında klasik MVC projelerindeki .cshtml lerden çok da farklı değil. Gerisi tamamen bildiğiniz bir ASp.Net Core proje yapısı.

App.razor dosyasının içerisine baktğımızda aşağıdaki gibi tek bir satır kod görüyoruz.

Burada bir Router tanımlı. Assembly olarak da sadece projedeki Program.cs dosyasının bulunduğu assembly gösterilmiş. Sayfalar arasındaki geçişler sırasında postback olmadan geçişler olduğunu göreceksiniz. Bu router ın tanımlandığı yer.

Router AppAssembly="typeof(Program).Assembly" 

Program.cs dosyasının içerisi de aşağıdaki gibi. Normal bir Asp.Net Core projesi geliştirmesinde bulunduysanız, burada WebHostBuilder yada, HostBuilder kullanıldığını görmüşsünüzdür. Burada fark olarak kullandığımız HostBuilder, BlazorWebAssemblyHost oluyor. Use Startup yerine de yine Blazor için olan, UseBlazorStartup extension metodunu görüyoruz.

 public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
            BlazorWebAssemblyHost.CreateDefaultBuilder()
                .UseBlazorStartup();
    }

Yukarıda ki Program.cs tarafında kullanılmasını söylediğimiz Blazor Startup dosyasıda aşağıdaki gibi. Yine klasik bir core projesinden çok farklı değil. Sadece app ismindeki component imiz, builder a ekleniyor. App.Razor tarafında ki routing tarafının eklendiği ksım. Bir çok hali hazırda yazılmış komponentler mevcut, sizler kendi component lerinizi yazabilirsiniz. Bunlara başka bir yazıda detaylıca değineceğim.

   public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent("app");
        }
    }

Projede ki en temel kısımları gördükten sonra, .razor dosyalarının içlerine bir bakalım. Örneğin sol taraftaki Navigasyon menüsü için, proje içerisinde NavMenu.razor adında bir dosya mevcut. Bunun içeriği aşağıdaki gibi.

… @functions { bool collapseNavMenu = true; string NavMenuCssClass => collapseNavMenu ? “collapse” : null; void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } }

Yukarıdaki gibi normal bir html içerisine, tıpkı cshtml deik gibi C# kodlarımızıda ekleyebilyoruz. Burada ekstra olarak farklı olan şey sayfanın en sonunda function section ı içerisinde yazmış olduğumuz C# kodları. İşte bunlar tam olarak javascript metodları yazar gibi C# metodlarını yazığ sayfa içerisinde kullanacağımız kısım. Counter.razor dosyasına bakarken daha dikkatli inceleyeceğiz.

sayfaların en üst tarafında route ları belirtiyoruz. Örneğin aşağıda Index.razor ı görüyoruz, ekstra bir root a sahip olmadığından direkt olarak “/” ile işaretlenmiş durumda. bu route u verirken sadece başına @page yazmamız gerekiyor.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Sayfalar içerisinde başka sayfaları (componentleri – .razor dosyalarını) çağırmak da çok basit. yukarıda gördüğünü gibi Index içerisinde SurveyPrompt dosyası ayrı bir html tag i gibi veriliyor sadece bu kadar. Eğer komponentler içerisine parametre geçmek de istiyorsa bunu da yukarıdaki Title attribute u ile yağtığımız gibi, componenti tanımlarken ki Property adını yazıp verebiliyoruz atamak istediğimiz değeri.

Örneğin SurveyPromt.razor dosyasının alt tarafında yazılan function sekmesi şöyle;

@functions {
      // Demonstrates how a parent component can supply parameters
       [Parameter] string Title { get; set; }
}

Başında [Parameter] attribute ile işaretlenmiş bir Property mevcut. Bu parametreyide aynı isimle başka bir component içerisinden çağırırıken yukarı da index sayfasında yaptığımız gibi, bir html element ine attribute atarmış gibi tanımlıyoruz bu kadar.

Aşağıda bir de counter dosyasına bakalım. basit bir IncrementCount metodu tanımlanmış, currentCOunt değerini bir arttırıyor. Bu metodu html elementine atamak da sadece başına bir @ işareti koyup adını yazmak kadar basit. herşey normal cshtml dosyalarında razor engine kullanırken ki syntax gibi aslında. ama yapabildiklerimiz çok çok daha fazla =)

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

Bu projeyi çalışıtırığp çıktısına baktığımızda da en üstte gösterdiğim gibi bir çok dll in browser tarafına yüklendiğini görüyoruz. Mono runtime ı sayesinde de dll lerimiz javascript runtime ında çalışabilen wasm a dönüşüyor. Benim gibi javascript i çok seven biri değilseniz, WebAssembly ve Blazor ın yeri sizde de bambaşka olacaktır. =)

Bir sonraki yazımda Server-Side ve Core-Hosted seçeneklerini inceleyeceğiz.

Bir sonraki yazımda görüşmek üzere.