Blazor App 試用手札 (2021/06/18)

筆記 .NET5 Blazor 開發過程。

從結論講起

• 綜合來說：整體框架簡潔有力。

• .NET5 Blazor Server

  • 網站框架特徵像WebFrom。

  • 除了Web UI 其它面向完勝 WebForm。

  • 通訊方式是SignalR自動執行，像是呼叫函式一樣。

• .NET5 Blazor WASM。

  • 網站框架特徵像React App。

  • 綜合成熟度遠遠落後React App。

  • 通訊方式是 HTTP。

• 但是…前端UI預設只有傳統CGI介面。

• 已知有數套CSS-Framework支援Blazor：

  • MatBlazor - 發行日期：2018/10/25

  • SKCLUSIVE-UI - 發行日期：2019/12/23 - 收費。

  • MudBlazor - 發行日期：2020/09

  • Radzen Blazor Components- 發行日期：2020年末

  • more → 8 Blazor component libraries to speed up your development

三大類Blazor App

※官方分成二類，不過本人分成三類。

• Blazor Server

  • both server and client

  • 似 WebForm。

• Blazor WASM

  • client only

  • 似 React App，最大差別在底層不是node.js 而是 WebAssembly。

• Blazor WASM hosting (裝載)

  • client + server

  • 似 React App 與 Web API 裝載在一起。

在開發程序上這三類有些微差異。

前端開發

• 仍要學HTML5, CSS3。

• 以C#取代JavaScript。

• 需學Razor syntax指令，讓前後端『融合』。

  • 此版Razor有支援Two-way bindding，有AngularJS的味道。

• CSS分隔是預設能力之一。

• 全程強型別，沒有前、後端轉型的〝額外工作〞。

Blazor Server 後端與通訊

• 用所謂的 services @inject。非Web API。

• 前、後端以SignalR繫結，訊息會自動傳遞像WebForm一樣。

• 從外面角度來看前後端似是融合成一體，更精確的形容是前、後端『塑合』成一體。

• 其中SignalR通訊封包在此全是binary格式，安全性高效率也高。

Blazor WASM 後端與通訊

• 預設用Web API。HTTP封包。

試作環境

• IDE: Visual Studio 2019

• .NET 5

前端UI仍不足

• 前端UI預設只有傳統CGI介面

• 官方採用 Bootstrap 4 加強前端UI

  • 應該可以使用jQuery。(未試用)

  • 若要用 Bootstrap 的話，建議用 Bootstrap 5。Bootstrap 5已不需要jQuery了。

• 下面四套為Blazor設計的CSS-Framework，皆為 Open Source 需自行再安裝整合，也有其他收費的版本。

  • SKCLUSIVE-UI(已評估，尚不試用)

    • https://skclusive.github.io/Skclusive.Material.Docs/

    • Blazor components for faster and easier web development with Material Design.

  • MatBlazor (已評估，可考慮試用)

    • https://www.matblazor.com/

    • Material Design components for Blazor

  • MudBlazor(已試用可以)

    • https://mudblazor.com/

    • Blazor components For faster and easier web development

  • Radzen Blazor Components (已評估，尚不試用)

    • https://blazor.radzen.com/

    • Radzen Blazor Components is a free and open source set of 60+ native Blazor UI controls.

• C# 與 JS 有限度互通

  • 在前端C#可用IJSRuntime指令呼叫JS。(有機會用到)

    • JsRuntime只能引用 global 層的 JavaScript 資源。

  • 在前端JS可用JSInvokable標籤屬性呼叫C#。(應該沒必要用到，也不建議採用)

客製化的第三方元件資源成熟度

現在肯定比較少，不過有信心接下來會快速累積。 現況遠遠落後 React App。

其它能力未測試

• 安全性部份? 如 SSL, Auth Token 等保護機制?

  • Blazor Server App 建議用 Cookie base auth. --- 已測ok

  • Blaozr WASM App 建議用 JWT token base auth.

• 上傳檔案?

• 產生PDF檔?

• 產生Excel檔

  • ClosedXML套件 --- 已測ok

• 檔案下載模組

  • BlazorDownloadFile --- 已測ok

• 圖表繪製相關?

  • 尚未發現直接支援且是 open source 的版本

  • ChartJs.Blazor 這套是 wrapping Chart.Js 2.9.4。 --- 已測ok

  • 或自行 wrapping Chart.js v3.4.1。

• 可否引用 React 元件?

  • 已知可以有限度的整合 golbal 層的 React 資源。

  • 實務上就是『不行』。

• mobile web (老問題仍存在)

• mobile app (未試)

(先這樣)