【译】探索更轻量的Electron替代品来托管Blazor桌面应用程序
本文翻譯自 ASP.NET 項目組的 Steve Sanderson 的博客，發(fā)表于 2019 年 11 月 1 日。Steve Sanderson 是 Blazor 最早的創(chuàng)造者。這篇文章發(fā)布后還有一篇后續(xù)，是介紹一個在本文提到的跨平臺 webview 概念的落地項目 WebWindow ，我也會接著翻譯過來。
我們能否以更少的資源消耗，獲得 Electron 的利用 web 技術構建的桌面應用程序的優(yōu)勢?
Electron 在 2014 首次開源，作為一種使用 Web 技術（HTML+CSS+JS）構建桌面應用程序的方式，它迅速流行起來。其設計的核心思想是將可預測的環(huán)境捆綁在一起:
它捆綁了自己的 Chromium 副本， 因此，你可以確定你的 HTML/CSS 將如何被渲染，不必擔心 IE 瀏覽器（等） 隨機的舊版本。
它捆綁了自己的 Node.js 副本， 因此，你擁有已知的一個可移植編程平臺的版本，它超越了瀏覽器沙箱，可以直接與本機系統(tǒng)交互。
這些選擇在五年前很有價值，但到了 2019 年底，你可能會做出不同的選擇。這些選擇也是為什么 Electron 對資源極度渴求卻也會聞名的關鍵。默認的空白 Electron 8.0.0 應用程序需要下載 164MB（壓縮后 66MB），并作為 4 個單獨的進程運行，總共消耗 150MB。
這些數(shù)字在您看來完全可以滿足您的場景。如果是這樣，那太好了！這篇文章并不是要抨擊 Electron，它是一個運行良好的項目，人們顯然已經(jīng)成功地使用了它。在這篇文章中，我只是想思考一下我們還有什么其他的選擇。
它能有多輕?
假如...
...我們沒有綁定 Chromium， 而是使用了操作系統(tǒng)中已經(jīng)存在的 webview？到了 2019 年，幾乎所有的桌面操作系統(tǒng)都將擁有一個足夠現(xiàn)代的、通常基于 Chromium 的瀏覽器可以拿來即用。對于你的應用程序來說，它是上周的 Chromium 還是去年的都不重要。
... 我們沒有綁定 Node， 而是使用了操作系統(tǒng)中已經(jīng)存在的編程環(huán)境，或者選擇引入一個不同的？一個框架相關的 .NET Core 應用程序的大小可以很容易地在 1MB 以下，而一個獨立的 .NET Core 應用程序（即綁定了自己的 .NET Core 副本）經(jīng)鏈接和壓縮后可以減少到約 20MB。
各種 Electron 的輕量替代項目已經(jīng)如雨后春筍般涌現(xiàn)出來[1]。當然，也包括 PWA，但這不是這篇文章的目的，因為 PWA 不能進行對底層操作系統(tǒng)的本機訪問。
Electron 上的 Blazor
我們對使用 Blazor 構建跨平臺的桌面應用程序很感興趣。這并不奇怪：將 C#/.NET 的性能和生產(chǎn)率，與熟悉的 HTML/CSS UI 渲染結(jié)合在一起是強大的和有吸引力的。
因此，我們發(fā)布了一個示例和一個實驗性的包來托管 Electron 上的 Blazor[1]。這里的關鍵創(chuàng)新之處在于它不是運行在 WebAssembly 上，而是使用普通的跨平臺的 .NET Core 運行時來實現(xiàn)完全的原生 .NETb 性能，并在不受任何瀏覽器沙箱限制的情況下完全訪問本機操作系統(tǒng)。
你今天可以試試。但要注意，這只是一個“asplabs”項目，因為我們還沒有作出任何承諾，以推出和支持這項技術。
純 webview 上的 Blazor
不難想象，一個 Blazor 混合桌面應用程序?qū)⑷绾芜M一步大幅減小體積。我們可以用一個純粹的系統(tǒng)原生的 web view 替換掉 Electron，因為在 2019 年，在你的目標機器上總會有一個足夠好的來用的。另外，我們并不需要 Node 作為跨平臺的編程環(huán)境，因為 .NET Core 已經(jīng)為我們扮演了這樣的角色。
為了驗證這一點，我構建了 一項名為 BlazorDesktop 的實驗[2]。這與 BlazorElectron[3] 非常相似，實際上大部分代碼都是復制粘貼過來的。同樣，它運行在原生的 .NET Core 上（所以不是在 WebAssembly 上），但是現(xiàn)在它運行在一個更小的渲染堆棧上，沒有任何的 Chromium 或 Node.js 綁定。
這是一個功能齊全的 Blazor 應用程序，你可以在其中添加任何基于 .NET Core 的原生功能，并作為一個非常輕量級的桌面應用程序運行——具體數(shù)字見下文。與 PWA 不同，它不局限于瀏覽器沙箱。
如果您有興趣嘗試一下，請注意這只是一個概念驗證，目前僅適用于 Windows。將其擴展為跨平臺并不難（我將使用諸如 webview 之類的東西來添加 Mac+Linux 支持），但是我現(xiàn)在還沒有在積極地做這件事。如果您感興趣，請?zhí)峤灰环?PR。
統(tǒng)計數(shù)據(jù)
毫不奇怪，這個最小的 Blazor + webview 應用程序比構建在整個 Chromium + Node 技術棧上的應用程序要小得多，也不需要太多內(nèi)存:
.NET Core 的好處之一是，通過一個簡單的開關，您可以控制生成的輸出是否綁定了它自己的 .NET Core 運行時副本（也稱為獨立的），或者它是否假設運行時已經(jīng)安裝在目標 OS 上（也稱為依賴于框架）。在上面的第一個圖中可以看到這一點，您可以看到它對輸出大小有很大的影響，因為 Blazor 庫本身非常緊湊。
在企業(yè)環(huán)境中，如果您知道已經(jīng)安裝了某些軟件，那么可以安全地分發(fā)與框架相關的小于 1MB 的應用程序，其中相同的二進制文件可以在任何受支持的操作系統(tǒng)上運行。但是對于公共發(fā)行版，您很可能會發(fā)布一個獨立的應用程序——為每個 Windows、Mac 和 Linux 用戶分別生成不同的二進制文件。
請注意，上述壓縮的 Blazor webview 應用程序大約有 200KB 的大小，其中還包含了 Bootstrap 樣式，因此如果您正在使用其他的則可以刪除它。
需要做什么才能使其可行
正如我所說的，Blazor Desktop 目前只是一個快速的概念驗證，完全是在我從 NDC Sydney[4] 返回的旅途中開發(fā)的。要成為可行的產(chǎn)品還有很長的路要走。
它需要：
跨平臺支持， 例如使用 webview
Edge (Chromium) 支持，因此，在 Windows 10 上，我們使用的是操作系統(tǒng)自己的基于 Chromium 的瀏覽器，而不是我的原型中使用的基于 Edge 的 webview。
處理找不到合適的 webview 的情況。在極少數(shù)情況下，用戶的操作系統(tǒng)沒有提供可接受的 webview 技術，我們可以提示用戶并下載一個獨立的 Chromium 發(fā)行版（可能通過 CEF）。
桌面 API ——一個重大的需求，需要付出高成本地從零開始實現(xiàn)。Electron 不只是使用 Node 作為通用的編程環(huán)境;它還提供了一組跨平臺的 api，用于與桌面操作系統(tǒng)進行交互，執(zhí)行諸如復制到剪貼板、更改任務欄或 dock 圖標、顯示本機下拉菜單、顯示本機提示或?qū)υ捒虻热蝿铡?NET Core 本身提供了大量應用程序需要的 API，但是目前它并沒有解決很多桌面應用的問題，因為現(xiàn)在還沒有任何標準的基于.NET Core 的跨平臺 UI 技術。但是任何實際的應用程序都需要這些功能。可以想象，僅僅為了獲得這些 API 的跨平臺實現(xiàn)而綁定 Node 也是值得的（但仍然不綁定 Chromium）。
自動發(fā)布和下載更新
反饋要求
我寫這篇文章的原因主要是為了更多地了解開發(fā)人員社區(qū)對這些技術的感受。你有使用 .NET+HTML+CSS 構建混合桌面應用程序的場景嗎？你會樂意將 Blazor 與 Electron 一起使用，還是認為有必要更輕量？
注腳：現(xiàn)有的 Electron 替代品
多年來，許多人都在考慮制造更輕的 Electron 替代品。現(xiàn)在有各種各樣的開源項目，盡管還不清楚是否有關鍵的真正去大規(guī)模采用的動力。其中一些，如 Chromely[5]，移除了 Node，只捆綁了 Chromium。其他的，如 Neutralino[6]，則消除了 Chromium，只將基于 Node 的編程模型與本機操作系統(tǒng)的瀏覽器技術捆綁在一起。在最基本的方面，webview[7] 只是對 webview 概念的一個抽象：它以構建在主機操作系統(tǒng)中的任何瀏覽器技術來顯示 HTML/CSS，并且不提供任何自己的跨平臺編程模型。
本文翻譯自：https://blog.stevensanderson.com/2019/11/01/exploring-lighter-alternatives-to-electron-for-hosting-a-blazor-desktop-app/
參考資料
[1]
一個示例和一個實驗性的包來托管 Electron 上的 Blazor: https://github.com/aspnet/AspLabs/tree/master/src/ComponentsElectron
[2]一項名為 BlazorDesktop 的實驗: https://github.com/steveSandersonMS/BlazorDesktop
[3]BlazorElectron: https://github.com/aspnet/AspLabs/tree/master/src/ComponentsElectron
[4]NDC Sydney: https://ndcsydney.com/
[5]Chromely: https://github.com/chromelyapps/Chromely
[6]Neutralino: https://github.com/neutralinojs/neutralinojs
[7]webview: https://github.com/zserge/webview
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的【译】探索更轻量的Electron替代品来托管Blazor桌面应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .NET Core开发实战（第8课：配置
- 下一篇： 同为Chromium浏览器，Edge却被