有限在線用戶的場景中，前後端分離是多此一舉

2021 年 12 月 5 日
筆記
Asp.Net Core, Blazor, VUE, 前後端分離

無論你是純前端、純後端、還是全棧，請花3分鐘耐心看完本文，可能有點用。

前言

如果一個人只熟悉後端，那他對前端的評價往往不夠中立，反之已然。本人湊巧前後端都熟悉。
只針對各種管理系統，同時在線的用戶量有限的系統，如：電商管理後台、OA\MES\ERP\WMS….等。
這裡說的前端是指所有前端，瀏覽器微信 vue angular react android ios mac windows linux

介紹

典型的前後端分離結構

最終的前端用戶和對系統進行管理的後台用戶都使用同一個api層，不太好，如下優化下

如果是內網系統，比如：WMS\ERP\OA\MES\電商後台管理端….,那麼可能沒有海里的最終前端用戶，而只有相對少量的管理用戶。那結構就如下面這樣了。

典型的bs系統目前採用這樣的形式：

後端接口：為管理端和最終用戶前端提供接口，可能使用java go php node .net等，

基於vue/react/angluar的管理端：後台管理界面，與接口交互

前端頁面+app+小程序：最終用戶端，與接口交互，我們可能統一使用vue

後台管理端的用戶是有限的，比如同時在線100 1000 2000..總有個限度。

而前端最終用戶的量是無限的，可能同時上億人在訪問我們的系統。

針對最終用戶前端現在的方式就挺好，而後台管理端是否有其它方式呢？畢竟它的用戶量有限，下面分析下。

Vue的核心

各種優點我就不列舉了，核心還是數據與頁面元素是雙向綁定的，數據變了頁面元素自動變，而頁面元素值變了數據也會變。這樣開發者就輕鬆多了，只管操作數據就行

Blazor server核心

服務端與客戶端保持長連接，
服務端中的一個對象與前端頁面的組件做雙向綁定，服務端數據變量前端跟着變，而前端用戶觸發事件會直接執行後端代碼。
服務端有個虛擬DOM，經過計算髮送最少數據告訴前端如何更新界面。

對比

再次強調，我們只考慮有限的、同時在線的用戶量的情況，比如同時100、500、1000、10000人在線，總有個限度。通常是各種系統的管理端或內網系統。

Vue的方式後端從業務邏輯層拿數據，發送給vue，vue再把數據綁定到model上，界面得到更新。
而blazor server方式是從業務邏輯層拿到數據直接綁定到model上，由於服務端的model與前端的組件是雙向綁定的，界面會自動更新的。
對於開發來說，用blazor同時替換了vue和接口層。而組件化的方式幾乎跟vue一模一樣。任然使用html css構建界面。

長連接有啥優/缺點

情況就是這麼個情況，我也說不全，大致說下幾個主要的。

開發簡單了

你不需要為前端提供接口了，前端也不需要處理ajax請求，然後做數據綁定了。後端業務處理完成了直接說明應該如何更新前端。

數據交換速度快了

沒有TCP三次握手，沒有HTTP請求與響應，服務端經過虛擬dom計算最小更新的數據發送給客戶端，但比原始json會多那麼一丟丟。

天然的推送效果，無需手動websocket

服務端發送某些事件時，可以輕鬆將數據推向客戶端，想像下後端有新的訂單時很容易推送消息給我們的訂單處理人員。不需要自己去折騰websocket。

服務器壓力更大了

服務需要維護所有在線用戶的連接，不過問題不大，用戶多了可以加負載均衡。
內存佔用更高，服務器會在內存中存儲你當期正在訪問頁面的雙向綁定對象和虛擬dom對象，微軟官方文檔有對此優化注意事項說明。

還是那句話，系統管理端，用戶量有限，這些問題都不太大。

Blazor server的其它特點

天然的跨所有平台

瀏覽器還是那個普普通通的瀏覽器，它天然跨平台，windows macos ios android linux 微信都有瀏覽器套殼方式，windows中winform wpf都可以套殼webview2，linux有Electron，Electron.Net。

有人說android、ios不是有flutter uniapp xamarin么？linux不是有qt么？windows不是有wpf winform么？

是的，它們都是非常好的方案，不然早就消失了,儘可能多的了解每套方案，結合自己的場景選擇才是最優。

學習難度小

Html、css、js不變，與vue組件化開發方式基本一致，唯一需要的是學習基本的c#，而它與TypeScript是一個爹，學習容易。

不需要學習node、webpack

Js互操作性

後端可以直接調用前端的js函數，反之亦然。

獲得整個.net生態

webApi做前後端分離的後端接口

Mvc\razorpages做傳統網站

Winform wpf做windows桌面、上位機

Xamarin、maui做windows mac ios android跨平台開發

Electron.Net做linux桌面開發

Unity做遊戲開發

ML.net做機器學習

所有平台類庫共享、

MIT協議開源、免費、跨平台、

性能強勁。附：.net5 vs go1.17的性能測試

關於生態

不用懷疑，blazor是才出來幾年的新技術，生態遠不如vue react angular

但blazor跟前端並不衝突，它的界面畢竟還是用html css在網頁中呈現的，因此可以輕易的將現有前端框架移植到blazor中。下面推薦兩個國產的blazor框架，它們都是基於現有的前端框架移植過來的。

Ant Blazor
Bootstrap Blazor
圖表
更多的可以在github上搜索blazor，

應用場景舉例

所有xxx管理系統，物聯網系統、生產製造、醫療系統、教育系統、互聯網後台管理端、等。

Blazor Assembly簡單說明

Assembly可以理解為一個通用運行時或容器，你可以將c c++ rust go c# js java 一切語言編譯後在Assembly中運行，而Assembly可以運行在任何地方，服務端、客戶端、瀏覽器中。

目前來說幾乎所有的主流歷覽器都已支持Assembly，

未來Assembly成熟時，將抹平各種語言之間的生態壁壘，所有語言共享同一片生態，那時你不用在糾結用什麼語言，用你熟悉的、喜歡的就好。

Blazor Assembly是讓c#編譯後在Assembly里運行，重要是Blazor的組件在Server和Assembly模式中是共享的。Blazor Assembly具體介紹請查看官方文檔。

了解/學習資源

官方文檔就是最好的中文學習資源了。

Tags: Asp.Net Core Blazor VUE 前後端分離