MASA Blazor 是一個 Blazor 的 UI 元件庫，就像大家寫前端熟知的 Bootstrap、Ant Design 一樣。
MASA Blazor 官網地址：https://blazor.masastack.com
MASA Blazor GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor
MASA Blazor Pro 演示地址：https://blazor-pro.masastack.com/dashboards/ecommerce
MASA Blazor Pro GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor.Pro
什麼是 Blazor
在介紹 MASA Blazor 之前，有必要先知道什麼是 Blazor，如果已經了解 Blazor 是什麼的朋友可以直接跳過，往下面繼續看。
Blazor 是一個使用 .NET 生成互動式用戶端 Web UI 的框架，使用 Blazor，開發人員可以使用 C# 語言在伺服器和用戶端進行編碼，構建豐富的 Web 應用程式。聽起來是不是很不錯？不熟悉前端開發語言的後端夥伴，也可以使用 Blazor 進行 Web 應用開發了。簡單看一下官方的描述。
如果想深入了解 Blazor 的朋友可以翻一下這篇文章，裡面非常詳細地介紹了什麼是 Blazor 以及 Blazor 與其他前端技術的對比。或者可以直接去翻官方文件，這裡我就不多說明了。
Material Design
了解完 Blazor 再來簡單了解一下 Material Design，為什麼是 Material Design？因為 MASA Blazor 就是基於 Material Design 設計的。
簡介： Material Design，中文名：材料設計語言，有人也叫它質感設計，是由 Google 推出的跨平台設計語言，其旨在為手機、平板電腦、桌上型電腦和「其他平台」提供高度一致的使用體驗和視覺效果。
優點： Material Design 包含了在設計時如何使用陰影、如何使用動畫、甚至使用多少像素的邊框都給出了建議，它可以幫助我們搭建更合理的頁面結構，如何排版、字體大小和間距，它定義了優雅流暢的互動效果，引導用戶在頁面中的視覺焦點和互動操作。
Material Design 的核心就是簡潔。大而簡、簡而精。它把物理世界的體驗帶進螢幕。去掉現實中的雜質和隨機性，保留其最原始純淨的形態、空間關係、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。它的優點當然不止這些。海外的許多應用，包括大量 web 網站，都是基於 MD 的設計。在國外還是非常流行的。想了解更多關於 MD 的朋友可以去翻一下它的官方網站，這裡就先介紹到這。
Vuetify
Vuetify 是一個在世界範圍內廣受歡迎的 Vue UI 框架，它是建立在 Vue.js 之上的完備介面框架。與其他框架不同，Vuetify 從一開始就設計為易於學習，並且擁有來自 Material 設計規範 的數百個精心設計的元件。Vuetify 採用行動優先的設計，這意味著無論是在手機、平板電腦還是桌上型電腦上，你的應用程式都可以開箱即用。
所以使用 Vue 的朋友可以使用 Vuetify 很輕鬆地構建出一套基於 Material Design 設計風格的應用。
是不是很爽呢？說了這麼多都是人家前端的東西，那我們 Blazor 有這樣的 UI 元件庫嗎？答案當然是有的，那就是 MASA Blazor。終於輪到了我們的主角。
MASA Blazor
MASA Blazor 開篇已經說過了，它是 Blazor 的一個 UI 元件庫，Blazor 讓你脫離了 JavaScript 進行 Web 應用開發，而 MASA Blazor 可以讓你不必寫，或者寫很少的 CSS 就能構建出一個非常漂亮的 Web 應用。MASA Blazor 就是嚴格按照 Material Design 的設計規範精心設計的 UI 元件庫。接下來說一下它的優點。
- 基於 Material Design 的設計風格，擁有 Material Design 的所有設計優點，多端體驗、互動、操作優秀
- 與 Blazor 深度整合，讓後端開發人員能非常輕鬆地上手。
- 天生具備響應式，除 Vuetify 有的元件外，還有許多預置元件如 Url、麵包屑、導航三聯動、高級搜索、i18n 等
- 社群活躍、簡易上手，全職團隊維護
MASA Blazor 深度還原了 Vuetify 的所有元件，做到了 1:1 還原之外還增加了非常實用的預置元件，對常用的一些元件或一組元件進行封裝，更貼合開發者的日常使用，大大縮減了開發時間，提高了開發效率。它也同時解決了大部分後端人調樣式的煩惱。幾句程式碼就能快速構建出一個漂亮的頁面。那麼接下來我們就來看一看如何在 Blazor 專案中引入它。
使用 MASA Blazor
- 環境：.NET 6.0.0 + Visual Studio 2022
- 建立 Blazor Server 應用
dotnet new blazorserver -o BlazorServerApp
- 新增 MASA.Blazor 套件
可以使用 NuGet 套件管理工具搜尋 MASA.Blazor 新增，也可以直接
dotnet add package MASA.Blazor
- 在 Program.cs 裡新增 Masa Blazor 相關服務。
builder.Services.AddMasaBlazor();
這裡使用的是 .NET 6.0 Minimal API，沒有了 Startup 類別，程式碼看起來也比較簡潔。如果是之前的 .NET 版本就在 Startup.ConfigureServices 裡新增 services.AddMasaBlazor(); 就可以了。
- Pages/_Layout.cshtml 中引入樣式、字體、腳本
在 head 裡加入樣式和字體
<link href="_content/MASA.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/MASA.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
rel="stylesheet"
/>
在 body 的底部加入 js 腳本
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
如果是 .NET 6.0 之前的版本，這些程式碼是在 Pages/_Host.cshtml (Server) 中
在 _Imports.razor 檔案中引用 MASA.Blazor、BlazorComponent 命名空間，這樣我們就不用每個檔案都去引用一遍了
@using MASA.Blazor @using BlazorComponent
取代 Shared/MainLayout.razor 裡面的內容
<MApp> @Body </MApp>
使用樣板快速建立 Blazor 專案
經過上述的步驟你就可以基於 MASA Blazor 進行開發了。但是步驟是不是有一點點多，些許繁雜？當然這些 MASA Blazor 也替我們考慮到了，所以它提供了更簡單的安裝方式，透過樣板進行安裝。
- 透過 dotnet 指令安裝樣板
dotnet new --install MASA.Template
- 建立基於 MASA Blazor 元件庫的 Blazor Server 專案
dotnet new masab -o BlazorServerApp
簡單兩步就搞定了。這樣建立完的專案就幫你完成了上述的幾個步驟。
效果展示
接下來我們就用 MASA Blazor 的側邊欄和頂部工具列取代掉原本 demo 的元件。部分程式碼截圖：
使用到了 MNavigationDrawer 和 MAppBar 兩個元件。
效果圖如下：
還有許多漂亮有趣的元件官網上都有範例和程式碼，比如這個 AppBar：
點擊查看原始碼，然後把程式碼複製過來，一個元件就完成了。
看下效果：
就是這麼簡單。
我們再來看一下官方給的 Admin 樣板（MASA Blazor Pro）效果如何：
MASA Blazor Pro 演示了大多數 MASA Blazor 元件的使用，而且是一個開箱即用的後台前端管理樣板。都是開源免費的。有興趣的朋友可以去了解一下。
MASA Blazor 官網地址：https://blazor.masastack.com
MASA Blazor GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor
MASA Blazor Pro 演示地址：https://blazor-pro.masastack.com/dashboards/ecommerce
MASA Blazor Pro GitHub 地址：https://github.com/BlazorComponent/MASA.Blazor.Pro
我們正在行動，新的框架、新的生態
我們的目標是「自由的」、「易用的」、「可塑性強的」、「功能豐富的」、「強健的」。
所以我們借鑑 Building blocks 的設計理念，正在做一個新的框架 MASA Framework，它有哪些特點呢？
- 原生支援 Dapr，且允許將 Dapr 取代成傳統通訊方式
- 架構不限，單體應用、SOA、微服務都支援
- 支援 .Net 原生框架，降低學習負擔，除特定領域必須引入的概念，堅持不造新輪子
- 豐富的生態支援，除了框架以外還有元件庫、權限中心、配置中心、故障排查中心、警報中心等一系列產品
- 核心程式碼庫的單元測試覆蓋率 90%+
- 開源、免費、社群驅動
- 還有什麼？我們在等你，一起來討論
經過幾個月的生產專案實踐，已完成 POC，目前正在把之前的積累重構到新的開源專案中
目前原始碼已開始同步到 GitHub（文件站點在規劃中，會慢慢完善起來）：
技術交流：
- QQ 群：7424099
- 微信群：加技術營運微信（MasaStackTechOps），備註來意，邀請進群
------ END ------
作者簡介
- 閻鵬舉：MASA 技術團隊成員。