[Asp.Net Core] 淺談Blazor Server Side
在2016年,本人就開始了一個內部專案,其特點就是用C#構建DOM樹,然後把DOM同步到瀏覽器中顯示. 並且在一些小工程中使用.
3年下來,效果很不錯,但因為是使用C#來構建控制元件樹,在沒有特定語法的情況下,程式碼風格不是那麼好.
典型的風格大概是這樣的:
![[Asp.Net Core] 淺談Blazor Server Side](https://796t.com/res/2020/07-01/17/3b822556aed03a7660a90b2fedb8ec8d.png)
這個模式挺好的,有點嫌棄C#程式碼佔比太高,HTML程式碼靠字串來完成,在介面的設計上,比較吃力.
在2019年秋,Asp.Net 3.0出來了,Blazor Server Side 也正式公佈,可以在VS2019中使用.
當時我就去嚐嚐鮮,發現這東西,和我的框架很接近. 不同的是,
Blaozr Server Side 是基於 MVVM 的,而我的框架是基於傳統控制元件樹的.
Blazor畢竟有微軟做爸爸,在VS上的支援是直接的,由Razor檔案來負責 HTML+C# 的程式碼模式,完全支援智慧提示.
天呀,這不是就是我夢寐以求的開發方式嗎? 於是,在疫情期間,我把以前的框架,和Blazor直接整合在一起. 開始做一些小工程做驗證.
現在這個整合大部分需求與問題都得到了解決. 還需要提供更多的控制元件用以提高工程的開發速度.
先上圖,看看 Blazor 的程式碼是長什麼樣子的.
(Razor語法,和MVC有點接近. 但是MVC是輸出靜態HTML的,Blazor元件是生成伺服器樹狀結構的)
![[Asp.Net Core] 淺談Blazor Server Side](https://796t.com/res/2020/07-01/17/edc8015bd5aad4e5f7c37d7ebb38797f.png)
與 MVC 的 Razor語法是接近的,然而最大不同時,MVC 的最終目標是生成字串發給瀏覽器. 而Blazor生成了模型之後,依然是"活動"的,隨時準備好響應客戶端的事件.
![[Asp.Net Core] 淺談Blazor Server Side](https://796t.com/res/2020/07-01/17/800cde7b0d690ce60d92ca0390e1fa17.png)
對於 Blazor 架構的一些特點,畫了一些圖.
首先,我把這種模式成為 "伺服器UI對映",後面都會陸續使用這個概念.
個人看法,通常的情況,僅供參考
![[Asp.Net Core] 淺談Blazor Server Side](https://796t.com/res/2020/07-01/17/31a82edacfca6ead8ff19e29bae45e3f.png)
![[Asp.Net Core] 淺談Blazor Server Side](https://796t.com/res/2020/07-01/17/b396a79bd2ae0342eafeba0052c5f804.png)
Blazor 因為在伺服器上把程式碼執行狀態駐留在記憶體,
所以程式執行的上下文得以儲存,而關聯的事件也會繫結到上下文中.
事件處理函式被呼叫時,相關的物件和資料會全部可用.
具體的細節無法說太多,畢竟這是新事物,我自己也是一邊使用一邊積累心得.
我以後會陸陸續續放上各種例子,提供給感興趣的網友們,用節省時間的方式去迅速掌握Blazor的開發流程.
最後,放上一個對照表,以供參考:
| 伺服器UI對映 | C/S | B/S | B+C混合 | |
| 簡單概述 | 活在伺服器 投影到客戶端 |
活在客戶端 與伺服器通訊 |
伺服器生成HTML 客戶端展示與回發 |
伺服器先生成HTML 客戶端深化介面功能 |
| 典型方案 | Blazor Server Side at server hosted |
平臺:Windows/Android/iOS GUI框架 網頁:JS控制元件類/React/Argular/Vue.. Blazor WebAssembly Blazor ServerSideat client hosted |
各種WEB伺服器方案: ASP/ASP.NET WebForms,MVC PHP/Java/Node.js/.. |
各種框架混合使用 |
| 典型應用 | 無,適合: 微信公眾號應用, 網站後臺,手機嵌入頁面 小程式webview嵌入頁面 |
各種Desktop/Mobile客戶端 遊戲客戶端,網站SPA,微信小程式, |
各種入門級展示型網站 | 各種複雜點的網站 |
| 讀寫資料 | 直接,方便 | 需通過伺服器代勞 | 直接,方便 | 混合 |
| 通訊方式 | 已在伺服器執行 | HTTP/Socket/WebSocket等等 由各平臺/框架提供 |
HTTP GET/POST為主 | 混合 |
| 通訊程式碼 | 無需額外編寫(優點) | 基於XML/JSON/Query/Form/自定格式 程式設計師指定具體的名稱與值 伺服器與客戶端都要編寫大量程式碼(缺點) 關乎許可權的話要保證安全性,工作量會很大 |
主要是Query/Form 程式設計師指定具體的名稱與值 只適合簡單的程式 |
混合 |
| 服務重啟 熱更新 |
丟失未儲存的狀態(缺點) 對正使用的使用者造成影響 |
未儲存狀態在客戶端儲存 只要重試便可 |
狀態在瀏覽器儲存 只要重試便可 |
狀態在瀏覽器儲存 只要重試便可 |
| 伺服器負荷 | 最重,(缺點) 每線上使用者會佔用伺服器記憶體 只適合少量線上使用者場合 |
最少(優點) 伺服器基本上只處理業務邏輯 每個請求會很快釋放,負擔很小 |
不多 | 較少 |
| 適合場景 | 資金少的企業定製應用 使用者量較少的小功能 以快速開發為目標 |
通用開發模式 適合絕大部分情況 |
比較適合內容展示網站 或比較簡單的業務系統 |
混合 |
| 程式碼部署 | 純伺服器,更保密 | 客戶端,沒那麼保密(缺點) 通訊機制可能會被濫用攻擊 |
伺服器為主,較為保密 | 混合情況 |
| 首次啟動 | 極快 100KB下載量起 | 慢,看框架和程式整體大小 | 極快,看內容多少 | 混合 |
| 版本更新 | 直接覆蓋 | 客戶端需下載或重新載入 | 直接覆蓋 | 混合情況 |
| 搜尋引擎 | 無 | 無 | 可被收錄 | 有 |
| 被惡意 收集資料 |
目前較安全 | 通過通訊協議收集 | 通過爬蟲收集 | 混合 |
以上就是[Asp.Net Core] 淺談Blazor Server Side 的詳細內容，更多關於Blazor Server Side 的資料請關注我們其它相關文章！