ch01 Hello Blazor

本书的目的是希望让你容易的入门, 核心是介绍什么是 Blazor.

本书主要从使用场景入手, 看起来是偏实战, 而非理论.

Blazor 包含三个部分:

Blazor WebAssembly
Blazor Server
Blazor Hybrid

本书是第二版, 在第一版发布之后, .NET 也有很多变化. 作者不会介绍全部的内容, 更希望将重点关注与 Blazor 本身.

大部分人会将 Blazor 与 WebAssembly 画等号, 但事实并非如此. Blazor 包含的内容更多 (主要是服务, WebAssembly, 以及 Hybrid)

第一章会介绍 Blazor 的来源, 使用什么技术, 以及运行 Blazor 的不同方法.

本章主要包含下列主题:

什么是 Blazor?
早期的 Blazor
介绍 WebAssembly
介绍 .NET 7
介绍 Blazor

技术要求

作者建议要有 .NET 基础.

本书重点是关注如果创建交互式 Web 应用. 使用的技术依旧是 .NET 技术.

为什么是 Blazor?

一段与网友的对喷, 人为 Blazor 不会打败 Angular, React 和 Vue.

作者的观点是, 打败其他技术不是目的.

以前学习 Web 很困难, 不仅仅要学习 ASP.NET, 还需要学习前段框架 (ng, react, vue 等).

不仅如此, 还需要学习 NPM, Bower, JS, TS 等前端生态.

我们需要理解如何将其构建到我们的项目中, 但这只是冰山一角, 其周边的知识也需要不断学习.

Blazor 是最佳选择, 不用学习那么多的周边, 仅需要知道 C# 生态.

作者相当于回应了前面的争议, Blazor 几乎可以消除语言框架的隔离.

Blazor 打开了一个新的大门. 使用 C# 来开发.

前 Blazor 时代

前 Blazor 时代是黑暗的时代, 在开始之前需要简单说一说.

作为开发者, 会涉及很多语言和平台. 但有一个大平台, 即嵌入到浏览器中的应用.

现在的 web 开发已经发生了变化. 特别是前端框架, 将完整页面的下载编程了运行时的局部更新下载.

针对后端开发者, 前后交替, 语言不同, 领域不同. 几乎是一个全新的领域. 然后简单描述了前后分离模型.

不同浏览器js引擎有一定差异, 所以 jq 起到了作用. 但今天差异逐渐减少, jq 慢慢在被淘汰.

js 是非oop, 且弱类型的, 因此诞生了 TS.

你可以使用前端框架进行开发, 但最终会转换为 js. 简言之, 你可以使用js/ts来开发, 但需要不断保持技术栈的更新.

本书提供另一个方案, 虽然会讨论 js, 但是重点会放在 C# 上.

现在, 简单了解了 js 的历史, js 不再是唯一可以运行在浏览器上的语言了, 这得益于 WebAssembly, 下面我们看这个.

WebAssembly 简介

本节, 我们会关注 WebAssembly 是如何工作的. webassembly 也是运行 blazor 的一种方法, 但是现在我们将重点关注webassembly是什么.

WASM 是二进制指令格式, 是编译后的, 它体积更小. 其设计的目的是希望得到更高的性能, 它的性能更接近于C++.它不需要js那种, 下载加载,优化,JIT. WASM 不需要这里的大多步骤.

WASM 有一个严格的安全模型, 它运行与沙箱中, 并且只会暴露部分 API. 假定你需要与外部交互, 例如修改 DOM, 或下载文件. 你还需要使用 JS (后续会介绍, 不用担心, Blazor 也会处理) .

让我们看一些代码, 来熟悉一下 WASM.

本节, 会创建一个求两个数字和的app, 使用 C 语言.

可通过几个简单的步骤将 C 代码编译成 WebAssembly:

导航至 https://wasdk.github.io/WasmFiddle/
添加下面代码
```
int main() {
    return 1 + 2;
}
```
点击 Build (编译) 然后点击 Run (运行).

你可以看到下方的运行结果:

WASM 是基于栈的机器语言. 也就是说使用栈结构来实现运算功能.

考虑代码: 1 + 2

大多数编译器(包括我所使用的)会优化代码, 并返回 3.

假定所有指令会被执行. 这是 WASM 的处理方式:

首先将 1 推入栈中 (指令: i32.const 1), 然后将 2 推入栈中 (指令: i32.const 2). 此时栈中拥有数据 1 和 2.
然后, 我们必须执行加法指令 (i32.add), 它会弹出栈顶的两个数据 (1 和 2), 将其相加, 然后将新值重新入栈 (3).

这个案例展示了, C 代码可以编译成 WebAssembly. 此时我们在浏览器中运行了由 C 编译得到的 WebAssembly.

其他语言
通常只有低级语言才可以编译为 WebAssembly (例如 C 或 Rust). 然而有很多语言可以运行在 WebAssembly 之上. 这里是一个庞大的语言集合: https://github.com/appcypher/awesome-wasm-langs

WASM 性能非常高 (接近原生), 以至于游戏引擎考虑进行移植.

这里有两个案例:

Angry Bots(Unity): https://beta.unity3d.com/jonas/AngryBots/
Doom: https://wasm.continuation-labs.com/d3demo/

这里是一些有名的 WASM 项目列表: https://github.com/mbasso/awesome-wasm

本章只是介绍一点皮毛, 了解即可, 深入的内容后续会介绍.

要使用 Blazor 需要使用接下来介绍的 .NET7.

ch01 Hello Blazor

技术要求

为什么是 Blazor?

前 Blazor 时代

WebAssembly 简介

其他语言

.NET 7 简介