ASP.NET Blazor Teknolojisi Nedir?
Herkese selamlar arkadaşlar. Bu yazıda sizlere ASP.NET Blazor teknolojisi hakkında ufak tefek bilgiler sunacağım.
Nedir Bu Blazor?
Bildiğiniz gibi bugüne kadar web sayfalarında sağı solu birbirine katmak, DOM üzerinde manilülasyonlar yapmak için hep JavaScript kullandık. Kullanmaya da devam edeceğiz.
Blazor ise, .NET developerların, .NET kullanarak client uygulamaları geliştirmelerine imkan tanıyan açık kaynaklı bir SPA framework.
Blazor ile yapılan uygulamalar, server components, webassembly ve hybrid olmak üzere 3 farklı gruba ayrılıyorlar. Ancak bu teknolojiye yapılan yatırım arttıkça farklı olanakların da ortaya çıkmaması için bir gerekçe yok.
Web Sitesi: https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor
Blazor İçin Gerekenler Neler Peki?
Blazor ile client uygulamaları yazabildiğimizi üst bölümde öğrendik. Aklınıza hemen NPM, Yarn vb. araçlar geliyor olabilir. Ancak, burada aklınıza direkt .NET 7 gelse iyi olur.
Tabii burada teknik altyapınızın da .NET alanında ufak da olsa dolu olması ve bazı noktalarda JavaScript interopt yapacağınız için temel JavaScript bilginizin olması da gerekmekte.
Blazor JavaScript Evreninde Bir Avengers Mıdır?
Aslında ben olaya böyle bakmak istemezdim. Çünkü burada, savaşacağı bir dünya dışı kötü karakter yok.
Tamamen kendi başına bir teknolojidir. Single Page Application’ı duyanlar ya da halihazırda bu tarz uygulamalar geliştirenler biliyorlar ki bazen hem backend hem de front-end’de farklı teknolojileri bilmek gerekebiliyor. Örneğin Django / React vb.
React’ı öğrenirken, backend frameworkünüzden hariç olarak tamamen farklı bir konsepte de aşinalık gerekiyor.
Bunu yaparken NPM ya da yarn gibi araçları da öğrenmeniz gereken. Bu dediğim şey JavaScript ekosisteminde tamamen ayrı bir süreç aslında. Kendine has evrende birçok şeyi öğrenmeniz gerekbiliyor.
Blazor ise tam da bu noktada farklılaşıyor. Bu kadar çok farklılığı bilme gereksinimini ortadan kaldırarak, tek bir teknolojiden full stack bir uygulama ortaya çıkarmanıza yardımcı oluyor. Yani sadece C# bilginiz ile hem back-end’i hem de front-end’in işlerini halledebiliyorsunuz.
Bu arada, Blazor ile JavaScript interopt yaparak hem yukarıdaki React gibi frameworkleri hem de normal JavaScript kütüphanelerini kullanabilirsiniz.
WebAssembly Desteği
Aranızda WebAssembly hakkında bir şeyler duyanlarınız vardır. Blazor ile WebAssembly projelerini de oluşturmanız mümkün.
Nedir Bu WebAssembly?
WebAssembly kısaca, compiled olarak gelen ufak boyutlu bir binary instruction formatıdır. Hızlı olması amacıyla tasarlanmıştır. Bu nedenle hızı C++’a daha yakın seviyededir. Bu native speed özelliği, onu önemli client uygulamalarında tercih edilir hale getirmiştir.
Normal JavaScript uygulamalarında, bütün JavaScript dosyaları tek tek iner, yorumlanır, ve bu şekilde çalıştırılırlar. Ancak WebAssembly uygulamalarında biraz daha farklıdır. Direkt compiled geldiği için yorumlanma ve derlenme ihtiyacı ortadan kalkar.
Ayrıca WebAssembly katı bir güvenlik modeli sunmaktadır. Bu sayede kötü niyetli kodlar kullanılarak yapılmak istenen işlemlere de kapalıdır. Bunu da sandbox ortamı sayesinde halleder.
Blazor Türleri Nelerdir?
Blazor’ı incelerken 3 başlık altında inceleyebiliriz.
Blazor Server
Adından da anlaşılacağı üzere, server tarafında işlemlerin gerçekleştirileceği proje türüne, Blazor Server deniyor. Blazor Server projeleri gücünü SignalR’dan alırlar. WebAssembly projelerine göre tabiiki daha maliyetlidir.
Çünkü sürekli bir şekilde round-trip yapılır, yüksek işlem gücü gerektiren tasklar burada tamamlanır ve UI’a sonuçlar iletilir. Klasik bir websocket işlemi aslında. Eğer websocket kullanılamıyor ise, fallback uygulanır.
Sunucu maliyeti daha fazla olacağı için,SignalR Service gibi bulut destekli yaklaşımlar tercih edilebilir.
Burada maliyet noktasında, componentlerin sunucuda render edilmesi, sürekli olarak SignalR’a bağımlı olmanız, sunucu üzerinde yüksek load oluşması, PWA desteğinin olmaması gibi olumsuz durumlar ortaya çıkabilir. Ayrıca, her connection memoryde saklandığı için, bellek gereksinimi artarken, scale edilebilirlik düşebilir.
Tabii WebAssembly projelerine göre daha ufak boyutlara sahip ciktilar uretirken, seo friendly sayfalar ortaya cikarabilirsiniz. WebAssembly projelerinden farklı olarak buradaki compiled binary’ler decompile edilemez çünkü server’da saklı kalırlar. Ayrıca veri tabanına bağlantı da burada sağlanabilir. Ama merak etmeyin hem blazor server hem de webassembly için de çözümler mevcut 🙂
Blazor WebAssembly
WebAssembly nedir bahsetmiştik. Blazor WebAssembly, SignalR gibi bir bağımlılığa ihtiyaç duymayan bir yapıdadır. Server projelerinde, razor sayfaları server’da çalışırken, burada ise browserda çalışır.
Normalde, WebAssembly direkt olarak DOM üzerinde değişiklik gerçekleştiremezken, Blazor burada JavaScript interopt yaparak DOM üzerinde değişiklikler yapar.
WebAssembly projeleri server’da derlenmediği, tüm bağımlılıkları tarayıcıda çalıştırdığı için daha büyük boyutlara sahiptir. Boş bir projenin boyutu yaklaşık 1.5MB boyutunda olabilmektedir. Bir SPA projesi için bir hayli büyük bir boyut. Ayrıca yazılan binary dosyaları çok kolay bir şekilde decompile edilebilirler.
Peki avantajları yok mudur? Öncelikle PWA ready olarak gelmektedir. Bir server’a bağlı olmasanız bile bu sayede offline olarak çalışabilmektedir.
Herhangi bir backend sunucusuna webapi sayesinde bağlantı kurabilirsiniz. Burada free takılabilirsiniz yani.
UI üzerindeki response’lar daha hızlı çalışır çünkü her şey client üzerindedir.
Blazor Hybrid
Blazor Hybrid ise .NET MAUI ile birlikte ele alınabilir. Ancak kısaca bahsetmek gerekir ise, .NET MAUI bir cross platform UI framework’üdür. Eskilerden bildiğimiz Xamarin’in evrim geçirmiş halidir.
XAML kullanarak MAUI uygulamaları geliştirebiliriz. MAUI burada masaüstü platformları da hedeflemekte. Yani Windows ya da MacOS için uygulamalar geliştirilebilir.
Blazor Hybrid ile native sistem API’larına erişim de sağlayabilirsiniz.
Blazor serisinin ilk yazısıydı. Devam yazısında ufak bir uygulama göreceğiz.
Okuduğunuz için teşekkürler.