ASP .NET Blazor Teknolojisi

Herkese selamlar
Bu makalemde sizler ile Blazor teknolojisini inceleyeceğiz. Nedir??? Ne değildir??? Hakkında konuşacağız.

Bu arada yazımı beğenmeyi ve paylaşmayı, bi de beni takip etmeyi unutmayın :)

A’dan Z’ye Blazor Öğreniyorum…

Blazor, C# ve HTML kullanarak web uygulamaları oluşturulmasını sağlayan ücretsiz ve açık kaynaklı bir web framework’üdür. Windows, Linux ve macOS tarafından desteklenmektedir.

Normalde bir single page applicationa ihtiyacımız olduğunda javascript ya da typescript tabanlı bir yapıya ihtiyaç duyardık. Aklımıza ilk gelenler ise angular ya da react olur bu şekilde devam ederdik. Microsoft ise 2018 yılında bu akıma dahil oldu. Blazor, .net ile interaktif bir şekilde kullanılabilen istemci(client) tabanlı web UI oluşturmamızı sağlayan bir framework geliştirdiğini duyurdu.

Microsoftun geliştirmiş olduğu Blazor framework’ü 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 .net standart yönergelerine uygun geliştirilmiş kütüphaneleri istemci tarafında kullanabiliyor olmamız.

Blazor sayesinde istemci tarafı için yazdığınız C# kodu bir eklenti kurmadan ya da bir dönüştürme 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.

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

Dezavantajları

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.

Angular ve Blazor Arasındaki Farklar

• Component : Blazor içerisinde yer alan component mantığı ile angular içerisinde yer alan component mantığı bire bir aynıdır. Componentlerinizi hazırlayıp iç içe bir şekilde kullanarak kullanıcı arayüzünüzü oluşturabiliriz.
  Blazor içerisinde yer alan componentler tıpkı angularda yer aldığı gibi sınıf şeklinde yazılmıştır. Eğer daha önce angular üzerinde çalıştıysdanız kolay bir şekilde blazora alışabilirsiniz aynı zamanda asp.net ya da asp.net mvc içerisinde bir geçmişiniz var ise de razor söz dizimini (syntax) kullandığı için ciddi anlamda kolaylık sağlamaktadır.
• Routing : Angular içersinde routing yapmak istediğimizde app-routing.ts dosyasını app.module.ts dosyamıza implemente etmeliyiz. Blazorda ise routing tam olarak frameworkün bir özelliğidir. Componentler arasında tanımlamalar yapmak ve bunları routing içerisinde kullanmak ciddi anlamda kolaydır.
• Data Binding : Data binding kısmında ise öncelikle şunu söylemek istiyorum iki yapı içinde de two-way binding geçerlidir. Angular bu konuda biraz daha gelişmiştir. Blazor bu konuda biraz daha geride kalyıor, ikisi içerisinde debug yapmaya kalktığınızda blazorun bazı noktalarda çok stabil davranmadığını görebiliriz. Tabi şu an blazor çok yeni bir platform ve zamanla daha iyi olacaktır diye düşünüyoruz.

Özet Olarak ? Angular ve blazorun çok ortak noktasının olmasına rağmen esas farklılıklar nasıl bir server taraflı kod yazdığınızda ortaya çıkacaktır.Şu an için client side yani istemci taraflı basit bir uygulama yazdığımızı varsaydığımızda ciddi bir fark ortaya çıkmamaktadır. Tabi özellikle tekrar etmek istediğim bir şey var o da blazor henüz tam olarak olgunlaşmamış bir yapıdır. Büyük uygulamalar içerisinde eksikliklerini hissettirecektir. Zamanla bu eksiklikler kapatıldıkça teknoloji açısından neye , nasıl karar vermemiz gerektiğini bir kez daha düşünmekte fayda var.

C# ile Etkileşimli(interactive) Web Kullanıcı Arayüzü (UI) :

Interactive web UI with C#

• Blazor, JavaScript yerine C# kullanarak interactive web kullanıcı arayüzleri oluşturmanıza olanak tanır.
• Blazor uygulamaları C#, HTML ve CSS kullanılarak uygulanan web kullanıcı arayüzü componentlerini (bileşenlerini) yeniden kullanabilir.
• Hem istemci(client) , hemde sunucu(server) kodu C# ile yazılmıştır. Yazılan kod(code) ve kütüphaneleri(libraries) paylaşmamıza izin verir.
• Blazor web uygulamaları geliştirmek için araçlar(tools) ve kütüphaler(libraries) ile .NET geliştirici platformunu genişleten popüler web geliştirme framework’ü olan ASP.NET'in bir özelliğidir.

WebAssembly'de veya Sunucuda Çalışır :

Run on WebAssembly or the server

• Blazor, WebAssembly kullanarak istemci tarafı(client-side) C# kodumuzu direkt olarak tarayıcıda çalıştırabilir. Çünkü WebAssembly'de asıl .NET çalışıyor.
• Uygulamamızın sunucu tarafı(server-side) bölümlerinden kod(code) ve kütüphaneleri(libraries) yeniden kullanabiliriz.
• Alternatif olarak, Blazor ‘ istemci ’ mantığımızı ‘ sunucuda ‘ çalıştırabilir.
• İstemci (client) kullanıcı arabirimi olayları, gerçek zamanlı bir mesajlaşma framework’ü olan SignalR kullanılarak sunucuya (server) geri gönderilir.
• Uygulamada derleme işlemi tamamlandığında, gerekli kullanıcı arabilirimi (UI) değişiklikleri istemciye (client ’a) gönderir ve DOM ile birleştirilir.

Açık Web Standartları Üzerine Kurulmuştur :

Built on open web standards

• Blazor, eklenti veya kod çevirisi olmadan açık web standartlarını kullanır.
• Blazor, mobil tarayıcılar da dahil olmak üzere tüm modern web tarayıcılarında çalışır.
• Tarayıcıda çalışan kod, JavaScript frameworkleriyle aynı güvenlik sanal alanında yürütülür.
• Sunucuda(serverda) yürütülen blazor kodu normalde sunucuda(serverda) yapacağımız her şeyi yapma esnekliğine sahiptir doğrudan bir veritabanına bağlanmak gibi.

Kod ve Kütüphaneleri Paylaşır :

Share code and libraries

• Blazor uygulamaları, tüm .NET uygulamalarında ortak olan ve resmi bir .NET API özelliği olan .NET Standardı sayesinde mevcut .NET kitaplıklarını kullanabilir
• .NET Standard, sunucuda, tarayıcıda veya .NET kodu yazdığınız herhangi bir yerde aynı kod ve kitaplıkların kullanılmasına izin verir.

Blazor İle Kod Paylaşımı Hakkında Daha Fazla Bilgi

Javascript İle Birlikte Çalışır :

JavaScript interop

• C# kodumuz kolayca JavaScript API’lerini ve kitaplıklarını çağırabilir.
• C# ‘da istemci tarafı kullanıcı arayüzü mantığını yazarken mevcut olan JavaScript kitaplıklarının büyük ekosistemini kullanmaya devam edebiliriz.

JavaScript İle Birlikte Çalışma Hakkında Daha Fazlası Bilgi

Her İşletim Sistemi İçin Ücretsiz Araçlar Sunar :

Free tools for every operating system

• Visual Studio ve Visual Studio Code Windows, Linux ve macOS üzerinde mükemmel bir Blazor geliştirme deneyimi sağlar.
• Farklı bir düzenleyici kullanmayı tercih edersek, seçtiğimiz editör ile çalışmamıza izin veren .NET komut satırı araçları vardır.

.NET için Araçları Keşfetme

Kullanıcı Arayüzü (UI) Bileşenleri Ekosistemi :

UI component ecosystem

• Telerik, DevExpress, Syncfusion, Radzen, Infragistics ve diğerleri gibi üst düzey bileşen(component) satıcılarının yeniden kullanılabilir UI bileşenleri ile hızlı bir şekilde üretken oluruz.
• Blazor için DevExpress UI, 15'ten fazla UI bileşeniyle birlikte gelir, (Data Grid, Pivot Grid, Scheduler ve Charts içerir) böylece hem Blazor sunucu tarafı hem de Blazor istemci tarafı platformları için zengin kullanıcı deneyimleri tasarlayabilirsiniz.

Açık Kaynaklı ve Ücretsiz :

Open-source and free

• Blazor, 3.700'den fazla şirketten 60.000'den fazla katılımcıya sahip güçlü bir topluluğa sahip açık kaynaklı .NET platformunun bir parçasıdır.
• .NET ücretsizdir ve Blazor içerir. Ticari kullanım da dahil olmak üzere herhangi bir ücret veya lisans maliyeti yoktur.

GitHub’da Blazor

Aktif Topluluk :

Active community

• Blazor, soruları cevaplayan, örnekler üreten, öğreticiler yazan, kitap yazan ve daha fazlasına sahip aktif bir topluluğa sahiptir.
• Awesome Blazor, topluluk tarafından korunan Blazor kaynaklarının mükemmel bir listesini sunar.

Bir sonraki yazıma aşağıdaki linkten ulaşabilirsiniz…

A’dan Z’ye Blazor Öğreniyorum…

Şimdi hazırsan sende blazor öğrenmeye başlayaabilirsin ???

Umarım faydalı bir yazı olmuştur. Herkese mutlu kodlamalar.
KAMİL KAPLAN ( Software Engineer)

Bir sonraki makalede görüşmek ümidi ile sağlıcakla kalın.

KamillKAPLAN — Overview

Kamil KAPLAN — Software Engineer — Sentez Yazılım | LinkedIn