《进击吧！Blazor！》系列文章 第一章 1.初识 Blazor

作者介绍

陈超超
Ant Design Blazor 项目贡献者
拥有十多年从业经验，长期基于.Net技术栈进行架构与开发产品的工作，Ant Design Blazor 项目贡献者，现就职于正泰集团

第一次写专栏，开头不知道说什么，所以……先来段广告😁
《进击吧！Blazor！》是本人与张善友老师合作的Blazor零基础入门系列视频，此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
视频地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
本系列文章是基于《进击吧！Blazor！》直播内容编写，升级.Net5，改进问题，讲解更全面。

系列文章目录

第一章 初出江湖 —— ToDo应用开发练手
初识 Blazor
Hello Blazor
页面制作
数据交互
组件开发
安全

第二章 仗剑江湖 —— 企业组织绩效数据管理平台开发实战
项目框架搭建
指标维护：增删改查
组织机构维护：树
数据采集：自定义表格
指标分析：Chart
账号与权限
站点部署

---

---

Blazor是什么

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架。

第一次看到这句话的感受是不是What？.NET和Web UI啥时候在一起了？

现状

我们暂且先把Blazor放一边，一起看看目前Web开发的技术栈。

上图是目前最常用的前后端分离开发模式下所使用的技术栈和配备的人员结构。

我们大家天天按照这个模式进行着各类项目开发，不知道大家在工作中有没有碰到一下面的问题。

• 技术栈复杂
  做一个项目前后端需要用到两套完全不同的语言，两套完全不同的框架，不管是对团队还是对个人无形中增加了技术复杂度和成本。
• 无法重用应用逻辑和代码
  表单验证，DTO（数据传输对象）等代码需要前端和后端分别写一份，增加重复劳动，当一端做了修改后，如另一端未能及时更新，一个新鲜的BUG就出现了。
• 资源生态独立不能共享
  当下每一个项目下面都摆着一堆的”轮子“（库），充分利用第三方资源对开发价值不可估量，但是因为语言问题，前后端的生态资源不能共享。
• 增加协作成本
  大家回忆一下，前后端遇到问题时经常热（hu）情（xiang）交（si）流（bi）的场景历历在目，“接口返回格式错了”，“请求数据缺字段了”，“流程不是这样的”…………总是有事前没有想到的问题
  如果遇上 “一个不懂后端的前端” vs “一个不懂前端的后端”，简直就是灾难。
• 人员利用率低
  每个项目前后端开发量是不平衡的
• ，时常旱涝不定，即影响项目进度，又影响员工心态平衡。

Blazor是什么，由能带来什么

首先Blazor是微软最新推出的Web UI框架，目前.Net5中包含的版本已是它第二个可以商用的版本，它的出现就很好的解决上面产生的问题，下面是他部分特性：

• 语言优秀
  Blazor 使用 C# 代替 JavaScript 来编写代码，因此我们可以使用静态类型检查、泛型、Linq、async/await、以及美味的语法糖等所有C#语言的优秀特性。

看到这里，估计不少读者会有疑问，浏览器上能运行C#行吗？答案是：行！

为了解答这个问题，这里就要介绍Blazor的两种模式：Blazor WebAssembly和Blazor Server。

• Blazor WebAssembly
  这是个单页应用 (SPA) 框架，使用WebAssembly技术实现无插件的方式在 Web 浏览器内运行 .NET 代码，通过 JavaScript访问浏览器的完整功能。

关于WebAssembly介绍推荐阅读这篇文章：https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/

• Blazor Server
  将Blazor组件托管在ASP.NET Core服务器上，通过SignalR把UI事件从浏览器发送到服务器，并由服务器处理完后将已呈现的组件发送回的客户端

看似这个模式和当年的ASP.Net Web Forms有些相似，其实他们有着本质的区别

所以虽然.Net代码托管在服务商执行，但是页面的响应体验非常好。

共享生态

可以使用现有的 .NET 库生态系统。比如EF Core，AutoMapper等优秀的库可以直接使用。

共享代码

现在我们可以在服务器和客户端使用相同的代码编写应用逻辑，所以可以直接共享应用逻辑，比如Dto、验证特性、加密等。

工具完备

在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。

未来

有了Blazor加持的Web开发的技术栈变成下图的模式

在这个模式中我们一起看看有什么优势

• 技术统一
• 应用逻辑和代码共享
• 共享.Net库生态资源
• 易于团队协作
• 灵活调配人员

次回预告

我将通过一个Hello Blazor示例来体验Blazor项目