無論你是純前端、純後端、還是全棧,請花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具體介紹請檢視官方文件。
瞭解/學習資源
官方文件就是最好的中文學習資源了。