Blazor VS React / Angular / Vue.js

原文作者: Christian Findlay
原文鏈接：https://christianfindlay.com/2020/06/04/blazor-vs-react-angular-vue-js/

Blazor是一項(xiàng)新的Microsoft技術(shù)，允許開(kāi)發(fā)人員使用C＃為瀏覽器編寫(xiě)代碼, 本文將Blazor與其他三個(gè)常見(jiàn)SPA框架進(jìn)行了比較：React，Angular和Vue.js, JavaScript是當(dāng)前基于瀏覽器的單頁(yè)應(yīng)用程序（SPA）最受歡迎的語(yǔ)言，因?yàn)橹钡阶罱?，它還是在瀏覽器中運(yùn)行的唯一語(yǔ)言。這些框架可以從JavaScript或TypeScript進(jìn)行編譯或轉(zhuǎn)換。本文詢(xún)問(wèn)開(kāi)發(fā)人員是否需要依賴(lài)JavaScript，以及我們是否可以開(kāi)始使用C＃構(gòu)建SPA應(yīng)用程序。

什么是Blazor？

Blazor是用于Web和移動(dòng)設(shè)備的基于.NET開(kāi)發(fā)的SPA框架，并且是ASP.NET Core Web框架的一部分，Blazor使用現(xiàn)有的和大家熟悉的HTML文檔對(duì)象模型（DOM）以及CSS樣式來(lái)呈現(xiàn)和處理UI組件，但是，Blazor使用了C#來(lái)替代JavaScript進(jìn)行處理，因此開(kāi)發(fā)人員可以跨平臺(tái)共享代碼，Blazor使用Razor腳本聲明HTML，這是.NET開(kāi)發(fā)人員熟悉的腳本，Razor通過(guò)維護(hù)一種簡(jiǎn)單的語(yǔ)法來(lái)使開(kāi)發(fā)人員接近HTML，并且允許數(shù)據(jù)綁定，循環(huán)和變量定義。

程序運(yùn)行在.NET運(yùn)行時(shí)上面，有服務(wù)器端和客戶(hù)端兩種模式，對(duì)于服務(wù)器端，HTML DOM呈現(xiàn)在服務(wù)器上，然后通過(guò)Signal-R 發(fā)送到瀏覽器，進(jìn)行數(shù)據(jù)渲染, 對(duì)于客戶(hù)端，Mono在瀏覽器內(nèi)部的WebAssembly上運(yùn)行，WASM 無(wú)需服務(wù)器端渲染或其他瀏覽器插件即可充分發(fā)揮.NET的強(qiáng)大功能。

Blazor 允許開(kāi)發(fā)人員在桌面應(yīng)用和移動(dòng)應(yīng)用中使用，Electron允許開(kāi)發(fā)人員使用HTML和CSS構(gòu)建桌面應(yīng)用程序，Electron.Net是一種彌合差距并允許與Blazor一起使用的技術(shù)，微軟已為本機(jī)移動(dòng)應(yīng)用程序建立了實(shí)驗(yàn)性綁定，這可能表明Blazor應(yīng)用程序?qū)⒃趇OS和Android等平臺(tái)上運(yùn)行。

Blazor 功能特性

?使用C＃代替JavaScript和TypeScript構(gòu)建 Web UI?構(gòu)建漸進(jìn)式Web應(yīng)用程序（PWA）?創(chuàng)建和使用用C＃編寫(xiě)的可重用組件?在服務(wù)器端模式提供全面的調(diào)試支持，在客戶(hù)端模式進(jìn)行一些限制的調(diào)試?與HTML DOM的數(shù)據(jù)綁定（有限的雙向綁定）?使用C＃在客戶(hù)端和服務(wù)器之間共享代碼?可在所有現(xiàn)代網(wǎng)絡(luò)瀏覽器（包括移動(dòng)瀏覽器）中使用?Blazor代碼具有與JavaScript相同的安全沙箱?使用JavaScript操作調(diào)用JavaScript框架和庫(kù)?開(kāi)源

什么是WebAssembly？

是基于堆棧的虛擬機(jī)的二進(jìn)制指令格式, Wasm被設(shè)計(jì)為可移植目標(biāo)，用于編譯高級(jí)語(yǔ)言（如C / C ++ / Rust），從而可以在Web上為客戶(hù)端和服務(wù)器應(yīng)用程序進(jìn)行部署。

本質(zhì)上，它允許為Web瀏覽器編譯代碼。過(guò)去，諸如Adobe Flash或Microsoft Silverlight之類(lèi)的技術(shù)通過(guò)強(qiáng)制用戶(hù)安裝插件來(lái)實(shí)現(xiàn)，現(xiàn)在不再需要這些，并且.NET運(yùn)行時(shí)現(xiàn)在可以在WebAssembly上運(yùn)行。

什么是React？

React是Facebook開(kāi)源的一個(gè)JavaScript的UI框架，React并未嘗試向開(kāi)發(fā)人員提供構(gòu)建現(xiàn)代Web應(yīng)用程序所需的所有工具，相反，它專(zhuān)注于UI的主要方面，并允許開(kāi)發(fā)人員方便的使用這些組件，這聽(tīng)起來(lái)也沒(méi)啥，但事實(shí)并非如此，JavaScript UI庫(kù)發(fā)展了這么多年，但React作為1號(hào)UI庫(kù)，吸引了大量追隨者，簡(jiǎn)單說(shuō)，React主要是一個(gè)JavaScript庫(kù)，但是可以輕松地與TypeScript一起使用。

React 功能特性

?使用JavaScript或TypeScript構(gòu)建Web UI?構(gòu)建漸進(jìn)式Web應(yīng)用程序（PWA）?可在所有現(xiàn)代網(wǎng)絡(luò)瀏覽器（包括移動(dòng)瀏覽器）中使用?大型的社區(qū)支持?開(kāi)源?像VS Code這樣的IDE中的全面調(diào)試支持

Blazor VS React

JavaScript對(duì)于C＃開(kāi)發(fā)人員而言具有難的學(xué)習(xí)曲線(xiàn)，并且不是靜態(tài)類(lèi)型的語(yǔ)言。許多團(tuán)隊(duì)負(fù)責(zé)人會(huì)遇到雇用后端和前端開(kāi)發(fā)人員的問(wèn)題。很難找到同時(shí)擅長(zhǎng)JavaScript和C＃的開(kāi)發(fā)人員。如果Blazor是首選技術(shù)，則后端C＃開(kāi)發(fā)人員會(huì)掌握有關(guān)Blazor前端開(kāi)發(fā)的知識(shí)。后端開(kāi)發(fā)人員可以輕松切換角色來(lái)修復(fù)前端的錯(cuò)誤，也可以熟練地構(gòu)建前端應(yīng)用程序。

Blazor尚未像React那樣成熟，但是Microsoft會(huì)在該框架上建立基礎(chǔ)，然后在SPA領(lǐng)域流行，客戶(hù)端調(diào)試是缺少的主要功能，后邊應(yīng)該會(huì)支持。如果您的企業(yè)現(xiàn)在需要可用于生產(chǎn)的SPA并具有JavaScript專(zhuān)業(yè)知識(shí)，那么React將比Blazor更好的選擇，但是，如果團(tuán)隊(duì)由C＃開(kāi)發(fā)人員組成并且SPA有發(fā)展的空間，請(qǐng)考慮使用Blazor。在這種情況下，Blazor有很大的機(jī)會(huì)隨著時(shí)間的推移產(chǎn)生更多可維護(hù)的代碼。

盡管對(duì)于靜態(tài)類(lèi)型的語(yǔ)言通常是否更好還存在一些爭(zhēng)論，但是許多開(kāi)發(fā)人員會(huì)說(shuō)靜態(tài)類(lèi)型的語(yǔ)言對(duì)于大型項(xiàng)目而言更好。與JavaScript相比，C?？赡艹蔀楦扇〉倪x擇。

什么是Angular?

Angular是由Google團(tuán)隊(duì)編寫(xiě)和維護(hù)的，一套基于TypeScript并且流行的Web和移動(dòng)SPA框架。它與Angular不同的是，它是一個(gè)完整的框架。TypeScript是一種靜態(tài)類(lèi)型化語(yǔ)言，例如C＃，并且可以轉(zhuǎn)換為JavaScript。TypeScript和C＃相似，因?yàn)镸icrosoft在維護(hù)它。Angular的更高版本也以類(lèi)似于Blazor的方式支持服務(wù)器端渲染。模板語(yǔ)法與razor語(yǔ)法類(lèi)，并且具有數(shù)據(jù)綁定的HTML DOM UI組件。

Web開(kāi)發(fā)人員更熟悉Angular，因?yàn)樗昧爽F(xiàn)有的JavaScript框架，并且具有JavaScript背景。它擁有一個(gè)充滿(mǎn)活力的成熟的社區(qū)。

Angular 功能特性

?使用TypeScript構(gòu)建Web UI?構(gòu)建漸進(jìn)式Web應(yīng)用程序（PWA）?使用HTML DOM進(jìn)行雙向數(shù)據(jù)綁定?可在所有現(xiàn)代網(wǎng)絡(luò)瀏覽器（包括移動(dòng)瀏覽器）中使用?大型的社區(qū)?開(kāi)源?像VS Code這樣的IDE中的全面調(diào)試支持?完整的內(nèi)置API，可完成常見(jiàn)的應(yīng)用程序任務(wù)

Blazor VS Angular

Angular也是一個(gè)成熟的框架，擁有龐大的社區(qū)，而B(niǎo)lazor則在不斷發(fā)展。但是，Angular包含TypeScript范例，對(duì)于C＃開(kāi)發(fā)人員而言，它比JavaScript更自然地適應(yīng)。Angular比React更全面，并且將自己宣傳為框架而不是UI庫(kù)。Angular不僅僅是UI組件。它鼓勵(lì)開(kāi)發(fā)人員開(kāi)箱即用地使用組件，因此代碼變得更加統(tǒng)一。

什么是Vue.js?

Vue與Angular具有相似的背景，開(kāi)發(fā)人員使用JavaScript構(gòu)建應(yīng)用。它位于React和Angular之間，因?yàn)樗赨I庫(kù)和框架之間擴(kuò)展。它是一個(gè)更精致的框架，但仍然是React和Angular的競(jìng)爭(zhēng)對(duì)手。與React一樣，開(kāi)發(fā)人員可以使用TypeScript，但更多是 JavaScript。

Vue.js 功能特性

?使用JavaScript或TypeScript構(gòu)建Web UI?構(gòu)建漸進(jìn)式Web應(yīng)用程序（PWA）?使用HTML DOM進(jìn)行雙向數(shù)據(jù)綁定?可在所有現(xiàn)代網(wǎng)絡(luò)瀏覽器（包括移動(dòng)瀏覽器）中使用?中型的社區(qū)?開(kāi)源?像VS Code這樣的IDE中的全面調(diào)試支持?用于日常應(yīng)用程序任務(wù)的全套內(nèi)置API

Blazor VS Vue.js

Angular和React的許多比較點(diǎn)也適用于Vue.js。對(duì)于不僅僅需要UI庫(kù)但又不需要完整的Angular框架的開(kāi)發(fā)人員來(lái)說(shuō)，Vus.js可能是一個(gè)折衷的折衷方案。Angular和Vue.js之間一些比較傾向于表明Vue.js在性能方面確實(shí)做到合理。因此，對(duì)于目前需要開(kāi)發(fā)SPA的團(tuán)隊(duì)來(lái)說(shuō)，Vue.js可能是另一個(gè)不錯(cuò)的選擇，但是再次強(qiáng)調(diào)，將Blazor與C＃結(jié)合使用對(duì)于具有C＃背景的團(tuán)隊(duì)可能會(huì)產(chǎn)生更好的結(jié)果。

總結(jié)

現(xiàn)在，C＃開(kāi)發(fā)人員在構(gòu)建UI時(shí)有很多選擇。Blazor將熟悉的HTML DOM帶入C＃，并為Web開(kāi)發(fā)人員提供了使用C＃的能力。它具有構(gòu)建桌面和移動(dòng)應(yīng)用程序的潛力，并在Microsoft開(kāi)發(fā)社區(qū)中具有吸引力。在評(píng)估下一個(gè)SPA的技術(shù)時(shí)，你可以考慮使用 Blazor!

最后

歡迎掃碼關(guān)注我們的公眾號(hào) 【全球技術(shù)精選】，專(zhuān)注國(guó)外優(yōu)秀博客的翻譯和開(kāi)源項(xiàng)目分享，也可以添加QQ群 897216102