C# İle Cross Platform
Blazor 101
“Ben iOS’çuyum, ben Android’çiyim” anlayışının son bulmaya başladığı bu zamanda, artık “Ben mobilciyim ben webçiyim” anlayışı da çoğu dilde son bulmaya başlıyor. Özellikle JS topluluklarının geliştirmiş oldukları kütüphanelere ve frameworklere bakarak, Microsoft’un bu anlayışı ne kadar geç benimsediği de ortada. Belki Java ve Python cephesinde farklı şeyler de vardır. Alanım olmadıkları için yorum yapamayacağım.
Geç olsun güç olmasın. Çünkü Microsoft Temmuz 2020’de çıkartmış olduğu Mobile Blazor Bindings projesi ile .Net’çilerin güneşli günler göreceğinin müjdesini verdi.
Lafı fazla uzatmadan konuya gireyim. Kağıdınızı, kaleminizi ve patlamış mısırınızı almanızı tavsiye ederim.
Öncelikle Hybrid nedir?
Hybrid kelimesinin farklı cümlelerde farklı anlamı var. Mesela Google’da sadece Hybrid diye arattığımda yukarıdaki Hybrid araba ve benzeri görseller çıkmakta. Ancak kelimeye baktığımızda nihayetinde “birden fazla konsepti bir arada barındıran” anlamına geliyor. Buradaki farklı konseptlerimizde ise elbette arabadan değil; mobil, desktop ve web platformlarından bahsediyoruz. Microsoft’un yazının devamında anlatacağım henüz emekleme aşamasında olan yapısı sayesinde bir .Net geliştiricisinin tam anlamıyla cross-platform uygulamalar geliştirebilmesinin önü açıldı.
Blazor WASM
2018 yılında yayınlanmış olan bu proje sayesinde, client tarafında C# kodlarını çalıştırabilir hale geldik. Peki bu C# kodu tarayıcıda nasıl çalışıyor diyorsunuzdur. Aslında tam olarak değil. Şöyle ki, eğer bir Blazor uygulaması açtıysak, bu uygulama bytecode olarak browserımıza ulaşıyor. Ancak development sırasında biz bunu JS’e çevrilmiş gibi görüyoruz. Bu da kodu okuyabilmemiz için yapılmakta aslında. Bunun bir de server versiyonu var ki onda da C# kodları, adından da anlaşılacağı üzere, sunucuda çalışıyor. Yapının beraberinde gelen SignalR ile de serverda çalışan kodlarımızın DOM’da yapacağı değişiklikleri kullanıcıya yansıtıyor. Ancak bizim konumuz WebAssembly (WASM).
Yeni nesil tarayıcılar destekliyor dediğim, o kadar da çok yeni tarayıcılar değil. Chrome’un dün çıkan versiyonundan bahsetmiyorum kesinlikle. Destek kapsamı oldukça geniş. Blazor uygulamaları Internet Explorer haricinde tüm günümüz tarayıcılarında çalışabiliyor. Kaldı ki hâlâ kullanıcısı olsa da IE artık günümüz tarayıcısı da değil.
Blazor, modern JS kütüphanelerinden olan React gibi, yeniden kullanılabilir komponent yapısı ile bizleri Microsoft altyapısı ve JS rahatlığı ile buluşturuyor. Yeniden kullanılabilirliği (reusability) açmak gerekirse, mesela bir yerde bir form yaptınız ve bu formun aynısını başka yerlerde de kullanmanız gerekiyor. Burada o formun tüm HTML’ini ve logiclerini baştan mı yazarsınız yoksa bu formu bir kere yazıp, hazırladığınız komponenti her yerde kullanmak mı istersiniz? Eskiden olsa her yere oturup uzun uzun HTML yazmak gerekiyordu. Ancak Blazor sayesinde bu formu ve bu formun logiclerini bir Razor komponente yazıyorsunuz. Bu yalnızca bir formla da sınırlı değil. Özel bir buton tasarlayıp, bu butonu da aynı şekilde her yerde kullanabilirsiniz. Yaratabileceğiniz komponentin bir sınırı bulunmamakta. Bu sayede de 1 kere komponent yazarak bunu n kere kullanabiliyorsunuz. Aynı komponentlerin aynı logicle farklı yerlerde farklı davranmalarını da parametreler aracılığı ile kontrol edebilirsiniz.
Peki Blazor için tarayıcılardan bahsettik. Hybridlik bunun neresinde? Yavaş yavaş geliyorum.
Blazor Hybrid
Henüz daha betanın da betası durumunda olan Blazor Hybrid projesi, bizlere aynı anda mobil ve masaüstü uygulama oluşturmamızı sağlıyor. Yani bu sayede iOS, Android, Windows ve MacOS işletim sistemlerine uygulama yazabiliyoruz. Giriş noktasında Xamarin’dan destek alan bu platform, şu anki haliyle bile başarılı bir şekilde bir müşteri isteğini yerine getirdi.
Blazor Hybrid ile geliştirme yaparken direkt olarak Xamarin.Forms projesine razor komponentlerimizi ekliyoruz. Bu komponentler daha sonrasında her platforma render ediliyor. Bu sayede mobil ve masaüstünde, Xamarin.Forms projesinde bir kere yazılan komponentleri kullanabiliyoruz.
Daha sonradan bunu da birleştirirler mi bilmem ancak Blazor WASM ile Blazor Hybrid’den ayrı ayrı bahsettim, çünkü bunlar birbirlerinden farklı proje türleri. Blazor Hybrid içerisine farkettiyseniz webi katmadım. Çünkü web tarafı Blazor WASM projesinde saklı. Bu şekilde iki farklı proje türünde aynı komponentleri kullanmak istediğimizde ne yapmamız gerekiyor?
Razor Class Library (RCL)
Blazor uzantısı olan .razor dosyalarının toplu halde bulunduğu bir proje türü olan RCL, Blazor’ın amacını biraz daha pekiştiriyor. Razor komponentleri, yeniden kullanılabilirliği ile geliştirme sürecimizi hızlandırıyor. RCL ise aynı Razor komponentlerini farklı projelerde kullanmamızı sağlayarak geliştirme sürecimizi hızlandırmakta. Mesela RCL ile kendimize has bir tema paketi yapabiliriz. Tüm projelerimizde de bu tema paketini kullabiliriz. Aynı komponentleri farklı farklı projelerde kullanmak için işlevsel olan bu yapı, bir uygulamanın farklı platformlara dağıtılması için de oldukça işlevseldir. Çünkü Blazor WASM ve Blazor Hybrid temellerine baktığımızda ikisinin de temelinde Razor komponentleri kullandığını görüyoruz. Bundan dolayı tüm Razor komponentlerimizi RCL projemize atıp, Blazor uygulamalarımızda da bu RCL projemize referans verdiğimiz takdirde tek seferde bir çok platforma başarılı bir çıktı almış olacağız. Burada tek dikkat etmemiz gereken nokta uygulamamızı 100% responsive tasarlamak.
Günümüzde native mobil yazan kaç kişi kaldı emin değilim. “Ben sadece iOS yazarım.” konusu zaten bitti gibiydi. Ancak günümüzdeki gelişmelerle “Ben sadece Web yazarım.” ya da “Ben sadece mobil yazarım” devri de yavaş yavaş kapanıyor gibi. Web yazabilen kişiler artık tüm platformlara hükmedebiliyorlar.
Yine de şunu söylemekte fayda var. Hiçbir şey native uygulamanın performansının yerini tutamaz. Ama geliştirme sürecindeki kaynak ve bilgi ihtiyacını düşününce, bir kere yazayım her yerde çalışsın (cross platform) olayı daha da mantıklı geliyor.
Bir sonraki yazımda muhtemelen yukarıda anlattıklarım için bir uygulama örneği de yapacağım.
MAUI (.NET 6.0)
Microsoft ve multiplatform demişken, MAUI’dan bahsetmemek olmaz. Ben aslında Blazor Mobile Bindings projesini duyunca bunun devamının gelmesini bekliyordum. Ancak onun yerini .Net 6 ile birlikte MAUI alacak gibi duruyor. Aslında ben Blazor’ı tamamen mobile implement ederler diye beklerken Xamarin’i webe taşımaları da biraz şaşırttı. .NET 6 önizleme versiyonunda MAUI bulunmakta mı emin değilim. Ancak denediğimde bununla ilgili de yazacağım kesin.