Blazor ve React Karşılaştırması 2021

Modern web geliştirme konusuna ilgili misiniz? O zaman bu yazı, şu anda piyasada en çok konuşulan iki ayrı web framework’ü karşılaştırmanıza yardımcı olacaktır. Bu yazımızda sizlere Blazor ve React karşılaştırması hakkında detaylı bilgiler vereceğiz.

Single Page Application (Tek Sayfa Uygulaması) geliştirmeyi düşünüyorsanız farklı web frameworkleri arasında seçim yapabilirsiniz. En yaygın üç seçenek arasında Angular, Vue ve React bulunuyor ancak bu web frameworkleriyle JavaScript veya TypeScript kullanmanız gerekiyor. Peki ya Javascript ile uğraşmak istemiyorsanız alternatif olarak ne yapabilirsiniz? İşte bu soruna bir çözüm olarak karşımıza Blazor çıkıyor.

Bu yazıda şunları öğreneceksiniz:

• Blazor Genel Bakış – Güncel Durum ve Özellikleri
• Blazor’ın Ana Özellikleri
• React Genel Bakış – Güncel Durum ve Özellikleri
• React’ın Ana Özellikleri
• Blazor’ı mı yoksa React’ı mı seçmelisiniz?

Blazor Genel Bakış – Güncel Durum ve Özellikleri

React yıllardır var olmasına rağmen Blazor yeni bir web frameworkü olarak karşımıza çıkıyor. Blazor, CSS ve HTML gibi zaten halihazırda var olan web teknolojilerine dayanmaktadır. Aynı zamanda, Blazor yeniden kullanılabilir ve etkileşimli web kullanıcı arabirimi geliştirmek için JavaScript yerine Razor ve C# sözdizimini kullanmanıza da izin verir. Bunu, ASP.NET ile WebAssembly ve Sunucu Taraflı uygulamalar altında uygulanan istemci tabanlı uygulamalar için yapabilirsiniz. Hem sunucu hem de istemci C# ile kodlandığında kütüphaneleri ve kodları paylaşmanıza izin verir. .NET kullanırken ise çağdaş ve canlı tek sayfalık (single-page) uygulama platformlarının geliştirilmesine olanak tanıyan bir platform sağlar.

Blazor’ı React ile karşılaştıracak olursak, Blazor’ın en iyi yanı olarak en son web standartlarından yararlanıyor olmasını gösterebiliriz. Ayrıca, Blazor’ı çalıştırmak için Add-On veya Plug-In gibi ekstra eklentilere ihtiyacınız yoktur. Bu da WebAssembly ile mümkün hale geliyor.

WebAssembly Nedir?

WebAssembly kısaca WASM olarak biliniyor ve WASM, modern web tarayıcılarında çalışabilen bir web standardıdır. Ayrıca, web platformuna dil çeşitliliği getirmektedir. JavaScript, HTML ve CSS’ten farklı olarak WASM, JavaScript’ten daha hızlı ve derlenmiş dillere çok yakın olacak şekilde tasarlanmış yürütülebilir programlar için bir ikili talimat biçimidir. WebAssembly yorumlanmış bir dildir fakat insanlar tarafından değil, makineler tarafından yorumlanmak üzere tasarlanmıştır. WASM, modern tarayıcıları çalıştırır.

Blazor’ın Çeşitleri

Bir Blazor uygulaması geliştirirken, geliştiricilerin iki seçeneği bulunuyor. Birincisi, sunucuda ASP.NET bağlamında çalışan Blazor Sunucusu. İkincisi ise istemci taraflı WebAssembly yürütme modeli olan Blazor İstemcisi.

• Blazor Sunucusu – ASP.Net Core sunucusu, Blazor’da geliştirilen uygulamalar için ana çalıştırıcıdır. Bu işlem ASP.NET Razor formatında yapılır. Uzak bölgelerdeki istemciler ince istemciler olarak işlev gördüğünden, sunucu ağır işlem yükünü alır. İstemcilerin bir web tarayıcısı küçük sayfa indirir ve kullanıcı arayüzünü günceller. Bu, tek bir bağlantı üzerinden gerçekleşir. Bu sunucu .Net Core 3’ün bir parçası olarak yayınlandı.
• Blazor WebAssembly – Bu modda, tek sayfalık uygulamalar çalışmadan önce istemcinin web tarayıcısına indirilir. Burada, indirme boyutu Blazor Sunucusuna kıyasla daha büyük olacaktır. Yine de uygulamaya bağlı olarak bu boyut değişmekte. Ayrıca, işlem tamamen istemci donanımında yapılır. Bu uygulama türünün faydalı yanı ise hızlı tepkime süresidir. Adından da anlaşılabileceği gibi, istemci tarafı frameworkü JavaScript ile değil WebAssembly ile yazılmıştır. Aynı zamanda beraber de kullanılabilirler.

Blazor’ın Ana Özellikleri

Eğer Microsoft web ekosistemindeki gelişmeleri takip etmiyorsanız nispeten yeni olduğu için Blazor adını henüz duymamış olabilirsiniz. Buna rağmen Blazor hakkında bilinen bazı yaygın yanlışlar var. Bu yüzden Blazor’ın bizlere neler sunduğuna gelin birlikte bir göz atalım.

CSS ve HTML

İnsanların Blazor’la ilgili sıklıkla sorduğu sorular genellikle CSS ile ilgili oluyor. Blazor, bileşenlerin oluşturulması için Razor şablonlarını kullandığında, sonuç tarayıcıda HTML olarak işlenir. Blazor tarafından oluşturulan CSS ve HTML, tarayıcı için diğer CSS veya HTML’den farklı değildir. Bunun anlamı, Blazor’da Sass, CSS Değişkenleri ve duyarlı tasarım gibi ön işlemcileri içeren tüm CSS özelliklerini kullanabilmenizdir.

CSS İzolasyonu

CSS İzolasyonu Blazor’ın bir parçasıdır. Bu özellik, kütüphaneler ve bileşenler arasında olabilecek herhangi bir çakışmayı önlemeye yardımcı olur. Bu özellik derleme sırasında devreye girer. Bu süre boyunca, Blazor kendisini bir HTML Özniteliği ile birlikte gelen CSS Seçicilere özel bir tanımlayıcıya ekler.

Form Bileşenleri

Blazor, yerleşik giriş ve form bileşenleri gibi HTML oluşturmaya yardımcı olacak ekstra özelliklere sahiptir. Doğrulamalı bir form oluşturma görevi, opsiyonel bileşenler tarafından soyutlanır. Sonunda, bileşenler standart HTML’i oluşturur. Birkaçını belirtmek için aria-, id, ve class gibi standart HTML niteliklerini tam olarak kullanabilirler.

Blazor, React JS’e hangi konuda rakip olabilir? Gelin birlikte bakalım.

React Genel Bakış – Güncel Durum ve Özellikleri

React, esnek, verimli ve bildirime dayalı bir JavaScript kütüphanesidir. UI bileşenleri oluşturma konusunda yardımcı olur. Aynı zamanda, Blazor ve React’in her ikisinde de etkileşimli ve modern istemci taraflı uygulamalar için kullanabileceğiniz istemci tarafı kütüphane/framework özelliği bulunuyor. Ancak, React’in kendisine baktığımızda programlama dili olarak JavaScript’i kullandığını görüyoruz. Web geliştiricileri bu frameworkü kullanırken JavaScript bilmiyorlarsa aşina oldukları dili yazmaya devam edebilirler. React Native ile sizin gibi web geliştiricileri Android ve IOS gibi benzer kod parçacıklarını paylaşan web uygulamaları geliştirebilir.

Facebook React’i geliştirdiğinde, Angular gibi diğer frameworkler zaten mevcuttu. O zamanlar, çoğu geliştirici çok fazla kodlama yapmak zorunda kaldığından diğer frameworkleri kullanan geliştiriciler, çoğu kodu yeniden işleme zorluğuyla karşı karşıya kaldı ve karmaşık bileşenleri daha kolay parçalayabilmek için farklı bir framework arayışı içerisine girdiler.

React, geliştiricilerin makine tarafından okunabilen kodların oluşturulmasını teşvik etmelerine yardımcı olan JSX’i kullanır. Bu platform, bileşenlerin tek seferlik doğrulanabilir bir dosyada birleştirilmesine bile yardımcı olur.

React’in Ana Özellikleri

Blazor ve React’in performans karşılaştırması her ne kadar önemli olsa da önce bir React’in ana özelliklerine bakalım.

JSX

JSX veya JavaScript XML, geliştiricilerin React ile HTML yazmasına ve bu HTML öğelerinin herhangi bir createElement() veya appendChild() yöntemi olmadan DOM’a yerleştirilmesine olanak tanır. JSX derlendiğinde HTML etiketlerini React öğelerine dönüştürür. Çok gerekli gibi gözükmese de JSX kullanmak React uygulamalarını yazmayı kolaylaştırır.

Virtual (Sanal) DOM

React, virtual (sanal) DOM kullanır. Bu sayede, geliştiriciler Blazor ve React karşılaştırması yaparken performans açısından daha hızlı olacak uygulamalar ortaya çıkartabiliyorlar. React’i oluştururken, geliştiriciler haklı olarak eski HTML’i güncellemenin pahalı ve zaman alıcı bir süreç olacağını düşündüler. Bu düşünceyle yola çıkarak Virtual (Sanal) DOM fikrini oluşturdular. Bu özellik sayesinde platform, tam olarak neyin yeniden oluşturulacağını veya DOM’un belirli bölümlerinin ne zaman dikkate alınıp alınmayacağını bilebiliyor. Bunun sebebi, platformun verilerin ne zaman değiştiğini belirleyebilmesidir. En iyi kullanıcı deneyimini sunabilmek için anında tepki veren bir kullanıcı arayüzü son derece önemlidir.

Blazor ve React Karşılaştırması

Geliştiriciler, React ve Blazor arasında bir seçim yapmadan önce genellikle hangi alanda ve ne için kullanacaklarına dikkat ederek tercihlerini yaparlar.

• Eğer bir. NET/VISUAL Studio geliştiricisiyseniz, .NET ve Blazor gibi full-stack (tam yığın) bir framework seçmek daha mantıklı olacaktır.
• Deneyimli bir JavaScript geliştiriciyseniz de yalnızca bir UI kütüphanesi olan React’i seçebilir ve ardından kendi React Stack’inizi oluşturmak için diğer kütüphaneyi seçebilirsiniz.

Hem Blazor hem de React olmak üzere her ikisi de açık kaynaklı araçlardır ve her ikisi de uygulama geliştiricileri arasında büyük popülerliğe sahiptir.

Ardından, iki framework arasında kayda değer bir fark görebileceğimiz performans karşılaştırmasına geçelim.

Performans Karşılaştırması

Blazor, React’ten daha mı iyi? İkisini karşılaştırken, kafa kafaya olan testlerin birçoğu, React’in Blazor’dan daha iyi yüklediğini ve işlendiğini gösteriyor. Blazor’ı WASM olarak kullanırken uygulamanız DLL kütüphanesi ile birlikte tüm .NET çalışma zamanını tarayıcıya indirir. Bu durum Blazor’ın React’in performansına ayak uyduramadığı algısını yaratıyor ve bu durum ilk işlemdeki gerçekliği gösteriyor. Yine de bu durum Blazor’ın yavaş olduğu anlamına gelmiyor, ancak uygulama geliştiricilerinin React’te deneyimleyeceği indirme ve işleme süreci Blazor’a göre oldukça kısa sürecektir. Bir uygulamanın tüm React yığınını (stack) dikkate alırsanız, React uygulamanızın ilk seferde daha yavaş yüklendiğini gözlemleyebilirsiniz. Yine de her uygulama farklı olduğundan her deneyimin farklı olacağını söyleyebiliriz.

Blazor WebAssembly ve React’i karşılaştırırken her ikisinin de etkileyici özelliklere sahip iyi birer frameworkler olduğunu söylemeliyiz. Eğer dikkat ederseniz, çoğu web geliştiricisinin bu iki frameworkü de desteklediğini ve her ikisinin de performansından memnun olduğunu görebilirsiniz. Bu nedenle, bir Blazor ve React karşılaştırması yaptığınızda, her zaman kendi testinizi yapmalı ve kendi uygulamanız için en iyi performansı gösterecek olana karar vermelisiniz.

Blazor’ı mı Yoksa React’i mi Seçmelisiniz?

Hem Blazor hem de React, bir sonraki projeniz için kullanabileceğiniz harika seçeneklerdir. Yine de birkaç şeyi göz önünde bulundurmalısınız:

• Blazor gibi nispeten daha yeni bir platformda yolunuza çıkabilecek engellerle başa çıkmaya hazır mısınız?
• UI kütüphanesinden yararlanmak için React’i öğrenmeye istekli misiniz?
• Microsoft .NET ekosisteminde modern web uygulamalarına geçişi kolaylaştırmak isteyen bir C# geliştiricisi misiniz?
• React uygulaması geliştirilmesini desteklemek için kendi kütüphane yığınınızı seçmeye razı olan deneyimli bir JavaScript geliştiricisi misiniz?

Güncel eğitim takvimimiz için lütfen tıklayınız.