共用方式為

適用於 ASP.NET Web Forms 開發人員的 Blazor 簡介

  • 發行項

提示

本內容節錄自《Blazor for ASP NET Web Forms Developers for Azure》電子書，可以從 .NET Docs 取得，也可以免費下載 PDF 離線閱讀。

下載 PDF

Blazor-for-ASP-NET-Web-Forms-Developers eBook cover thumbnail.

自 2002 年 .NET Framework 初次面世以來，ASP.NET Web Forms 架構已成為 .NET Web 開發的主要產品。 當 Web 仍在草創期時，ASP.NET Web Forms 即採用許多桌面開發所用的模式，讓建置 Web 應用程式變得簡單且具生產力。 在 ASP.NET Web Forms 中，您可以利用可重複使用的 UI 控制項快速架構網頁。 使用者互動會當成事件以自然的方式處理。 Microsoft 和控制項廠商提供的 Web Form UI 控制項有豐富的生態系統。 控制項可簡化連線至資料來源及顯示豐富資料視覺效果的工作量。 傾向於視覺化的 Web Form 設計工具，提供簡單的拖放介面來管理控制項。

多年來，Microsoft 引進了新的 ASP.NET 型 Web 架構，以處理 Web 開發趨勢。 有些這類 Web 架構包括 ASP.NET MVC、ASP.NET Web Pages，以及最近的 ASP.NET Core。 使用過每種新架構後，有些人預測 ASP.NET Web Forms 即將衰退，並批評它是過氣的不合時宜 Web 架構。 儘管有這些預測，許多 .NET Web 開發人員仍覺得 ASP.NET Web Forms 是完成工作的簡單、穩定且具生產力的方式。

撰寫本文時，每個月幾乎有 50 萬名 Web 開發人員使用 ASP.NET Web Forms。 ASP.NET Web Forms 架構在十年前對文件、範例、書籍和部落格文章而言十分穩定，現在仍然實用且相關。 對許多 .NET Web 開發人員而言，"ASP.NET" 仍然與 "ASP.NET Web Forms" 同義，如同初次設計 .NET 時一樣。 相較於其他新的 .NET Web 架構，有關 ASP.NET Web Forms 優缺點的爭論可能很激烈。 ASP.NET Web Forms 仍然是建立 Web 應用程式的熱門架構。

即使如此，軟體發展的創新也未變慢。 所有軟體發展人員都需要掌握新技術和趨勢。 有兩個趨勢特別值得注意：

  1. 向開放原始碼和跨平台偏移
  2. 應用程式邏輯向用戶端偏移

開放原始碼和跨平台 .NET

當 .NET 和 ASP.NET Web Forms 初次面世時，平台生態系統看起來與現在大為不同。 Windows 過去主導桌面和伺服器市場。 macOS 和 Linux 等替代平台仍在辛苦爭搶市場。 ASP.NET Web Forms 隨附於 .NET Framework 為 Windows 獨家元件，這表示 ASP.NET Web Forms 應用程式只能在 Windows Server 電腦上執行。 許多新式環境的伺服器和開發電腦現在使用不同的平台，因此對許多使用者而言，跨平台支援是剛性需求。

大部分的新式 Web 架構現在也是開放原始碼，這有許多優點。 單一專案擁有者不會為使用者修正 Bug 並新增功能。 開放原始碼專案可提高開發進度和將屆變更的透明度。 開放原始碼專案能獲得整個社群的參與貢獻，並滋養具支持性的開放原始碼生態系統。 開放原始碼儘管有風險，但許多消費者和參與者都發現適當的風險降低，可讓他們以安全且合理的方式享有開放原始碼生態系統的優點。 這類風險降低的範例包括參與者授權合約、方便授權、譜系掃描和支援基礎。

.NET 社群已採用跨平台支援和開放原始碼。 .NET Core 是 .NET 的開放原始碼和跨平台實作，可在大量平台上執行，包括 Windows、macOS 和各種 Linux 散發。 Xamarin 提供的 Mono，就是一種 .NET 開放原始碼版本。 Mono 可在 Android、iOS 和各種其他規格的裝置上執行，包括手錶和智慧型電視。 Microsoft 於 2020 年發行了 .NET 5，將 .NET Core 和 Mono 協調成「單一 .NET runtime 和架構，可在任何地方使用，且具有統一的執行階段行為和開發人員體驗」。

ASP.NET Web Forms 能從轉向開放原始碼和跨平台支援獲益嗎？ 很可惜，答案是否定的，至少達不到其他平台的程度。 .NET 團隊明確表示 ASP.NET Web Forms 不會移植到 .NET Core 或 .NET 8。 這是為什麼？

.NET Core 早期曾試圖移植 ASP.NET Web Forms。 但發現需要太多重大變更。 此外，Microsoft 也承認，其可同時支援的 Web 架構數量有限。 或許社群中有人願意挑起這個擔子，建立開放原始碼和跨平台版本的 ASP.NET Web Forms。 ASP.NET Web Forms 的原始程式碼已採用參考形式公開提供。 但目前，ASP.NET Web Forms 似乎還是 Windows 獨有，而且沒有開放原始碼貢獻模型。 如果跨平台支援或開放原始碼對您的案例很重要，您即必須尋找新的方案。

這表示 ASP.NET Web Forms 無效且不應該再使用了嗎？ 當然不是！ 只要 .NET Framework 仍隨附於 Windows，ASP.NET Web Forms 就會是支援的架構。 對許多 Web Form 開發人員而言，缺少跨平台和開放原始碼支援根本不是問題。 如果您不需要跨平台支援、開放原始碼或 .NET Core or .NET 8 的任何其他新功能，繼續使用 Windows 上的 ASP.NET Web Forms 完全沒問題。 ASP.NET Web Forms 未來數年仍是富有生產力的 Web 應用程式撰寫方式。

另一個值得注意的趨勢，就是向用戶端偏移。

用戶端 Web 開發

所有以 .NET 為基礎的 Web 架構，包括 ASP.NET Web Forms 在內，過去都有一個共同點：它們都是轉譯伺服器。 在伺服器轉譯的 Web 應用程式中，瀏覽器會向伺服器提出要求，這會執行一些程式碼 (ASP.NET 應用程式中的 .NET 程式碼) 以產生回應。 該回應會傳回瀏覽器處理。 在此模型中，瀏覽器是當成精簡的轉譯引擎使用。 產生 UI、執行商務邏輯和管理狀態的困難工作都在伺服器上發生。

不過，瀏覽器已成為多用途平台。 其會實作不斷增加的開放 Web 標準，以授權存取使用者電腦的功能。 為何不利用用戶端裝置的運算能力、儲存體、記憶體和其他資源呢？ 需要在用戶端處理部分或全部工作時，UI 互動特別能因更豐富的風格和互動程度更高而獲益。 應該在伺服器上處理的邏輯和資料仍可在伺服器端處理。 可以使用 Web API 呼叫或甚至即時通訊協定，例如 WebSockets。 如果 Web 開發人員願意撰寫 JavaScript，這些優點皆可免費享受。 用戶端 UI 架構，例如 Angular、React 和 Vue，可簡化用戶端 Web 開發，並隨著受歡迎程度而成長。 ASP.NET Web Forms 開發人員也可自利用用戶端得益，甚至可使用一些整合 JavaScript 架構的現成支援，例如 ASP.NET AJAX。

但橋接兩個不同的平台和生態系統 (.NET 和 JavaScript) 會增加成本。 在語言、架構和工具皆不相同的兩個平行世界中，需要有相關的專業知識。 用戶端和伺服器之間無法輕鬆共用程式碼和邏輯，因而造成重複和工程的額外負荷。 而跟上 JavaScript 生態系統也很困難，其過去曾以極快的速度演進。 前端架構和建置工具的喜好變更快速。 業界觀察到從 Grunt 到 Gulp 到 Webpack 等等的發展。 前端架構也出現同樣不停的更新換代，例如 jQuery、Machineout、Angular、React 和 Vue。 但是，假設 JavaScript 的瀏覽器具有獨佔性，就沒什麼選擇空間了。 也就是說，除非網路社群能一起發力創造奇跡！

WebAssembly 滿足需求

2015 年，幾大瀏覽器廠商加入 W3C 社群組織，建立了名為 WebAssembly 的新開放 Web 標準。 WebAssembly 是 Web 的位元組程式碼。 如果您可以將程式碼編譯為 WebAssembly，它就可以在任何平台上，以接近原生的速度在任何瀏覽器中執行。 初始工作著集中在 C/C++。 結果驚豔：不需要外掛程式，可直接在瀏覽器中執行原生 3D 圖形引擎。 自此而後，所有主要瀏覽器皆實作 WebAssembly 並以此為標準。

在 WebAssembly 執行 .NET 的成果於 2017 年發表並於 2020 年發行，包括 .NET 5 和更新版本的支援。 能夠直接在瀏覽器中執行 .NET 程式碼，實現了使用 .NET 進行完整的堆疊 Web 開發。

Blazor：使用 .NET 進行完整的堆疊 Web 開發

在瀏覽器中執行 .NET 程式碼的能力，本身不會提供建立用戶端 Web 應用程式的端對端體驗。 這時就需要 Blazor。 Blazor 是一種用戶端 Web UI 架構，以 C# 為基礎而不是 JavaScript。 Blazor 可以透過 WebAssembly 直接在瀏覽器中執行。 不需要瀏覽器外掛程式。 Blazor 應用程式也可以在 .NET 上執行伺服器端，並透過瀏覽器的即時連線來處理所有使用者互動。

Blazor 工具為 Visual Studio 和 Visual Studio Code 提供絕佳的支援。 此架構也包含完整的 UI 元件模型，並具有下列內建設備：

  • 表單和驗證
  • 相依性插入
  • 用戶端路由
  • 版面配置
  • 瀏覽器內偵錯
  • JavaScript Interop

Blazor 與 ASP.NET Web Forms 有很多共通點。 這兩種架構都提供以元件為基礎、由事件驅動的具狀態 UI 程式設計模型。 主要架構差異為 ASP.NET Web Forms 只在伺服器上執行。 Blazor 可以在瀏覽器的用戶端上執行。 但是如果您有 ASP.NET Web Forms 背景，會對 Blazor 感覺很熟悉。 Blazor 對希望利用用戶端開發和 .NET 開放原始碼、跨平台未來的 ASP.NET Web Forms 開發人員而言，是自然的解決方案。

本書介紹專為 ASP.NET Web Forms 開發人員建立的 Blazor。 每個 Blazor 概念都以類似 ASP.NET Web Forms 特性和做法的內容呈現。 閱讀完本書後，您將了解：

  • 如何建置 Blazor 應用程式。
  • Blazor 的運作方式。
  • 如何建立 Blazor 與 .NET 的關聯性。
  • 在適當的時機將現有的 ASP.NET Web Forms 應用程式移轉至 Blazor 的合理策略。

開始使用 Blazor

開始使用 Blazor 很容易。 請前往 https://blazor.net，依連結安裝適當的 .NET SDK 和 Blazor 專案範本。 您也會找到在 Visual Studio 或 Visual Studio Code 中設定 Blazor 工具的指示。

上一個下一個