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