Day 02 网页和Blazor介绍

笔者对网站的认知为前端、後端及资料库，使用者在浏览器画面按下按钮或是送出表格，触发前端事件，将收集起来的条件打包送往後端，後端接收条件後去资料库据此处理判断，捞出使用者想要的资料後，後端将画面、资料回传给前端，前端再将相应资料呈现在画面上，这就是最原始的前後端交流。

後来有人发现每次都要刷新页面实在太麻烦，而发展出了可以非同步执行的Ajax技术，假如一个事件A没做完的话，其他事件B, C不会等A做完，而是会自己往下做，如此一来当使用者送出表单时，网页不会一直跑小圈圈等待刷新，而是会先让使用者看到画面，其他事在使用者看不到的地方继续处理，这样大大提升了使用者体验。

由於动态网页规范已经被JS统一，即便後来出现强型别的TyepScript(也就是Angular, React等前端框架使用的语言)，最终仍要编译成浏览器认识的JS，且TyepScript也是奠基於JS，所以一个後端工程师若要自己写个网站，就不可避免地必须跟JS打交道，对於习惯强型别的人来说无异从头拓荒，若是遇到公司规范不严又遇到喜用任意型别的同事，一个变数可以一下装载number，一下又装载string，就足以让人抓狂了，幸好这时Blazor出现了。

Blazor是Browser和Razor的合成字，代表在浏览器上执行的Razor元件。
Blazor分为两种模式，WebAssembly Hosting及Server Hosting，简单来说就是Client side及Server side，两者各有优缺点。不过在继续说下去前要先说明WebAssembly是什麽。

WebAssembly简称Wasm，是一种二进位表示语言，任何程序语言经过特定Complier编译都可以转成Wasm，Wasm的优点是将整包程序传到浏览器而不需要服务器，由於二进位且已经编译过的关系，渲染网页的速度会比JS更快，档案也会更小。

Blazor WebAssembly是将编译过的dll档案及.NET执行环境打包後送到使用者的浏览器，所以第一次建立连结时会比较慢；Blazor Server则是在服务器跟浏览器之间建立SingalR连结，当浏览器触发事件後，Server处理完不是整页刷新(将所有Html元素送往前端)，而是透过SingalR将被更动的元素(如div)送往浏览器，这是因为Blazor也是如Angular使用SPA(Single Page Application)模式，从头到尾只有一个页面，上面布满了不同功能的Components，触发事件只会更新相关Component。

Blazor WebAssembly
优点：

1. 因为档案都在浏览器上，速度相较於Blazor Server更快
2. 不需要服务器
3. 不需要随时跟服务器连线
4. Client端的浏览器被充分利用，减轻服务器负担
5. 可以架在任何服务器上，例如云端、微软的Azure甚至CDN(Content Delivery Network，一种将资料暂存到离使用者地理位置更近的模式，比如说我如果想登入主机在美国的网站，速度一定比主机在台湾的网站慢得多，CDN会将资料暂存在离台湾比较近的地区的主机，如香港、新加坡，让使用者连线速度更快)

缺点：

1. 第一次载入会花比较多时间，因为浏览器要下载.NET runtime等元件(注：铁人赛前笔者建立了新的Blazor WebAssembly专案，发现已经没下载元件了，微软官方图片也没看到有下载元件，或许是新版本有所异动)
2. 受限於浏览器的处理能力
3. Client端的软硬体都很重要

Blazor Server
优点：

1. 载入速度比较快
2. 可以充分利用服务器的能力
3. 任一Client使用这软件唯一需要的只有浏览器
4. 由於原始码不会传到Client端所以会更安全

缺点：

1. 需要实体服务器
2. 需要跟服务器保持连线
3. 由於资料来回传递，延迟感会更重
4. 不容易提升运算能力，因为一个服务器能承受的Client端有限，微软给出的数据为一个单核配有3.5G内存的Blazor Server可以处理5000个连线；一个四核配有14G内存的Blazor Server可以处理20000个连线。

若将Blazor WebAssembly和Blazor Server的优缺点分别列出，可以看到没有一种模式是最完美的，只有最适合的。如果已经有了其他程序语言架设的服务器如PHP, Node或是Rails，需要一个提供给使用者且不需要时刻连接服务器的Client端程序，Blazor WebAssembly就是很好的选择，且Blazor WebAssembly具有PWA(Progressive Web App)功能，虽然以网站模式开发却能让使用者像下载软件一样下载到桌面或是手机，知名网站如Twitter, Pinterest, Starbucks都是知名例子，如果用电脑开启Twitter网站，就能在网址列最右方看到下载的按钮；而如果需要从无到有生出一个需要频繁连接服务器(如对资料新增、修改、删除)的网站，就适合用Blazor Server。

不过Blazor毕竟是微软的新产品，笔者也只用过ASP.NET Core搭配Blazor，Blazor WebAssembly想跟PHP等非微软服务器整合或许会有其他要注意的地方，若有相关需求的人可能要多方考量。

讲了一大堆文字，想必还是很多人跟笔者一开始接触时有看没有懂，明天笔者会将两种专案都开起来，让大家看一下两者差在哪里。

Ref: What is Blazor
Ref: ASP NET Core blazor hosting models
Ref: The Differences Between Blazor WebAssembly And Blazor Server
Ref: 了解 WebAssembly 的基础使用方法
Ref: WebAssembly design
Ref: WHAT IS A CDN & WHERE DOES IT SHINE?
Ref: Twitter