一起学Blazor WebAssembly 开发（1）

最近blazor的WebAssembly 正式版出来了，正好手头有一个项目采用的前后端分离模式做的，后端用的abp vnext（.net core 的一个很著名的框架）框架开发的，其实前端之前考虑的使用vue来做，但是看到了blazor的相关技术文章。就仔细看了下这个技术，也算是刚开始接触学习，这里呢就边学习边开发，把开发过程给大家分享出来。

blazor分为 Server 和 WebAssembly 版，先给看一下官方的说明，然后我再结合项目具体说下，两个版本官方的说明如下：

1、WebAssembly

Blazor WebAssembly 是单页应用框架，用于使用 .NET 生成交互式客户端 Web 应用。 Blazor WebAssembly 使用开放的 Web 标准（没有插件或代码置换），适用于包括移动浏览器在内的各种新式 Web 浏览器。通过 WebAssembly（缩写为 wasm），可在 Web 浏览器内运行 .NET 代码。 WebAssembly 是针对快速下载和最大执行速度优化的压缩字节码格式。 WebAssembly 是开放的 Web 标准，支持用于无插件的 Web 浏览器。WebAssembly 代码可通过 JavaScript（称为 JavaScript 互操作性或 JavaScript 互操作）访问浏览器的完整功能。 通过浏览器中的 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行，沙盒提供的保护可防御客户端计算机上的恶意操作。

当 Blazor WebAssembly 应用生成并在浏览器中运行时：

* C# 代码文件和 Razor 文件将被编译为 .NET 程序集。

* 该程序集合 .NET 运行时将被下载到浏览器。

* Blazor WebAssembly 启动 .NET 运行时，并配置运行时，以为应用加载程序集。 Blazor WebAssembly 运行时使用 JavaScript 互操作来处理 DOM 操作和浏览器 API 调用。

已发布应用的大小（其有效负载大小）是应用可用性的关键性能因素。 大型应用需要相对较长的时间才能下载到浏览器，这会损害用户体验。 Blazor WebAssembly 优化有效负载大小，以缩短下载时间：

* 在中间语言 (IL) 链接器发布应用时，会从应用删除未使用的代码。

* 压缩 HTTP 响应。

* .NET 运行时和程序集缓存在浏览器中。

2、Server

Blazor 将组件呈现逻辑从 UI 更新的应用方式中分离出来。 Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。运行时处理从浏览器向服务器发送 UI 事件，并在运行组件后，将服务器发送的 UI 更新重新应用到浏览器。Blazor Server用于与浏览器通信的连接还用于处理 JavaScript 互操作调用。

以上是两个版本官方的说明区别，具体到项目来说，我这边项目选用了WebAssembly的模式，理由如下：

1. WebAssembly虽然第一次加载比较慢，但是一旦缓存到客户端后，速度就很快，因为本质上是执行的C#编译后的代码。

2. WebAssembly有个缺点就是目前不是全部浏览器都支持，IE是不支持的，但是我的项目面向的用户不是大众，而是部分使用人员，这块可以通过要求用户升级更新浏览器来使用，而且目前大多数用户使用的浏览也已经是chrome内核的浏览器了，所以这块不是问题。

3. WebAssembly虽然目前不支持对DOM的操作。但是可以通过调用js的方式来操作，这块也不是问题。

4. 很多人可能觉得这不是sliverlight改头换面了吗，其实不然，sliverlight是需要对浏览器安装插件的，就是电脑上要安装sliverlight才行。这就降低了用户使用的便利性。但是WebAssembly 是开放的 Web 标准，目前主流的浏览器基本都已支持这一标准。

5. 对于那些开发网站的目前建议不要用这个模式，毕竟使用ie的人员还是有一部分的，ie是打不开的，但是可以用server的模式（就算是server，就我目前的了解对于低版本的ie也是支持不好的），两个模式互相修改也并不复杂。

本次就先说到这里，主要是大体介绍了下blazor的基本的两个模式相关的信息和区别，下篇文章就开始创建一个项目来具体讲一下基本的结构。