評比WebForm, MVC5, MVC6/Blazor App (2021/06)

從背景開始

.NET Framework 已過時

於數個月前，已確認 .NET Framework 被微軟放棄改以 .NET 5 取代。也就是宣告所有以 .NET Framework 為基礎的系統都已過時。在實務上若客戶並未打算昇級主機系統那就可以繼續使用 .NET Framework（甚至用WebForm也行）。但不管如何這都只是過渡時期，上一批客戶更新伺服器主機已過二、三年了，剩下的過渡期也就剩二、三年而已。

MVC5 與 WebForm 也已過時

WebFrom 的生命周期要分兩個階段，UpdatePanel 元件導入前與後，也就是 Ajax 機制導入前與後，這改變了很多開發的過程。重要的一點是 WebFrom 是完整的網站開發框架。

MVC5 這裡是指MVC第一版到第五版。MVC5 完全囊括了WebForm，可以理解成 MVC5 相容 WebForm，只要調整一下 URL routing 舊有的 WebForm 就可以繼續延用。但是MVC5有個嚴重的問題就是它不是完整的網站開發框架。因為MVC5的前端UI空白，只能做出最早期的CGI介面而已。我想這能解釋MVC到了第五版還是沒人用。直到 Angular.js 的出現MVC5才開始可以使用。 Angular.js並非為MVC5設計，不過它的Directives特性意外的補足了MVC5前端UI的空白。只是後來又發生了Angular.js自爆事件，結局是MVC5再次被(我)丟入垃圾桶。 自 Visual Studio 2019 開始MVC5也不再使用，就是微軟也讓MVC5進入歷史。

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.

MVC6

MVC6說是MVC的第6版但其實他與MVC5完全不一樣，核心已被置換了，並為雲端部署設計。

MVC6網站框架特徵與OWIN相同應是改良自OWIN，證據之一是MVC6的啟動程式碼與OWIN相同是 Stratup.cs 與 appsettings.json 不再是WebForm與MVC5的Global.asax與Web.config。證據之二是沒人在討論OWIN了。

MVC6部署到IIS伺服器時仍會出現Web.config，不過這與之前不一樣，只是引導IIS伺服器啟用網站，網站本身不再使用Web.config了。

MVC6的前端語法一樣叫Razor syntax。與之前相比在確實改良了不少。加入了一些asp-Directives （ASP.NET Core 表單中的標籤協助程式）取代@HtmlHelper類別這個奇怪的東西。MVC6用的Razor syntax與MVC5在實質內容上並沒有延續性只是語形相似。 另外，MVC5前端空白的缺點到了MVC6並沒有改善，相差的是大環境不同，前端UI的豐富性選擇比起數年之前好了很多。

LogoASP.NET Core 的 Razor 語法參考docsmsft
LogoASP.NET Core 表單中的標籤協助程式docsmsft
asp-Directives

MVC6 網站框架

MVC6支援的網站框架不只一種，以Visial Studio 2019 來分類如下：

ASP.NET Web App 應用程式

  • .NET5 MVC6/RazorPage + Bootstrap 4.3.1 + jQuery 3.5.1

  • 語言：C#9, Razor syntax(full), JavaScript, html5/CSS3/jquery

  • 說明：前端仍用JavaScript開發。仍然要用jQuery。 相對比較後不建議採用。

Blazor Server 應用程式

  • .NET5 MVC6/BlazorServer + Bootstrap 4.3.1

  • 語言：C#9, Razor syntax, html5/CSS3

  • 說明：前端用C#開發。不再需要jQuery了。 前端基底推論不是WebAssembly。

Blazor WebAssembly 應用程式

  • .NET5 MVC6/BlazorWASM + Bootstrap 4.3.1

  • 語言：C#9, Razor syntax, html5/CSS3

  • 說明：前端用C#開發。不再需要jQuery了。 前端基底是WebAssembly。

搭配React.js的ASP.NET Core、搭配React.js與Redux的ASP.NET Core

  • .NET5 MVC6/SPA + React 資源

  • 語言：C#9, JavaScript/TypeScript, html5/CSS3

  • 說明：MVC6 也可以與 React 搭配。當然要先安裝 node.js 環境。

框架試用比較過程

MVC5 的部份

開發配置：IDE: Visual Studio 2017, .NET Framework 4.7.2, Bootstrap 4.6。 DB工具：Dapper

因為NET Framework確定已過時，所以這只能是過渡，時限相信不會超過三年。 需大量撰寫 PartialView 與 Ajax call，也需大量使用jquery selector語法。相同運算機制程式碼經常性離散，這會讓接手工程師難以維護。

優點：IE11可執行（如果這點現在還算優點的話） 缺點：無元件，相同運算機制程式碼經常性離散(下位接手工程師不易維護) 封包安全性：差

MVC6/RazorPage 模式

因前端UI仍要用jquey, JavaScript，所以數次評比都未入選連用試用都不想。

MVC6/Blazor Server 模式

開發配置：IDE: Visual Studio 2019, .NET 5, Blazor Server, 外掛：MudBlazor 或 Bootstrap 5。 DB工具：Dapper

數次試用後(我)認為是最適合公司的特性。前端開發語言用C# ，光是這一點就可以減少一定程度前、後端資料交換轉型的程式碼。也因為是全程強型別可以避免打錯字這種很 low 的失誤。

框架的主特性與WebForm相當，除了Web UI外完勝WebForm。框架也很精鍊，本身已支援 CSS隔離，Razor 元件開發語法也比React 元件更精鍊。

比較大的問題是前端Web UI空白，這一點已有幾種為 Blazor 打造的 CSS-Framework，如：MudBlazor 等，也可以混用 Bootstrap 5。

MVC6/Blazor WASM 模式

開發配置：IDE: Visual Studio 2019, .NET 5, Blazor WebAssembly, ASP.NET Core 裝載(hosting) 外掛：MudBlazor 或 Bootstrap 5。 DB工具：Dapper

此框架的主特性與 React App 相當，不過 html tag 的控制還是遠遠落後React。框架也很精鍊，本身已支援 CSS隔離，Razor 元件開發語法也比React 元件更精鍊。現階段雖比不上React App，相信之後也會拉近不少。

若要完全發揮WebAssembly的能力就要選此模式。又分成是否要ASP.NET Core 裝載(hosting)，其差別在後端有否直接支援Web API。

比較大的問題是前端Web UI空白，這一點已有幾種為 Blazor 打造的 CSS-Framework，如：MudBlazor 等，也可以混用 Bootstrap 5。

MVC6/SPA + React.v17 模式

開發配置：IDE: Visual Studio 2019, .NET 5, node.js, React.v17 外掛：Material-UI, Redux 等其它資源 DB工具：Dapper

可以做出品質最好的 CSR Web App，成熟且豐富的前端Web UI元件。

缺點：學習曲線高。對初學者來說學習項目太多。前後端弱、強型別轉換就耗掉不少 routine 的程式碼。雖也有TypeScript，但仍存在語言別轉換的問題。 在 TypeScript 與 C# 的 Data Model 轉換比 JavaScript 與C# 的轉換要更多的程式碼。

結論

本人建議同時保有二種開發模式

  • MVC6/SPA + React.v17 模式

    • 可以做出UX最好的介面。

    • 幾乎所有的前端資源都有 React 版本。

    • 現在最成熟的 SPA solution 之一。

    • 可以相對輕鬆的水平擴展其他領堿用 React 開發的應用，比如：LINE LIFF等等

  • MVC6/Blazor Server 模式

    • 原本以 WebForm 開發的系統，都可以用這個方法重構。

    • 架構精鍊，學習曲線最低。

    • 只是前端 solution 要決定一下以那一套為主。

Blazor 前端模組比較

  • 用 MudBlazor 或 MatBlazor (這兩套差不多)

    • 可以直接套用。　

    • 分類上是CSS in JS。

    • 依循 Material Design 規範。

  • 用 Bootstrap 5

    • 建議用於全客製化的狀況。

    • 以 Sass/SCSS 實作。

    • 這一版不再需要 jquery。

    • 也可以用在非 Blazor 的專案

補充：MVC5 vs Blazor Server App

對像

MVC5

Blazor Server App

主模組

.NetFx 4.7.2

MVC5

Bootstrap 4.6

.NET5

MVC6\Blazor

MudBlazor

開發語言

C#, Html5, CSS3, JavaScript, jQuery

C#, Html5, CSS3

進階: JavaScript

通訊封包

HTTP/1.1

(text message)

ASP.NET Core SignalR (binary message)

封包安全性

需加工

天生較高

通訊語法

Http Request, Ajax Call

call function

網站框架

MVC5 相容 WebForm

MVC6\OWIN 比MVC5更精鍊

UI主要元素

Partial View, @HtmlHelper 無元件, 只能算是共用模組

Razor Component

元件化

網站初始化

Global.asax

Startup.cs

網站組態檔

Web.config

XML格式

appsettings.json

JSON格式，並省去routine的部份

其他

已過時技術

需要觀念上的更新

CSS Framework

Boostrap 4.6

採用SCSS開發

MudBlazor

依據 Material Design 實作

俱 JSS 特性。

優點

IE11可執行（如果這點現在還算優點的話）

1) 前後端都用 C# 。

2) 框架精鍊學習曲線低。

3) 前端 razor component 天生俱 Ajax 特性。

4) 開發體驗與WebForm有部份相似可降低學習時間。

缺點

1) 無元件，相同運算機制程式碼經常性離散 (接手工程師不易維護)

2) 前端UI預設空白。若要做出Reactive UI需寫很多PartialView, jQuery, Ajax Call 混合碼。

3)前後端資料封包轉換(JS弱型別,C#強型別)就是一份不算小的工程。

1) IE11不再支援。瀏覽器需支援 html5 以上規格。

2) 伺服器 Win Server 2016 以上

(EOF)

Previous.NET5 Blazor WASM + SignalR 手札NextRabbitMQ試用筆記

Last updated