FAST與Fluent：一個Blazor故事 - .NET部落格

摘錄

了解Fluent UI Blazor庫的構建塊的起源。我們將討論FAST、 Web Components 、Fluent Design等內容。

原文地址： The FAST and the Fluent: A Blazor story ^[1]

2024年2月26日

這聽起來幾乎像是一部流行電影系列的標題，但我們還（尚未）涉足電影制作行業。在這篇文章中，我將會談論Fluent UI Blazor庫。它從何而來，它有哪些構建塊，以及這些構建塊是如何協同工作的？讓我們按影片裏的順序，為這些庫的主要角色做一個適當的介紹…

FAST

簡而言之，FAST是基於Web Components和現代Web標準構建的一系列技術。在微軟內部，FAST是由一支UX工程師和設計師團隊構建的，他們希望透過使用標準的網路技術來解決使用者體驗挑戰。

FAST不是眾多典型的前端框架之一，比如React、Angular或Vue。FAST並不是專註於「一站式SPA框架」，而是旨在讓建立web元件變得可能和更加容易。因此，用FAST構建的web元件可以與幾乎任何前端框架一起使用。

Web Components

Web Components是指一組旨在建立自訂 HTML元素 的網路標準的總稱。這個總稱下的一些標準包括：

以上每個功能都由W3C定義和標準化，並且得到了每個現代瀏覽器的支持。FAST沒有構建自己的元件模型，而是使用了上述的W3C Web Component標準。這使得用FAST構建的元件能像內建的、普通的HTML元素一樣工作。

使用FAST元件並不需要使用框架，但你可以（也應該）使用。將它們與所需的框架或庫結合使用總是更容易的。自2020年初以來，web元件得到了廣泛采用。不僅是微軟在大力投資這項技術，谷歌、Adobe、 Salesforce 、SAP、MIT、SpaceX等許多其他公司也在做同樣的事情。更多資訊，請參見https://www.fast.design/。

Fluent

Fluent是微軟在其所有現代應用程式中使用設計系統，無論是網路還是Windows（作業系統和應用程式）。Fluent的起源可以追溯到「Metro」，這是Zune音樂播放器和Windows Phone裝置使用的設計系統（是的，我也還在想念它們！）。該系統包含用於軟體中設計和互動的指導原則。它的基礎是由五個關鍵組成部份構成的：光、深度、運動、材質和規模。最近，最新版本Fluent 2已經釋出。欲了解更多資訊，請參見https://fluent2.microsoft.design/。

Fluent UI Web Components

FAST團隊使用他們開發的構建塊，構建了Fluent設計系統的實作。這就是Fluent UI Web Components。如上所述，這些元件是不依賴框架的，並且可以在任何現代瀏覽器中使用。為了讓每個人的生活更輕松一些，幾乎總會使用一個前端框架。其中一個可以使用這些元件的框架就是Blazor。

Blazor

Blazor是微軟用於構建互動式網路應用程式的.NET框架。開發者使用C#而不是JavaScript構建交雲UI。程式碼可以在客戶端和伺服器端執行，透過MAUI，甚至可以在iOS、Android和Tizen裝置上（本地）執行。

客戶端執行使用WebAssembly實作的.NET執行時在瀏覽器中執行程式碼。WebAssembly，或簡稱 WASM ，是一個廣泛認可的標準，得到了所有現代瀏覽器的支持。為了最佳化，執行時可以即時編譯（JIT）你的套用程式碼到WebAssembly。為了更好的效能，可以改用提前編譯（AOT）你的程式碼到WebAssembly。

當Blazor在伺服器端執行時，會建立一個Signal-R連線，透過該連線發送所需的介面更新。因為只發送了舊情況與新情況之間的差異，所以訊息相當小。一個現代伺服器可以輕松支持5000-10000個同時連線。

Blazor是一個基於元件的框架。每個元件都可以獨立工作，但透過將它們放在一個階層中，也可以使元件相互通訊。最終在螢幕上渲染的又是標準的HTML和CSS（有時還有一點JavaScript）。因此，將Blazor和web元件結合使用當然是一個可能性。

劇本：我們如何使他們一起表演？

既然舞台已經搭建好，主要角色，即基於FAST構建的Fluent UI Web Components以及Blazor已經介紹過了，那麽這個庫在使它們一起表演中扮演什麽角色呢？對於庫的初始版本，目標是為每個Fluent UI Web Component提供一個Blazor「包裝器」。這裏的包裝器的意思是「僅僅」建立一個渲染web元件的Blazor元件，使用與web元件相同的名稱、參數和列舉，但是以Razor語法和C#語言。

這個目標在2021年底實作了。FAST團隊在與.NET 6.0同時釋出的庫的版本1中包含了大約40個不同的元件，並伴有一個演示和文件站點。當前該站點的版本，提供了更多的範例和文件，以及比最初的40個更多的元件，可以在 https://www.fluentui-blazor.net ^[2] 找到。

[

與此同時，庫可以被描述為非常成功。在寫這篇文章時，NuGet包下載計數器的總和已經接近110萬。

在v1版本釋出後，我們收到的一個經常問到的問題是庫是否可以提供更多元件。尤其是使構建遵循Fluent設計系統的應用程式更容易的元件。最初庫只提供Web Components的包裝器，這使得擴充套件變得困難。因此決定了（經與Microsoft FAST和ASP.NET Core Blazor團隊協商）將庫的開發和擁有權從FAST團隊移交。當然，我們繼續與FAST團隊緊密合作，並已開始測試和包裝下一版本的Fluent UI Web Components（這是基於Fluent 2的）。

關於所有權和支持的說明：目前，Fluent UI Blazor庫是一個純粹的開源計畫。它 不是 ASP.NET Core的官方部份，這意味著它 沒有 得到官方支持，也沒有承諾在任何官方.NET更新中提供更新。它是由微軟員工（及其他貢獻者）構建和維護的，像大多數其他開源計畫一樣，透過GitHub倉庫（不是透過support.microsoft.com）以最大努力提供支持。

成為一個純粹的開源計畫後，我們在版本3發行中推出了一大批新元件。隨著每個（小）版本的釋出，元件數量持續增長，現在我們在庫包中提供了將近70個元件。這些不僅僅是Fluent UI Web Components的包裝器。其中一些是純粹的Blazor元件，利用Fluent設計系統進行使用者介面設計，其他的則使得在應用程式中使用Fluent設計變得更容易。我們甚至建立了幾個自己的web元件！與去年11月.NET 8一起釋出的，是庫的版本4。為了明確我們現在獨立於FAST團隊（和更接近Blazor團隊），包的（基礎）名稱已經從 Microsoft.Fast.Components.FluentUI 更改為 Microsoft.FluentUI.AspNetCore.Components 。

庫中最新的新增項之一：可排序列表，圖片

如果庫和計畫作為純粹的開源計畫讓你擔心成熟度、永續性或支持，請放心，微軟相信它的未來，並且已經在幾個計畫中使用了庫。如果你開始探索新的.NET Aspire工作負載，並存取了它的 儀表板 ^[3] ，你可以看到元件的實際套用。該儀表板是用Blazor構建的，並使用了庫構建其使用者介面。除了Aspire，庫也被 Visual Studio Teams Toolkit ^[4] 使用，後者使在Visual Studio中開始 Microsoft Teams 的應用程式開發變得簡單。

[

一個新系列的開始？

就像電影行業一樣，我們喜歡續集。我們已經想好了未來版本的一些改變。當然，我們也希望聽取使用者的意見，了解他們希望添加和/或改變什麽。加入我們在 GitHub倉庫 ^[5] 中的討論。

再次，正如他們在電影中所說的：未完待續……

參照連結

[1] The FAST and the Fluent: A Blazor story: https://devblogs.microsoft.com/dotnet/the-fast-and-the-fluent-a-blazor-story/
[2] https://www.fluentui-blazor.net: https://www.fluentui-blazor.net/
[3] 儀表板: https://github.com/dotnet/aspire/tree/main/src/Aspire.Dashboard
[4] Visual Studio Teams Toolkit: https://learn.microsoft.com/microsoftteams/platform/toolkit/toolkit-v4/teams-toolkit-fundamentals-vs
[5] GitHub倉庫: https://github.com/microsoft/fluentui-blazor