Blazor WebAssembly 来了！

Blazor 这个新推出的前端 Web 框架，想必是去年 .NET Core 3.0 发布时才进入 .NET 开发者的视线的。但其实，那时发布的是服务端托管版，而真正具有跨时代意义的，是即将在今年5月发布的 WebAssembly 托管版。

我早在两年前，2017年底，就已经在 Steve Sanderson 的一篇博客中看到这个能完全运行在浏览器的前端框架。那时我还是个只会 vue 和一点 Angular 的年轻人，看到只用 C# 就能写一样的单页应用，哪能经得住这种激动。那时就很期待能快点正式发布。后来真的被纳入 AspNetCore 项目的一部分，不断发展完善。没想到最后会是服务端托管版本先发布，而一直发展了接近3年的 WebAssembly 版本，也终于将在今年5月正式发布！

发展至今，Blazor 已经从通过 SignalR 实现双向绑定的服务端托管模式、到通过 WebAssembly 在浏览器上运行 .NET 运行时，再到现在还实现了 PWA、移动端原生控件绑定等技术，Blazor 在未正式发布时就已经有如此多的功能，可见 ASP.NET 团队和整个社区在 Blazor 上付出了有多大的精力、诚意与期待。ASP.NET 团队还有一系列的开发计划，今年底预计还会发布基于原生UI渲染系统的预览版本。

也就是说，Blazor 目前还是前端 Web 框架，但是等到了明年，就会成为一个跨设备平台的客户端框架了！

Blazor 现状

那么，现在我们就能马上用起来了吗？

能，也不能，这取决于你想怎么用。如果像官方给出的开发模板那样，使用 Bootstrap 作为样式库，而自己实现所有交互效果的话，完全可以用起来了。但是，如果希望有更具交互性更美观的组件库，能拿来就用，快速实现 UI 需求的话，能选择的组件库还不多，在 Awesome Blazor 列表中，完成度较高的开源的组件库，最好的就有 Material Design 的实现 MatBlazor，其他的基于Bootstrap 的，大多是靠JS实现交互，Blaozr只是渲染最基本的一个Html标签。再者还有收费的 Telerik UI、Radzen.Blazor 等等……国内还有好几个原来做 WPF、MVC组件的厂商也开始了Blazor组件的贩卖……

这种形势，就等于是手上只有一个 angluar-cli，是能创建空白的组件，但离搭建出高水准的UI组件就还差十万八千里了。那么，该让谁来填补组件库的空白呢？我们参考一下已有的前端框架吧。

为什么想做 Blazor 组件库

目前我们用在项目中的前端框架组件库，能数出名的 Ant Design、ElementUI、iView、Vuetify 莫不是依靠开源社区的力量打造出来的。所以，Blazor 的组件库也需要靠开源社区贡献！

那我们怎么做 Blazor 的组件库呢？

现代的前端组件库大体上可以分两个部分，一是设计语言与理论，二是具体框架实现。设计语言与理论更多地是 UI/UX 方面的设计。对我来说，最喜欢的设计以此是微软的 Fluent Design、谷歌的 Material Design、再到蚂蚁的 Ant Design。而具体框架实现就是由 React、Angular、Vue 等框架的实现了。

经过几年来的实践，还有对开源社区的观察，分别用过 Bootstrap、iView、Material、PrimeNG 等组件库之后，最终还是觉得 Ant Design 在 UI 设计、组件功能和实用性、项目工程、社区活跃度等方面总体上都做得很好。作为一个开源项目， 2019 年 7 月，Ant Design的 Github star 数超过 Material UI，成为全球 star 数最高的 React 组件库项目。

还翻到篇文章，蚂蚁UED接受采访时说：

选择 Design 这个域名，是期待我们能将设计价值观、原则和模式逐步传承下去，因为前端框架、设计风格都会过时，antd （Ant Design of React：用 React 前端框架实现的 Ant Design）一定会被淘汰。但如果我们有 Ant Design ，下个潮流来的时候，我们能快速搭建新的 Ant Design of XXX。非常感动的是，除了 antd，我们已经有 10+ 不同前端框架实现的 Ant Design。我们的 Design 梦得到了真正的延续。
—— 蚂蚁UED

于是一语成谶，WebAssembly 这一潮流来了，Ant Design of Blazor 应运而生。

我如何做 Ant Design of Blazor

与 Ant Design 官方一致

Ant Design of Blazor （以下简称 AntBlazor）从一开始我就定位在与官方 React 实现的代码仓库同规模的项目，并参考它的其他实现，如 NG-ZORRO、ant-design-vue 是如何做另一个框架的实现的。

参考 ant-design-vue 的命名，我把 Blazor 仓库名改为 ant-design-blazor。
参考 NG-ZORRO 的 logo 改编，我把 Blazor 官网的 logo 抠下来，也把 Ant Design 的 logo 挖空并旋转 -45°，把 Blazor logo 填上并修改颜色。
参考 NG-ZORRO 的样式同步机器人，我也自己写了样式同步的 Github Action，定时检查 ant-design 是否有新版本发布，当有新版本时自动提交PR。
参考 ant-design 写了 README 和 demo 文档。
参考 NG-ZORRO，使用 Angular 的 commit lints。
为了项目工程质量，使用 TS 编写互操作脚本，编译脚本都是开源的，对外部贡献者尽量友好，而不是像已有的几个 Blazor 组件库那样只给出混淆后的 js、css。
还有一些在文档构建时衍生出的副产品，如约定式路由、组件渲染服务等。

在为了与官方高度一致上的努力，还会继续。希望有一天能在丰富 Blazor 生态的同时，还能成为被 Ant Design 生态认可的框架实现，能成为他们 Design 梦的一个延续。