Javascript Yerine C# Kullanmaya Ne Dersiniz?

Blazor sayesinde web uygulaması geliştirirken istemci tarafında javascript yerine C# kullanabileceğinizi biliyor muydunuz?

Normalde interaktif web uygulamaları geliştirirken, istemci tarafı için javascript diliyle kod yazarız. İşlerimizi kolaylaştırmak adına düz javascript kodlarının yanında farklı kütüphaneleri ve çatıları da kullanmak durumunda kalırız. Jquery, underscore, lodash vb kütüphaneleri sanırım hepiniz duymuşsunuzdur. Daha kapsamlı ve kompleks interaktif web uygulamaları için ise angular, react, vue gibi kütüphaneleri kullanırız.

Javascript, esnek olması ve kolaylığı sayesinde, web uygulamalarının popüler olmasını da hesaba katarsak, olağanüstü bir kullanım oranına ve yaygınlığına ulaştı. Bununla birlikte javascript’in kapsamlı projeler geliştirmek için yeterli olgunluğa sahip olup olmadığı sürekli tartışılan bir konu olmaktadır.

Tuhaf ve anlaşılmaz yönleri, statik bir tip yapısına sahip olmaması vb özellikleri ile çalışma zamanında beklenmedik hatalar ile karşılaşılmasına çokça sebep olmaktadır. Typescript belli bir ölçüde bu hataları gidermek için geliştirildi. Javascript dilinin eksik noktalarını gidermek için araçlar ve yaklaşımlar yama şeklinde geliştirilmeye devam ediliyor.

Arka Uç (Backend) Tarafında Severek Kullandığımız Programlama Dilini İstemci Tarafında Da Kullanmak Mümkün Mü?

Microsoftun geliştirmiş olduğu Blazor çatısı sayesinde, C# ve Razor ile istemci tarafında kullanmak üzere interaktif uygulamalar geliştirebiliriz.

Bu sayede güçlü bir dil olan C# ile hem arka uç hem ön uç için kod yazabiliriz. Daha güzel olan tarafı ise dotnet standart yönergelerine uygun geliştirilmiş kütüphaneleri istemci tarafında kullanabiliyor olmamız.

Blazor Nedir?

Blazor, Microsoft tarafından geliştirilmiş istemci tarafı için C# ile kod geliştirmeye imkan veren bir çatıdır. Blazor sayesinde istemci tarafı için yazdığınız C# kodu bir eklenti kurmadan ya da bir çevrim (transpile) işlemi yapmadan tüm modern tarayıcılarda çalışacaktır. 

Aynı dil ile hem backend hem frontend için geliştirme yapabilmek bizi önemli bir geliştirme eforundan ve maliyetinden kurtaracaktır.
Diğer bir avantajı ise Visual Studio gibi gelişmiş ide’ler ile çalışabiliyor olmamız olacaktır.

Peki Bu Nasıl Mümkün Olabilmektedir?

Yeni geliştirilmiş olan WebAssembly (Wasm) standardı sayesinde anlattığımız şeyler mümkün olmaktadır. WebAssembly ikili formatta (binary) assembly benzeri düşük seviyeli bir dildir. Tarayıcılarda çalışmak üzere geliştirilmiştir. Javascript gibi tarayıcının barındırmış olduğu korumalı alanda (sandbox) çalışmak üzere geliştirilmiştir. 

WebAssembly teknolojisi Mozilla, Microsoft, Google ve Apple gibi şirketler tarafından desteklenmektedir. Emscripten SDK ile C++, D ve Rust gibi diller wasm formatına çevrilmektedir. Böylece Rust ile yazdığınız kodlar tarayıcıda doğrudan çalışacak bir şekle dönüşecektir. 
Blazor çatısıyla da aynı şekilde C# ve Razor kodunu wasm formatına çevirebilmektesiniz. 

Blazor’u önemli yapan taraflardan birisi de Microsoft tarafından geliştirilmiş olması ve resmi olarak desteklenmesidir. 

Linkteki blog yazısında belirtildiği üzere artık deneysel (experimental) olmaktan çıkıp resmi önizleme (official preview) durumuna yükseltilmiş durumdadır.

Üretim amacıyla kullanılması uygun olmayabilir. Fakat yakında çıkması beklenen beta ve final sürümü ile web uygulama geliştirme dünyasında önemli bir etkide bulunacağı kuşkusuz.

Blazor’un Dezavantajları

Mevcut haliyle Blazor’un dezavantajlarından da bahsetmiş olalım.

Dosya Büyüklüğü: Javascript ile geliştirilmiş kodlara kıyasla Blazor ile oluşturulmuş uygulama dosyaları daha büyüktür ve diskte daha fazla yer işgal etmektedir. Bu durumda sayfanın ilk açılışında yavaşlamaya sebep olabilir.

Hata Ayıklama (Debugging): Hata Ayıklama anlamında henüz yeterince gelişmiş olduğunu söylememiz zor. 
Bahsetmiş olduğum dezavantajların yeni sürümlerinde giderilecek ya da bu konularda iyileştirmeler mutlaka olacaktır.

Blazor’u Kullanarak Basit Bir Uygulama Geliştirelim

Uygulamamızı yazmaya başlamadan önce gereken kurulumları yapalım:

1) Dotnet core sdk 3.0 preview sürümünün kurulumu:

https://dotnet.microsoft.com/download/dotnet-core/3.0 sitesinden son preview sürümünü kuralım. Şu anda mevcut olan SDK 3.0.100-preview9-014004 sürümünü indirip kurun. 

2) Blazor Template kurulumunu yapın:

3) Geliştirme yapmak için Visual Studio 2019 Preview sürümünü kurun.

Gerekli kurulumları yaptıktan sonra artık Visual Studio 2019 preview sürümünü başlatarak uygulamamızı yazmaya başlayalım:

1) Yeni proje oluşturun:

2) Blazor app seçeneğine tıklayın:

3) Proje ile ilgili bilgileri girip create tuşuna basın:

4) Karşımıza iki seçenek çıkacak. Blazor Server App ve Blazor WebAssembly App. 

Blazor Server app seçeneği sunucu tarafında çalışıp signalR bağlantısı ile istemci tarafında etkileşime giren bir uygulama oluşturacaktır. Örneğimizi basit tutmak için ben Blazor WebAssembly App seçeneğini tercih edeceğim.

F5 komutuyla uygulamayı çalıştırıp projenin ilk halini görelim:

Counter sayfasına tıkladığınızda örnek bir razor ekranını görebilirsiniz. Click Me düğmesine tıkladıkça, sayıyı bir arttırmaktadır.
İstemci koduna bakarsanız, kodun C# ile yazılmış olduğunu görebilirsiniz.

Counter.razor:

5) Şimdi kendi örneğimizi yapalım. İki sayının çarpımını yapan basit bir örnek olsun. Pages/Index.razor sayfasına giderek aşağıdaki değişikliği yapalım:

Uygulamayı tekrar çalıştıralım:

WebAssembly ve Blazor sayesinde Sunucu tarafında ve desktop uygulama geliştirmek için kullandığımız C# dilini Razor ile birlikte artık interaktif web uygulamaları geliştirmek için de kullanabiliriz. Blazor her yeni sürüm ile birlikte daha güçlü ve kullanışlı bir noktaya gelecektir.

Referanslar ve Yardımcı Kaynaklar

Webassembly resmi sitesi:

https://webassembly.org/

Blazor:

https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor

Asp.net core çatısına giriş.

Yorum Gönder

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

Scroll to Top