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 是一个在世界范围内广受欢迎的 VueUI 框架，它是建立在 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>
如果是.net6.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 技術團隊成員。