WebAssembly ve Blazor Nedir?

WebAssembly projesi 2015 yılında, aralarında Microsoft, Google, Mozilla ve Apple gibi devlerin olduğu WebAssembly Community Group’un kurulması ile başladı. Günümüzde ise epey yol kat edilmiş durumda.

Peki nedir bu WebAssembly?

Kısaca wasm, Browser’lar için geliştirilmiş Low-Level bytecode formatıdır. Bu tanımı biraz açmak gerekirse; WebAssembly, High-Level dillerin (C#, Java vb.) wasm formatına compile edilip, uygulamalarımızı browser üzerinde çalıştırabilmemizi sağlayan teknolojidir.

Compile sonucunda elde edilen .wasm dosyalarımız bir JS Runtime’ında çalıştırılır ve bu durum bizlere JS ile aynı güvenlik protokollerini kullandığını, aynı API’lere ulaşabildiğini gösterir.

WebAssembly’nin en güçlü özellikleri;

• Browser’lar üzerinden direkt olarak destekleniyor olması,
• JS ile beraber çalışabiliyor olması,
• Yorumlanabilen bir dil olmadığından Native Hız’da çalışabilecek alt yapıda olması,
• High-Level dillerin .wasm’a compile edilebilinmesi,
• JS Runtime ile çalışabildiğinden, güvenliğin JS ile aynı olması.

High-Level dillerin çoğu için Tool’lar var fakat biz yazımızda Blazor’ı inceliyor olacağız.

Blazor nedir?

Blazor; Angular, React ve Vue gibi SPA(Single Page Application) geliştirme yeteneklerine sahiptir ve bunun için olanak sağlar. .NET’i istemci tarafında oluşturmak için kullanılır ve WebAssembly altında çalışır. Tamamen C# ile çalışırken modern bir web uygulamasının tüm faydalarını sunar.

Yazdığımız C# / Razor kodları normal hayatta olduğu gibi bir .dll dosyasına dönüştürülür. Bu .dll dosyası, wasm formatına dönüştürülerek mono.wasm runtime u üzerinde çalışır.

Blazor Kullanmanın Yararları;

• Bellek korumalı bir sanal ortamda çalışır ve yerel uygulamalardan neredeyse daha hızlıdır.
• Gerekli tüm SPA özellikleri, güncel bir geliştirici deneyimi için bileşenler, yönlendirme, bağımlılık enjeksiyonu gibi Blazor tarafından desteklenir.
• Blazor uygulamaları, .NET içermeyen makinelere, tıpkı statik dosyalar gibi dağıtılabilir.
• Zengin IntelliSense ve daha az geliştirme süresi sağlar.
• Tüm genel tarayıcılar (Chrome, Edge, Firefox, Opera, Safari) tarafından desteklenir.

Blazor Modelleri;

Üç tür Blazor Modeli vardır;

• Blazor Client App
• Blazor WebAssembly App
• Blazor Server App

Bir sonraki yazımızda bu modelleri ayrıntılı bir şekilde inceliyor olacağız.

Visual Studio IDE’si ile Blazor App oluşturup bileşenlerini inceleyelim. (.Net Core 3.0)

Projemizi oluşturduktan sonra Solution Explorer’dan projeyi inceleyelim.

• wwwroot, css ve meta dosyalarını içerecektir.
• Data, class’larımızı konumlandıracağımız klasör.
• Pages, sayfa yapılarımızın barındırılacağı klasörümüz. .razor uzantılı olan Razor Component’lerimizin herbiri bizim sayfalarımızı temsil etmektedir.
• Shared , sayfalarımızı barındıran temel .cshtml dosyalarını içerir.
• _ViewImports . cshtml varsayılan bağımlılıkları ayarlar. Evet, bir web sitesindeki .NET bağımlılıkları.
• Gelecekte kaldırılacağından App.cshtml yoksayılabilir.
• global.json proje bilgisi içeriyor.
• Program.cs programın giriş noktasıdır, çerçeveye Startup.cs’yi kullanmasını söyler.
• Startup.cs , uygulama başladığında çalıştırılacak bir mantık içeriyor, örneğin bileşenleri kaydedebilir veya kütüphaneleri buradan yükleyebilirsiniz.

Yapısını yüzeysel olarak incelediğimiz Blazor Teknolojisine bir sonraki makalede CRUD işlemlerinin yapıldığı bir proje ile devam edeceğim.

Blazor’ın gelmiş olduğu nokta(Aralık 2019) bize ‘Kapsamlı’ projeler geliştirmek için yeterli altyapıyı sağlamıyor olabilir fakat yetenekleri ve geleceği çok heyecan verici. Blazor’ın oluşumuna önderlik eden Steve Sanderson, Daniel Roth ve Luke Latham ‘ ı çeşitli platformlardan takip etmenizi tavsiye ederim. Gelişmeleri birinci ağızdan duymak gerek. Umarım bu makale, sizler için de faydalı olmuştur.