微軟官方解釋Blazor
Blazor允許您使用C#而不是Javascript構(gòu)建交互式web UI。 Blazor應(yīng)用由可重用的web UI組件組成，這些組件使用C#、HTML和CSS實(shí)現(xiàn)。客戶端和服務(wù)器代碼都是用C#編寫的，允許您共享代碼和庫。
Blazor 是一個(gè)使用 .NET 生成交互式客戶端 Web UI 的框架：
使用 C# 代替 Javascript 來創(chuàng)建信息豐富的交互式 UI。
共享使用 .NET 編寫的服務(wù)器端和客戶端應(yīng)用邏輯。
將 UI 呈現(xiàn)為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動瀏覽器。
與新式托管平臺（如 Docker）集成。
使用 .NET 進(jìn)行客戶端 Web 開發(fā)可提供以下優(yōu)勢：
使用 C# 代替 Javascript 來編寫代碼。
利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)。
在服務(wù)器和客戶端之間共享應(yīng)用邏輯。
受益于 .NET 的性能、可靠性和安全性。
在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
以一組穩(wěn)定、功能豐富且易用的通用語言、框架和工具為基礎(chǔ)來進(jìn)行生成。
看到這里有些小伙伴手中的瓜已經(jīng)要丟出來了，的確有部分是夸大了的，起碼VS在三個(gè)平臺高效工作這事兒，嗯。。。其他的繼續(xù)吃瓜吧
Blazor Vs MVC
什么是MVC
官方解釋：ASP.NET Core MVC 是使用“模型-視圖-控制器”設(shè)計(jì)模式構(gòu)建 Web 應(yīng)用和 API 的豐富框架。
圈重點(diǎn)，Blazor是交互式Web UI，而MVC是Web應(yīng)用和API
什么是交互式Web UI
谷歌、百度轉(zhuǎn)了一圈，沒有這個(gè)解釋，連Wiki也是一臉懵逼。
嘗試?yán)斫庖幌掳桑换ナ絎eb UI重點(diǎn)在于交互，而Blazor的官方解釋是用C#代替Javascript，那我們看看Javascript有什么功能，我百度找一段過來：
嵌入動態(tài)文本于HTML頁面
對瀏覽器事件做出響應(yīng)
讀寫HTML元素
在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)
檢測訪客的瀏覽器信息。控制cookies，包括創(chuàng)建和修改等
有這些基礎(chǔ)功能，用戶不需要在靜態(tài)頁面里跳來跳去了，的確體驗(yàn)會好很多
Blazor有什么優(yōu)勢
提供了一些交互能力，不再是純粹的靜態(tài)頁，雖然mvc可以使用Javascript達(dá)到同樣的效果，但你需要掌握J(rèn)avascript，甚至還要再學(xué)習(xí)jQuery、Angular、Vue等。而Blazor提供的交互能力則是使用C#。
吹是吹完了，但你真的可以100% C#嗎？這很難，你會遇到各種問題，比如兼容性、性能等。好了，那我可以不用了嗎？等等，下面還有瓜
Blazor Vs 現(xiàn)代前端(Angular、Vue等)
我們從幾個(gè)方面來對比一下吧
調(diào)試
全家桶
以Vue為例，Vue全家桶包括Vue Cli、Vue Router、Vuex
Blazor：
Cli：dotnet cli
Router：Microsoft.AspNetCore.Components.Routing.Router
Vuex：Blazor狀態(tài)管理，區(qū)別在于WASM狀態(tài)保存在瀏覽器內(nèi)存中，而Server保存在服務(wù)器內(nèi)存中。而且Blazor狀態(tài)管理更強(qiáng)大的是借助.Net的能力，原生支持持久化存儲、跨線路保存（Server下共享服務(wù)器內(nèi)存）、ASP.NET Core 受保護(hù)的瀏覽器存儲（Server獨(dú)享功能）
組件庫
主流的Bootstrap, Ant Design, Material Design等雙方都有。但由于現(xiàn)代前端多年的積累，質(zhì)量上的確有一定差距。
除了豐富程度上，Blazor允許被Javascript調(diào)用加載，并生成Angualr、React等組件。
雖然這看起來跟用C#解決代替Javascript有點(diǎn)沖突，但融入大環(huán)境也是不錯(cuò)的
下圖演示的是Blazor提供的inventory-grid Component被React引用的例子(當(dāng)然也可以給Angular)：
更神奇的是，在React復(fù)用的Blazor Component居然也支持Hot Reload。先不說Hot Reload到底如何，單是這個(gè)方向其實(shí)還是值得期待一下Hot Reload的未來吧。
不止可以給React提供復(fù)用的組件，還可以給WPF
第三方庫
舉幾個(gè)前端常用庫來比較。
網(wǎng)絡(luò)：現(xiàn)代前端有axios，Blazor有HttpClient
數(shù)據(jù)操作：現(xiàn)代前端有Lodash，Blazor有Linq
時(shí)間：現(xiàn)代前端有moment.js、Day.js，Blazor有DateTime全家桶
響應(yīng)式編程：現(xiàn)代前端有rx.js，Blazor有Rx.Net（沒有用過，理論上.Net基本都能用，歡迎糾錯(cuò)）
Mock：現(xiàn)代前端有Mock.Js，Blazor有Moq，當(dāng)然除了mock以外還有端到端的，雙方也都有。
對比下來其實(shí).Net反而還有點(diǎn)優(yōu)勢，那就完美嗎？當(dāng)然不是，再說點(diǎn)劣勢的部分吧。
Charts：現(xiàn)代前端有ECharts等，Blazor不想說話
雖然目前Blazor的確沒有成熟、免費(fèi)的Charts組件庫，但因?yàn)锽lazor可以與JS交互的能力，調(diào)用ECharts也很簡單，稍微考驗(yàn)一點(diǎn)點(diǎn)小伙伴的動手能力
富文本編輯器、拖拽。。。
Blazor罵罵咧咧的退出了群聊。。。
包管理
Blazor：NuGet
現(xiàn)代前端：NPM、Yarn
性能
數(shù)據(jù)不直觀，先從.Net Conf 2021上的演示截圖看一下：
有量化數(shù)據(jù)嗎？有：
視頻地址：https://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4
那AOT可以解千愁嗎？也不是。起碼應(yīng)用大小上來說的確也大了不少，但這并不妨礙AOT可以解決特定場景的問題。技術(shù)總要選擇在適合的場景使用它，而不是盲目的。
完了嗎
當(dāng)然沒有，其實(shí)這樣比較對于Blazor是不公平的，因?yàn)锽lazor站在.Net的肩膀上有更多的亮點(diǎn)，比如原生支持的泛型、DI、面向?qū)ο笤O(shè)計(jì)（雖然TS也是）、數(shù)不過來的.Net類庫、跨平臺應(yīng)用（MAUI）等。
其實(shí)沒有必要只看到Blazor的劣勢，也可以看看站在.Net上的前端能走多遠(yuǎn)，這不也是我們期待的嗎？
看到這里，有些.Net古董級大佬要出來發(fā)話了，Silverlight！是的，但這次WASM沒有再要求下載插件了。
Web Assembly Vs Server（服務(wù)器端渲染）
Web Assembly：WebAssembly是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運(yùn)行 － 它是一種低級的類匯編語言，具有緊湊的二進(jìn)制格式，可以接近原生的性能運(yùn)行，并為諸如C / C ++等語言提供一個(gè)編譯目標(biāo)，以便它們可以在Web上運(yùn)行。它也被設(shè)計(jì)為可以與Javascript共存，允許兩者一起工作。
Server（Server Side Render - SSR）：將組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序。
為什么用SSR
服務(wù)器端渲染 (SSR) 的優(yōu)勢主要在于：
什么時(shí)候用SSR
使用服務(wù)器端渲染 (SSR) 時(shí)還需要有一些權(quán)衡之處：
開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用；一些外部擴(kuò)展庫 (external library) 可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 (SPA) 不同，服務(wù)器渲染應(yīng)用程序，需要處于服務(wù)端運(yùn)行環(huán)境。
更多的服務(wù)器端負(fù)載。
服務(wù)器端渲染 vs 預(yù)渲染 (SSR vs Prerendering)
如果你調(diào)研服務(wù)器端渲染 (SSR) 只是用來改善少數(shù)營銷頁面（例如 /, /about, /contact 等）的 SEO，那么你可能需要預(yù)渲染。無需使用 web 服務(wù)器實(shí)時(shí)動態(tài)編譯 HTML，而是使用預(yù)渲染方式，在構(gòu)建時(shí) (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個(gè)完全靜態(tài)的站點(diǎn)。
Blazor Server支持Prerendering
Blazor該選Web Assembly還是Server
看一下.Net Conf 2021大會上的一張圖：
總結(jié)一下：
我們在做什么
又是一個(gè)老生常談的問題，.Net的覆蓋面太廣了也導(dǎo)致很難解決所有問題。我們在權(quán)衡利弊之后是不是可以為.Net生態(tài)共建出自己小小的一份力呢？
開源的組件庫
再回到組件庫上，目前市面上的組件庫其實(shí)不少了，何必要繼續(xù)在這個(gè)泥潭里插一腳呢？
開發(fā)過組件庫的同學(xué)，或者貢獻(xiàn)過源碼的同學(xué)應(yīng)該都體會到了，寫一個(gè)組件是多么的復(fù)雜。而大家對于一個(gè)設(shè)計(jì)的審美角度也是不同的。當(dāng)你喜歡的設(shè)計(jì)沒有提供實(shí)現(xiàn)怎么辦？從頭寫嗎，那太累了，所以我們嘗試了一件事情。
先看一下大概思路：
簡單的剖析一下：
在Blazor的基礎(chǔ)上，構(gòu)建一個(gè)新的組件庫叫 Blazor Component
那他有哪些特性呢？
插槽與交互的統(tǒng)一單元測試（目前正在38%，短期目標(biāo)是80%，長期目標(biāo)是90%+）
基于Material Design（樣式引自Vuetify）的示例項(xiàng)目，可以達(dá)到生產(chǎn)可用（我們自己的公司在用，也是世界五百強(qiáng)企業(yè)在用）
快速實(shí)現(xiàn)新的組件庫，只需要基于某個(gè)Design + 樣式控制屬性 + 特殊交互即可
未來是值得憧憬的，我們希望未來是這樣的：
慚愧，蹭了一波字節(jié)的熱度
MASA Blazor
基于Blazor Component和Material Design的Blazor組件庫
截止目前共68個(gè)基礎(chǔ)組件，后續(xù)會繼續(xù)增加
預(yù)置組件，提供與.Net功能深度集成且常用組合類組件，如Url、面包屑、菜單三聯(lián)動，高級搜索，i18n等
MASA Blazor Pro提供多種常見場景的預(yù)設(shè)布局
全職團(tuán)隊(duì)維護(hù)，Issue快速響應(yīng)
知名企業(yè)在用，未來MASA Stack產(chǎn)品線也將一直使用，持續(xù)增加新功能
免費(fèi)、開源
我們還計(jì)劃未來支持一鍵切換主題（代碼切換已經(jīng)提供）、預(yù)置布局、數(shù)據(jù)展示類組件、WorkFlow類組件等。
MASA Blazor Pro
基于MASA Blazor提供的Admin模板，先放幾張?jiān)O(shè)計(jì)稿吧，源碼會跟MASA Blazor一起放出。
MASA EShop
基于MASA Framework搭建的 EShopOnDapr，將會使用MASA Blazor Pro提供完整的前后端示例
開源地址：GitHub - masalabs/MASA.EShop: A sample .NET Core distributed application based on eShopOnDapr, powered by MASA.BuildingBlocks, MASA.Contrib, MASA.Utils,Dapr.
總結(jié)
說到底沒有完美的技術(shù)，在你權(quán)衡利弊之后在正確的場景使用它就是最合適的。
是春天還是寒冬也不重要，重要的是當(dāng)下這一刻，它是否解決了你的痛點(diǎn)。
該文章在 2023/6/2 17:39:43 編輯過
400 186 1886
