跳到主要內容

11 篇標記為「展示」的文章

重點介紹精選的 Electron 使用案例

檢視所有標籤

2023 年生態系統回顧

·閱讀時間 5 分鐘

回顧 2023 年 Electron 開發者生態系統的改進和變更。


在過去的幾個月裡,我們一直在 Electron 生態系統中進行一些變更,以增強 Electron 應用程式的開發者體驗!以下是 Electron 總部最新新增功能的快速概述。

Electron Forge 7 及更高版本

Electron Forge 7 — 我們用於封裝和發布 Electron 應用程式的一體化工具的最新主要版本 — 現在已推出。

雖然 Forge 6 是從 v5 完全重寫的,但 v7 的範圍較小,但仍然包含一些重大變更。未來,我們將繼續在需要進行重大變更時發布 Forge 的主要版本。

如需更多詳細資訊,請參閱 GitHub 上完整的 Forge v7.0.0 變更記錄

重大變更

  • 切換至 notarytool 以進行 macOS 公證:自 2023-11-01 起,Apple 停止使用用於 macOS 公證的舊版 altool,此版本完全將其從 Electron Forge 中移除。
  • 最低 Node.js 版本提高至 v16.4.0:在此版本中,我們已將所需的最低 Node.js 版本設定為 16.4.0。
  • 停止支援 electron-prebuiltelectron-prebuilt-compileelectron-prebuilt 是 Electron npm 模組的原始名稱,但在 v1.3.1 中被 electron 取代。electron-prebuilt-compile 是該二進位檔的替代方案,它具有增強的 DX 功能,但最終被放棄作為專案。

重點

  • Google Cloud Storage 發行者作為我們更好地支援靜態自動更新的一部分,Electron Forge 現在支援直接發布到 Google Cloud Storage!
  • ESM forge.config.js 支援Electron Forge 現在支援 ESM forge.config.js 檔案。(附註:請期待 Electron 28 中的 ESM 進入點支援。)
  • 現在,製作器並行執行在 Electron Forge 6 中,製作器是依序執行的,原因 ✨ 很老舊 ✨ 。從那時起,我們已測試了「製作」步驟的並行化,沒有任何不良副作用,因此您應該可以在為同一平台建置多個目標時看到速度加快!
感謝您!

🙇 非常感謝 mahnunchik 為 Forge 組態中的 GCS 發行者和 ESM 支援做出貢獻!

更好的靜態儲存自動更新

Squirrel.Windows 和 Squirrel.Mac 是特定於平台的更新程式技術,可支援 Electron 的內建 autoUpdater 模組。這兩個專案都支援透過兩種方法進行自動更新

  • 相容 Squirrel 的更新伺服器
  • 託管在靜態儲存提供者上的資訊清單 URL (例如 AWS、Google Cloud Platform、Microsoft Azure 等)

更新伺服器方法傳統上是 Electron 應用程式的建議方法 (並提供更新邏輯的其他自訂),但它有一個主要的缺點 — 如果應用程式是封閉原始碼,則需要應用程式維護自己的伺服器執行個體。

另一方面,靜態儲存方法一直都是可行的,但在 Electron 內部文件中未記載,並且在 Electron 工具套件中支援不佳。

@MarshallOfSound 的一些出色工作下,無伺服器自動應用程式更新的更新故事已大幅簡化

  • 現在可以設定 Electron Forge 的 Zip 和 Squirrel.Windows 製作器來輸出相容於 autoUpdater 的更新資訊清單。
  • 新的主要版本 update-electron-app (v2.0.0) 現在可以讀取這些產生的資訊清單,作為 update.electronjs.org 伺服器的替代方案。

將您的製作器和發行者設定為將更新資訊清單上傳到雲端檔案儲存空間後,您只需幾行組態即可啟用自動更新

const { updateElectronApp, UpdateSourceType } = require('update-electron-app');

updateElectronApp({
updateSource: {
type: UpdateSourceType.StaticStorage,
baseUrl: `https://my-manifest.url/${process.platform}/${process.arch}`,
},
});
進一步閱讀

📦 想了解更多資訊嗎?如需詳細指南,請參閱 Forge 的自動更新文件

@electron/ 擴展領域

當 Electron 剛開始時,社群發布了許多套件,以增強開發、封裝和發布 Electron 應用程式的體驗。隨著時間的推移,許多這些套件被納入 Electron 的 GitHub 組織,核心團隊承擔維護的重擔。

在 2022 年,我們開始將所有這些第一方工具整合到 npm 上的 @electron/ 命名空間下。這項變更意味著,過去使用 electron-foo 的套件現在在 npm 上是 @electron/foo,而過去命名為 electron/electron-foo 的儲存庫現在在 GitHub 上是 electron/foo。這些變更能清楚地區分第一方專案和使用者領域專案。這包含許多常用的套件,例如:

  • @electron/asar
  • @electron/fuses
  • @electron/get
  • @electron/notarize
  • @electron/osx-sign
  • @electron/packager
  • @electron/rebuild
  • @electron/remote
  • @electron/symbolicate-mac
  • @electron/universal

未來,我們發佈的所有第一方套件也將會放在 @electron/ 命名空間下。這項規則有兩個例外:

  • Electron 核心將繼續以 electron 套件發佈。
  • Electron Forge 將繼續在其單一程式碼庫下,將所有套件發佈在 @electron-forge/ 命名空間下。
尋求星號

⭐ 在此過程中,我們也意外地將 electron/packager 儲存庫設為私有,這造成一個不幸的副作用,即抹除了我們的 GitHub 星號數 (在抹除之前超過 9000 個)。如果您是 Packager 的活躍用戶,我們將感謝您給予 ⭐ 星號 ⭐!

推出 @electron/windows-sign

從 2023 年 6 月 1 日開始,業界標準開始要求 Windows 程式碼簽署憑證的金鑰必須儲存在符合 FIPS 規範的硬體上。

實際上,這意味著對於在 CI 環境中建置和簽署的應用程式來說,程式碼簽署變得更加困難,因為許多 Electron 工具會將憑證檔案和密碼作為組態參數,並嘗試使用硬式編碼的邏輯從那裡進行簽署。

這種情況一直是 Electron 開發人員常見的痛點,這就是為什麼我們一直在努力開發更好的解決方案,將 Windows 程式碼簽署隔離到其自己的獨立步驟中,類似於 @electron/osx-sign 在 macOS 上所做的那樣。

未來,我們計劃將這個套件完全整合到 Electron Forge 工具鏈中,但目前它獨立存在。該套件目前可透過 npm install --save-dev @electron/windows-sign 安裝,並且可以透過程式設計方式或透過 CLI 使用。

請試用看看,並在儲存庫的問題追蹤器中給我們您的意見回饋!

下一步是什麼?

我們將在下個月進入一年一度的 12 月靜默期。在我們這樣做的同時,我們將思考如何在 2024 年讓 Electron 開發體驗更加美好。

您希望看到我們接下來開發什麼?請告訴我們!

本周專案:Jasper

·閱讀時間 5 分鐘

本週我們採訪了 Jasper 的創作者,這是一款基於 Electron 的工具,用於管理 GitHub 通知。


您好!您是誰?

我是 Ryo Maruyama,一位在日本的軟體開發人員。我正在開發 JasperESDoc

什麼是 Jasper?

Jasper 是一款彈性且功能強大的 GitHub 問題閱讀器。它支援 github.com 和 GitHub Enterprise 上的問題和提取請求。

Jasper App Screenshot

您為什麼要製作它?

當人們在工作或 OSS 活動中使用 GitHub 時,他們每天往往會收到許多通知。作為訂閱通知的方式,GitHub 提供電子郵件和網頁通知。我使用了這些幾年,但我遇到了以下問題:

  • 很容易忽略提到我、我評論過或我正在關注的問題。
  • 我會把一些問題放在腦海中的角落,稍後再檢查,但我有時會忘記它們。
  • 為了不忘記問題,我會在瀏覽器中保持開啟許多標籤。
  • 很難檢查所有與我相關的問題。
  • 很難掌握我團隊的所有活動。

我花費大量時間和精力來防止這些問題發生,所以我決定製作一個 GitHub 問題閱讀器來有效解決這些問題,並開始開發 Jasper。

誰在使用 Jasper?

Jasper 被許多使用 GitHub 的公司的開發人員、設計人員和管理人員使用。當然,一些 OSS 開發人員也在使用它。而且 GitHub 的一些人也在使用它!

Jasper 如何運作?

設定 Jasper 後,會出現以下畫面。從左到右,您可以看到「串流列表」、「問題列表」和「問題主體」。

Jasper Start Screen

這個「串流」是 Jasper 的核心功能。例如,如果您想查看「分配給 electron/electron 儲存庫中的 @zeke 的問題」,您可以建立以下串流:

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

建立串流並等待幾秒鐘後,您就可以看到符合條件的問題。

Jasper Start Screen 3

我們可以透過串流做什麼?

我將介紹串流可以使用哪些條件。

使用者和團隊

串流問題
mentions:cat mentions:dog提及使用者 catdog 的問題
author:cat author:dog由使用者 catdog 建立的問題
assignee:cat assignee:dog分配給 catdog 的問題
commenter:cat commenter:dogcatdog 評論過的問題
involves:cat involves:dog「涉及」catbob 的問題
team:animal/white-cat team:animal/black-dog提及 animal/white-catanimal/black-dog 的問題

involves 表示 mentionauthorassigneecommenter

儲存庫和組織

串流問題
repo:cat/jump repo:dog/runcat/jumpdog/run 中的問題
org:electron user:cat user:dogelectroncatdog 中的問題

orguser 相同

屬性

串流問題
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1cat/jump 中附加到 v1.0.0v1.0.1 的問題
repo:cat/jump label:bug label:blockercat/jump 中附加 bug blocker 的問題
electron OR atomshell包含 electronatomshell 的問題

審閱狀態

串流問題
is:pr review:requiredcat/jump 中需要審閱的問題
is:pr review-requested:catcat 請求審閱的問題。
但這些尚未審閱。
is:pr reviewed-by:catcat 審閱的問題

正如您可能注意到的,串流可以使用 GitHub 的搜尋查詢。有關如何使用串流和搜尋查詢的詳細資訊,請參閱以下 URL。

Jasper 還具有未讀問題管理、未讀評論管理、標記星號、更新通知、篩選問題、鍵盤快捷鍵等功能。

Jasper 是付費產品嗎?它要多少錢?

Jasper 為 12 美元。但是您可以免費試用 30 天的試用版

您為什麼選擇在 Electron 上建置 Jasper?

我喜歡 Electron 的以下方面:

  • 可以使用 JavaScript/CSS/HTML 開發應用程式。
  • 可以為 Windows、Mac 和 Linux 平台建置應用程式。
  • Electron 正在積極開發中,並且擁有龐大的社群。

這些功能可以快速且簡單地開發桌面應用程式。這太棒了!如果您有任何產品想法,您應該考慮務必使用 Electron。

您在開發 Jasper 時遇到哪些挑戰?

我花了很多時間才弄清楚「串流」的概念。一開始,我考慮使用 GitHub 的 通知 API。然而,我注意到它不支援某些使用案例。在那之後,我考慮使用 問題 API提取請求 API,以及通知 API。但它從未成為我想要的樣子。然後在思考各種方法時,我意識到輪詢 GitHub 的 搜尋 API 會提供最大的彈性。我花了約一個月的時間進行實驗才達到這個程度,然後我用了兩天的時間實作了具有串流概念的 Jasper 原型。

注意:輪詢最多限制為每 10 秒一次。這對於 GitHub API 的限制來說是可以接受的。

接下來有什麼?

我計畫開發以下功能

  • 篩選過的串流:一個串流會有一些篩選過的子串流,可以過濾串流中的問題。這就像 SQL 的視圖一樣。
  • 多個帳號:你將能夠同時使用 github.com 和 GHE。
  • 改善效能:目前在 WebView 中載入 issue 的速度比一般瀏覽器慢。

在 Twitter 上追蹤 @jasperappio 以獲取更新。

本周專案:WebTorrent

·閱讀時間 9 分鐘

這週我們訪問了 @feross@dcposch,談論 WebTorrent,這是一個基於網頁的 torrent 用戶端,它將使用者連接在一起,形成一個分散式的、去中心化的瀏覽器對瀏覽器網路。


什麼是 WebTorrent?

WebTorrent 是第一個在瀏覽器中運作的 torrent 用戶端。它完全用 JavaScript 編寫,可以使用 WebRTC 進行點對點傳輸。不需要瀏覽器外掛程式、擴充功能或安裝。

透過使用開放的網路標準,WebTorrent 將網站使用者連接在一起,形成一個分散式的、去中心化的瀏覽器對瀏覽器網路,以實現高效的檔案傳輸。

你可以在這裡看到 WebTorrent 的運作示範:webtorrent.io

webtorrent homepage

這有什麼酷的地方?

想像一個像 YouTube 的影片網站,但訪客可以幫助託管網站的內容。使用 WebTorrent 的網站使用者越多,網站的速度就越快、彈性就越高。

瀏覽器對瀏覽器的通訊減少了中間人,讓使用者可以按照自己的方式進行溝通。不再有客戶端/伺服器 - 只是一個所有參與者都平等的點對點網路。WebTorrent 是重新去中心化網路的第一步。

Electron 在其中扮演什麼角色?

大約一年前,我們決定建構 WebTorrent Desktop,一個以桌面應用程式形式運作的 WebTorrent 版本。

WebTorrent Desktop player window

我們創建 WebTorrent Desktop 的原因有三個

  1. 我們想要一個乾淨、輕巧、無廣告、開源的 torrent 應用程式
  2. 我們想要一個具有良好串流支援的 torrent 應用程式
  3. 我們需要一個「混合用戶端」,可以連接 BitTorrent 和 WebTorrent 網路

如果我們已經可以在網頁瀏覽器中下載 torrent,為什麼還需要桌面應用程式?

首先,稍微介紹一下 WebTorrent 的設計背景。

webtorrent desktop logo

在早期,BitTorrent 使用 TCP 作為其傳輸協定。後來,uTP 出現了,承諾提供比 TCP 更好的效能和額外優勢。每個主流的 torrent 用戶端最終都採用了 uTP,而今天你可以透過任一協定使用 BitTorrent。WebRTC 協定是下一個合理的步驟。它帶來了與網頁瀏覽器互通的希望 - 一個由所有桌面 BitTorrent 用戶端和數百萬個網頁瀏覽器組成的大型點對點網路。

「網路節點」(在網頁瀏覽器中運作的 torrent 節點)透過增加數百萬個新節點,並將 BitTorrent 推廣到數十個新的使用案例,使 BitTorrent 網路更加強大。WebTorrent 盡可能地遵循 BitTorrent 規範,以便現有的 BitTorrent 用戶端可以輕鬆地新增對 WebTorrent 的支援。

一些 torrent 應用程式,例如 Vuze,已經支援網路節點,但我們不想等待其他應用程式新增支援。所以基本上,WebTorrent Desktop 是我們加速採用 WebTorrent 協定的方式。 透過製作一個人們真正想使用的超棒 torrent 應用程式,我們增加了網路中可以與網路節點(即網站上的使用者)共享 torrent 的節點數量。

除了人們已經知道他們可以做的事情之外,torrent 有哪些有趣的使用案例?

WebTorrent 最令人興奮的用途之一是點對點輔助傳遞。像 維基百科網際網路檔案館 這樣的非營利專案可以透過讓訪客貢獻來降低頻寬和託管成本。熱門內容可以透過瀏覽器對瀏覽器的方式快速且廉價地提供。很少被存取的內容可以從原始伺服器透過 HTTP 可靠地提供。

網際網路檔案館實際上已經更新了他們的 torrent 檔案,使其可以很好地與 WebTorrent 配合使用。因此,如果你想在你的網站上嵌入網際網路檔案館的內容,你可以使用一種可以降低檔案館託管成本的方式,讓他們可以將更多資金投入到實際的網路檔案館中!

從 CDN 到透過 P2P 傳遞應用程式,還有令人興奮的商業使用案例。

你們最喜歡使用 WebTorrent 的專案有哪些?

gaia app screenshot

用 WebTorrent 打造的最酷的東西,絕對是 Gaia 3D 星圖。這是一個光滑的銀河系 3D 互動模擬。資料直接從你瀏覽器中的 torrent 載入。飛過我們的星系並意識到與浩瀚的宇宙相比,我們人類是多麼的渺小,這真是令人敬畏。

你可以在 Torrenting The Galaxy 中閱讀有關如何製作這個星圖的資訊,這是一篇部落格文章,作者 Charlie Hoey 在文章中解釋了他是如何使用 WebGL 和 WebTorrent 建構這個星圖的。

brave logo

我們也是 Brave 的忠實粉絲。Brave 是一個自動封鎖廣告和追蹤器的瀏覽器,可以使網路更快更安全。Brave 最近新增了 torrent 支援,因此你可以無需使用單獨的應用程式即可檢視傳統的 torrent。該功能由 WebTorrent 提供支援。

因此,就像大多數瀏覽器可以呈現 PDF 檔案一樣,Brave 可以呈現磁力連結和 torrent 檔案。它們只是瀏覽器原生支援的另一種類型的內容。

Brave 的共同創辦人之一實際上是 Brendan Eich,也就是 JavaScript 的創造者,我們用這種語言編寫了 WebTorrent,因此我們認為 Brave 選擇整合 WebTorrent 非常酷。

你們為什麼選擇在 Electron 上建構 WebTorrent Desktop?

WebTorrent Desktop main window

有一種迷因說 Electron 應用程式「臃腫」,因為它們在每個應用程式中都包含了整個 Chrome 內容模組。在某些情況下,這部分是事實(Electron 應用程式安裝程式通常約為 40MB,而特定於作業系統的應用程式安裝程式通常約為 20MB)。

然而,就 WebTorrent Desktop 而言,我們在正常操作過程中幾乎使用了每一個 Electron 功能,以及許多 Chrome 功能。如果我們想為每個平台從頭開始實作這些功能,則建構我們的應用程式將需要數月或數年的時間,或者我們只能發布單一平台。

為了讓你了解,我們使用了 Electron 的 停靠區整合(顯示下載進度)、選單列整合(在背景執行)、協定處理常式註冊(開啟磁力連結)、省電模式阻斷器(在影片播放期間防止進入睡眠模式)和 自動更新器。至於 Chrome 功能,我們使用了許多:<video> 標籤(播放許多不同的影片格式)、<track> 標籤(支援隱藏式字幕)、拖放支援和 WebRTC(在原生應用程式中使用並不容易)。

更不用說:我們的 torrent 引擎是用 JavaScript 編寫的,並假定存在許多 Node API,特別是 require('net')require('dgram'),以支援 TCP 和 UDP socket。

基本上,Electron 正是我們所需要的,它具有我們在創紀錄的時間內發布一個穩固、完善的應用程式所需的確切功能集。

你們最喜歡 Electron 的哪些方面?

WebTorrent 程式庫作為一個開源的副專案已經開發了兩年。我們在四週內製作了 WebTorrent Desktop。 Electron 是我們能夠如此快速地建構和發布應用程式的主要原因。

正如 Node.js 使伺服器程式設計對於使用 jQuery 的前端程式設計師來說變得容易,Electron 使熟悉 Web 或 Node.js 開發的任何人都可以進行原生應用程式開發。Electron 非常具有賦能作用。

網站和桌面用戶端是否共享程式碼?

是的,webtorrent npm 套件可以在 Node.js、瀏覽器和 Electron 中運作。完全相同的程式碼可以在所有環境中執行 - 這就是 JavaScript 的美妙之處。它是當今通用的執行時間。Java Applets 承諾「編寫一次,隨處運行」的應用程式,但由於許多原因,這個願景從未真正實現。Electron 比任何其他平台都更接近這個理想。

在建構 WebTorrent 時,你們遇到哪些挑戰?

在應用程式的早期版本中,我們很難使 UI 具有效能。我們將 torrent 引擎放在繪製主應用程式視窗的同一個渲染程序中,可以預見的是,每當 torrent 引擎產生劇烈的 CPU 活動(例如驗證從節點接收到的 torrent 片段)時,都會導致速度變慢。

我們透過將 torrent 引擎移至第二個不可見的渲染器進程來解決這個問題,並透過 IPC 與之通訊。這樣一來,即使該進程短暫使用了大量的 CPU,UI 線程也不會受到影響。流暢的滾動和動畫效果令人非常滿意。

注意:我們必須將 torrent 引擎放在渲染器進程中,而不是「主」進程中,因為我們需要存取 WebRTC(這僅在渲染器中可用)。

Electron 應該在哪些方面改進?

我們希望看到關於如何建構和發布生產就緒應用程式的更完善文件,尤其是在程式碼簽署和自動更新等棘手主題方面。我們必須深入研究原始碼並在 Twitter 上詢問,才能瞭解最佳實踐!

WebTorrent Desktop 完成了嗎?如果沒有,接下來會有哪些進展?

我們認為目前版本的 WebTorrent Desktop 非常出色,但總有進步的空間。我們目前正在努力改進潤飾度、效能、字幕支援和影片編碼支援。

如果您有興趣參與這個專案,請查看我們的 GitHub 頁面

是否有任何 Electron 開發技巧可能對其他開發人員有用?

WebTorrent Desktop 的貢獻者之一 Feross 最近在 NodeConf Argentina 發表了一場名為「真實世界的 Electron:使用 JavaScript 建構跨平台桌面應用程式」的演講,其中包含發布完善的 Electron 應用程式的實用技巧。如果您正處於擁有基本可運作應用程式,並嘗試將其提升到更高的潤飾度和專業水準的階段,那麼這個演講會特別有用。

在此觀看:

投影片在此:

另一位 WebTorrent 貢獻者 DC 撰寫了一份您可以採取的行動清單,讓您的應用程式感覺更完善且原生。它附帶程式碼範例,涵蓋了諸如 macOS dock 整合、拖放、桌面通知,以及確保您的應用程式快速載入等項目。

本周專案:Voltra

·6 分鐘閱讀

本週我們與 Aprile ElcichPaolo Fragomeni 會面,討論了 Voltra,一款基於 Electron 的音樂播放器。


什麼是 Voltra?

Voltra 是一款為想要擁有自己音樂的人而設計的音樂播放器。它也是一個商店,您可以在其中根據您已擁有的音樂來發現和購買新音樂。它是無廣告的,跨平台,適用於桌機和手機。它也不會監視您。

voltra-artistview

Voltra 的目標使用者是誰?

任何聽音樂的人。

是什麼動機促使你們創建 Voltra?

廣播電台一直佔有很大的聽眾群。它正從無線電波轉移到網際網路。現在您可以隨選租用音樂——這是廣播電台的復興!由於這一點,出現了許多新產品和服務,但串流廣播仍然讓其他人控制您的音樂和您體驗它的方式。

我們想要一個完全專注於您所擁有的音樂的產品。它可以讓您輕鬆地直接從藝術家或唱片公司發現和購買新音樂。

有免費版本嗎?

桌機播放器是完全免費的。銷售您的音樂也是免費的!我們不支援廣告。

由於該應用程式是免費的,我們可能會在稍後開源它。目前我們沒有頻寬來管理它。我們對功能以及我們想要發展的方向也有非常具體的想法。我們有一個活躍的測試版社群,我們非常重視他們的意見回饋。

你們如何賺錢?

我們有高級功能!

我們的 Voltra 音頻檔案 是一項專為音樂設計的雲端備份服務。我們不會壓縮或共享資料區塊。您的音樂收藏會為您進行實體備份。

對於藝術家和唱片公司,我們的 Pro 會員資格 提供工具,可幫助他們接觸到更多相關受眾,例如分析和專業藝術家網頁。

Voltra 有何不同之處?

設計和易用性對我們來說非常重要。我們希望為聽眾提供無干擾的聆聽體驗!市面上有一些有趣的音樂播放器和商店。但是它們中的許多都比它們的創造者意識到的更先進且更難以使用。我們希望盡可能讓更多人可以使用 Voltra。

我們也不會從藝術家或唱片公司那裡抽取分成。這對我們來說是一個關鍵的區別。這非常重要,因為它可以降低藝術家將其音樂推向市場的門檻。

你們做出了哪些設計和技術決策?

在設計 Voltra 時,我們考慮了來自原生應用程式和網路的 UI 慣例,我們也仔細思考了我們可以移除哪些東西。我們有一個活躍的私人測試版小組,他們在過去幾個月中為我們提供了重要的意見回饋。

我們發現專輯封面和攝影對人們來說非常重要。許多播放器只是一些檔案清單。擁有實體專輯的一件很酷的事情是專輯封面,我們希望在 Voltra 桌面應用程式中強調這一點。

voltra-albumview

我們也確保不干擾人們的檔案。我們使用檔案監看,因此您可以將檔案放在您想要的任何位置,而且我們不會為您重新命名或移動它們。我們有一個嵌入式資料庫來追蹤監看目錄的狀態,以便我們可以追蹤哪些是新的,即使該進程沒有執行時也是如此。

在建構 Voltra 的過程中,你們面臨了哪些挑戰?

我們花費大量時間專注於效能。我們從框架開始,但改為使用純 JavaScript。根據我們的經驗,它們提供的通用抽象概念超過了它們引入的效能損失和形式。

目前我們能夠很好地處理非常大的集合。大型集合意味著可能會有數以萬計的圖像!由於 Node.js 的檔案系統模組可以直接從渲染器進程中使用,因此可以根據 DOM 事件非常快速地延遲載入和卸載大量圖像。

一般來說,setImmediaterequestIdleCallback 一直是用於在保持 UI 響應的同時執行大量處理的重要工具。更具體地說,將 CPU 密集型任務分配到不同的進程中確實有助於保持使用者介面的響應性。例如,我們將實際的音訊上下文移動到一個單獨的進程中,並透過 IPC 與之通訊,以避免忙碌的 UI 可能造成的干擾。

為什麼你們選擇在 Electron 上建構 Voltra?

瀏覽器的沙箱對於我們的應用程式來說太受限制了。但是我們也在開發一個網路播放器。因此,我們可以在這兩種實作之間共享幾乎 100% 的程式碼,這是一個巨大的勝利。

實際上,我們最初是使用 Swift 建構一個原生應用程式。我們發現的主要問題是我們重新發明了很多東西。網路擁有世界上最大的開源生態系統。因此,我們很快就切換到 Electron。

此外,最重要的是,使用 Electron,您可以開發一次,它應該可以在所有主要平台上「正常運作™」。雖然不能保證,但為每個平台以原生方式編碼的成本絕對超過了 Electron 引入的任何其他成本。

你們最喜歡 Electron 的哪些方面?

GTD!:將 Node.js 的網路堆疊和 Chromium 的呈現層打包在一起是完成工作的良方。

能力:它只是網路堆疊,因此實際上我們整個團隊都參與了產品的建構。

社群:有一個高度組織化的社群,他們知道如何很好地溝通!我們對於在這樣的支援下進行開發感到非常棒。

Electron 在哪些方面可以改進?

我們希望看到 Electron 認可單一的打包工具。打包工具對於 Electron 的重要性,如同套件管理器對於 Node 的重要性。在使用者領域中有多個打包工具,每個都有其有趣的功能,但也都有錯誤。社群的共識將有助於引導貢獻者投入的精力。

接下來有什麼?

我們目前正在開發一款行動應用程式,並與藝術家和唱片公司合作,將他們的音樂加入 Voltra 商店。嘿!如果您是藝術家或唱片公司,請立即註冊!我們計劃在達到 1000 萬首歌曲的目標時開設商店。

本周專案:WordPress Desktop

·4 分鐘閱讀

本週我們採訪了 Automattic 的朋友們,討論了 WordPress Desktop,這是一款用於管理 WordPress 內容的開源桌面用戶端。


WordPress Apps

大家都知道 WordPress,但 WordPress Desktop 是什麼?

WordPress.com 桌面應用程式提供無縫的跨平台體驗,讓您可以專注於內容和設計,而不會有瀏覽器分頁干擾您,或者讓您的網站閒置但可存取。結合我們的瀏覽器支援和行動應用程式,您可以在任何地方,以任何有助於您完成工作的方式建立您的網站。

為什麼要建立用於管理 WordPress 網站的桌面應用程式?難道不能全部基於網頁嗎?

它實際上使用的是您在瀏覽器中訪問 WordPress.com 時所獲得的完全相同的技術。但是,它都是本機託管的,因此載入時間最短。借助諸如停駐在您的停駐區、通知等原生功能的好處,您可以真正專注於您的 WordPress 網站和部落格。

為什麼您選擇在 Electron 上構建 WordPress Desktop?

在 2015 年底,我們以 Calypso 的形式重建了大部分的 WordPress.com,這是一個使用 React 的開源現代 JavaScript 應用程式。我們開始研究 Electron,並對 Calypso 進行了一些更改,使其能夠在本機執行。這是一個引人注目的體驗,我們認為進一步開發它有很大的價值。

我們有幾個團隊在開發 Calypso。要使用傳統的桌面技術來製作一個完全符合此標準的多平台 GUI 用戶端,需要更多的工作。通過使用 Electron,一個 2-4 人組成的小團隊能夠利用其他團隊的努力,在幾個月內構建桌面應用程式。

在構建 WordPress Desktop 時,您面臨哪些挑戰?

我們非常快速地讓應用程式的初始版本運行起來,但是調整它以使其作為桌面應用程式的最佳方式運行,需要花費更多時間。該應用程式的一個大挑戰是,您實際上是在自己的電腦上運行 Calypso 的副本 - 它純粹是一個 API 驅動的 UI。其中涉及大量的橋接工作,並且更改被回饋到 Calypso 本身。

此外,我們還花費了大量的精力來為不同的平台打包應用程式 - 我們提供了 Windows、macOS 和 Linux 版本 - 這些平台的差異足以使其變得棘手。

當時 Electron 相對較新,我們不斷遇到一些很快就修復的問題(有時是在同一天!)

Electron 應該在哪些方面改進?

Electron 已經提供了我們桌面應用程式所需的大部分功能,而且自從我們開始使用它以來,它進展迅速。也就是說,在桌面應用程式中,有些領域被認為是理所當然的,例如拼寫檢查和尋找/取代,使用 Electron 按原樣複製這些功能更困難。

我們也希望看到一些較新的 Chrome 技術也能過濾到 Electron 中。我們特別熱衷於嘗試 WebVR。

你們最喜歡 Electron 的哪些方面?

我們選擇 Electron 的主要原因,也是它最大的優勢,是社群非常活躍和開放。Automattic 一直相信開源。這是我們的核心原則之一,而 Electron 專案和社群遵循非常開放和積極的許多核心信念。

WordPress Desktop 的下一步是什麼?

我們模型的偉大之處在於,桌面應用程式受益於任何新的 Calypso 功能 - 有持續不斷的改進。我們希望可以向應用程式添加其他功能,例如離線支援,這將真正使應用程式進入原生領域,並改進系統通知。

Automattic 是否有任何團隊在開發其他 Electron 應用程式?

是的,在我們為桌面應用程式付出努力之後,Simplenote 團隊決定使用 Electron 為 Windows 和 Linux 建立桌面應用程式(已經存在原生 Mac 用戶端)。Simplenote Electron 應用程式也是開源的,並且可在 Github 上取得。

我們還將推出一個使用 Electron 的 Raspberry Pi 整合。

如果這些聽起來很吸引人,那麼我們很樂意收到您的來信

是否有任何 Electron 技巧可能對其他開發人員有用?

發布簽名的桌面軟體對我們來說相對較新,尤其是對於 Windows。我們撰寫了一篇關於程式碼簽署 Windows 應用程式的文章,其中包含該過程以及我們為正確完成它所經歷的一些障礙。

本周專案:Dat

·7 分鐘閱讀

本週的特色專案是 Dat,這是一個獲得資助的開源分散式工具,用於分發數據集。Dat 由一個地理分佈的團隊建立和維護,他們中的許多人協助撰寫了這篇文章。


A screenshot of the main view of dat-desktop, showing a few rows of shared
dats

首先,Dat 是什麼?

我們希望將對等和分散式系統的最佳部分帶到資料分享中。我們從科學資料分享開始,然後開始擴展到研究機構、政府、公共服務和開源團隊。

另一種思考方式是,它是一個類似 Dropbox 或 BitTorrent Sync 的同步和上傳應用程式,只是 Dat 是開源的。我們的目標是成為一個功能強大、開源、非營利的資料共享軟體,適用於大型、小型、中型、小批量和大批量資料。

要使用 dat CLI 工具,您只需輸入

dat share path/to/my/folder

而且 dat 將建立一個連結,您可以使用該連結將該資料夾傳送給其他人 - 沒有中央伺服器或第三方可以存取您的資料。與 BitTorrent 不同,也不可能嗅探出誰在共享什麼(詳情請參閱 Dat 文件草案)。

現在我們知道 Dat 是什麼了。Dat Desktop 如何融入?

Dat Desktop 是一種讓無法或不想使用命令列的人們也能存取 Dat 的方式。您可以在電腦上託管多個 dat,並透過網路提供資料服務。

您能分享一些酷炫的用例嗎?

DataRefuge + Svalbard 專案

我們正在開發一個代號為 Svalbard 專案的項目,該項目與 DataRefuge 相關,DataRefuge 是一個致力於備份可能消失的政府氣候資料的團體。Svalbard 以北極的 Svalbard 全球種子庫命名,該種子庫擁有一個大型的地下植物 DNA 備份庫。我們的版本是一個大型的公共科學資料集版本控制集合。一旦我們了解並可以信任元數據,我們就可以構建其他很酷的專案,例如分散式志願者資料儲存網路

加州公民資料聯盟

CACivicData 是一個開放原始碼的檔案庫,提供來自 CAL-ACCESS(加州追蹤政治獻金的資料庫)的每日下載。他們會每日發布,這意味著他們的壓縮檔中會存放許多重複的資料。我們正在努力將他們的資料託管為 Dat 儲存庫,這將減少參考特定版本或更新至較新版本所需的麻煩和頻寬。

Electron 更新

這個想法目前還不具體,但我們認為一個有趣的用例是將編譯好的 Electron 應用程式放入 Dat 儲存庫中,然後在 Electron 中使用 Dat 客戶端來提取已建置應用程式二進位檔的最新增量,這樣可以節省下載時間,同時也可以降低伺服器的頻寬成本。

誰應該使用 Dat Desktop?

任何想要透過 p2p 網路分享和更新資料的人。資料科學家、開放資料駭客、研究人員、開發人員。如果有人想到我們還沒想到的酷炫用例,我們非常樂意收到回饋。您可以加入我們的 Gitter 聊天室,隨時向我們提問!

Dat 和 Dat Desktop 的下一步是什麼?

使用者帳戶和元資料發布。我們正在開發一個 Dat 註冊網路應用程式,將部署在 datproject.org 上,基本上它會是一個「資料集的 NPM」,但需要注意的是,我們只會是一個元資料目錄,而資料可以存放在網路上的任何地方(這與 NPM 或 GitHub 不同,後者所有資料都集中託管,因為原始碼夠小,可以全部放進一個系統)。由於許多資料集都非常龐大,因此我們需要一個聯合註冊表(類似於 BitTorrent 追蹤器的工作方式)。我們希望讓使用者可以輕鬆地從 Dat Desktop 中透過註冊表尋找或發布資料集,以使資料分享過程更加順暢。

另一個功能是多寫入器/協作資料夾。我們有很大的計畫要實現協作工作流程,也許會像 git 一樣有分支,但它是專為資料集協作而設計的。但我們目前仍在努力提高整體穩定性並標準化我們的協定!

為什麼選擇在 Electron 上建置 Dat Desktop?

Dat 是使用 Node.js 建置的,因此它很自然地適合我們的整合。除此之外,我們的使用者使用各種不同的機器,因為科學家、研究人員和政府官員可能會被迫為其機構使用特定的設定——這意味著我們需要能夠針對 Windows 和 Linux 以及 Mac。Dat Desktop 可以讓我們輕鬆實現這一點。

在建置 Dat 和 Dat Desktop 時,您遇到哪些挑戰?

弄清楚人們想要什麼。我們從表格資料集開始,但我們意識到這是一個有點複雜的問題,而且大多數人都不使用資料庫。因此,在專案進行到一半時,我們從頭開始重新設計所有內容,改用檔案系統,並且沒有回頭。

我們也遇到了一些常見的 Electron 基礎架構問題,包括

  • 遙測 - 如何擷取匿名使用統計資料
  • 更新 - 設定自動更新有點零碎和神奇
  • 發布 - XCode 簽署、在 Travis 上建置版本、執行 Beta 版本,所有這些都是挑戰。

我們還在 Dat Desktop 的「前端」程式碼中使用 Browserify 和一些很酷的 Browserify Transforms(這有點奇怪,因為即使我們有原生 require,我們仍然會打包——但這是因為我們想要 Transforms)。為了更好地管理我們的 CSS,我們從 Sass 切換到使用 sheetify。它極大地幫助我們模組化 CSS,並且更容易將我們的 UI 移至具有共享相依性的元件導向架構。例如,dat-colors 包含我們所有的顏色,並在我們所有專案之間共享。

我們一直都是標準和最小抽象化的忠實擁護者。我們整個介面都是使用一般的 DOM 節點以及幾個輔助程式庫建置的。我們已經開始將其中一些元件移至 base-elements,這是一個低階可重複使用元件的程式庫。與我們的大多數技術一樣,我們會不斷迭代它,直到我們做對為止,但作為一個團隊,我們覺得我們正朝著正確的方向前進。

Electron 應該在哪些方面改進?

我們認為最大的痛點是原生模組。必須使用 npm 為 Electron 重建模組,這增加了工作流程的複雜性。我們的團隊開發了一個名為 prebuild 的模組,它可以處理預先建置的二進位檔,這個模組在 Node 中運作良好,但 Electron 工作流程仍然需要在安裝後執行自訂步驟,通常是 npm run rebuild。這很煩人。為了解決這個問題,我們最近切換到一種策略,將所有平台的編譯二進位版本全部捆綁在 npm tarball 中。這意味著 tarball 會變得更大(儘管可以使用 .so 檔案(共享程式庫)進行最佳化),但這種方法避免了執行安裝後腳本,並且完全避免了 npm run rebuild 模式。這表示 npm install 第一次執行時就會對 Electron 產生正確的效果。

你們最喜歡 Electron 的哪些方面?

API 似乎經過相當周全的考慮,相對穩定,並且在跟上游 Node 版本更新方面做得很好,我們沒有什麼其他要求了!

是否有任何 Electron 技巧可能對其他開發人員有用?

如果您使用原生模組,請試試看 prebuild

追蹤 Dat 開發進度的最佳方式是什麼?

在 Twitter 上關注 @dat_project,或訂閱我們的電子郵件新聞信

本周專案:Ghost

·閱讀時間 5 分鐘

本週我們與 Felix Rieseberg 聊天,他是 Slack 的桌面工程師,也是 Ghost Desktop 的維護者,這是一個用於 Ghost 發布平台的 Electron 客戶端。


Ghost Desktop Screenshot

什麼是 Ghost?

Ghost 是一個完全開放原始碼、可駭入的平台,用於建置和執行現代線上出版物。我們為 Zappos 到 Sky News 的部落格、雜誌和記者提供支援。

它與其他發布平台有何不同?

Ghost 成立於 2013 年 4 月,在一次非常成功的 Kickstarter 活動之後,旨在建立一個專注於專業發布的新平台。我們的使命是為世界各地的獨立記者和作家建立最佳的開放原始碼工具,並對線上媒體的未來產生真正的影響。它提供了更簡單、更集中的體驗:我們的編輯器專為提供最佳的寫作體驗而設計。

與一直以來的經典 WordPress 相比,它提供了更簡單、更精簡的體驗 - 它更容易設定和維護,開箱即用所有重要功能,並且速度明顯更快。與其他線上平台相比,Ghost 讓作家完全擁有和控制自己的內容,允許完全自訂,並使作者能夠圍繞自己的出版物建立業務。

Ghost 是一家營利公司嗎?

這對我們來說很重要:Ghost 是一個獨立的非營利組織。我們之所以建置現代新聞與部落格的發布工具,是因為我們認為言論自由很重要。我們的軟體以 免費開放原始碼授權發布,我們的商業模式是完全透明的,而且我們的法律結構意味著我們賺到的 100% 的資金都會再投資於使 Ghost 變得更好。

什麼是 Ghost Desktop?

Ghost Desktop 讓作家可以一次管理多個部落格,並且專注於寫作。瀏覽器中無法實現諸如常見的寫作捷徑之類的簡單事情,但在我們的桌面應用程式中可以使用。它允許其他應用程式透過深層連結直接與部落格通信。

什麼是 Ghost for Journalism?

今年,我們非常高興能將我們整個 10 人全職 Ghost 團隊投入到幫助三個獨立出版物成長,並為他們的努力投入 45,000 美元的資源。我們稱之為 Ghost for Journalism

我們一直以來都在建置 Ghost 作為網路上獨立出版商的下一個偉大平台,大約有三年半的時間了,現在我們已經達到了一個非常有趣的轉折點。我們開始這段旅程是為了建立一個簡單、設計良好的部落格平台,幾乎任何人都可以使用。這一直都會是第一步。

從長遠來看,我們希望 Ghost 成為世界最佳新聞報導的絕佳平台,這意味著我們需要建置一些功能來吸引這些人。今年,我們將非常自覺地決定專注於此。

為什麼選擇在 Electron 上建置 Ghost Desktop?

Ghost 在後端和前端都使用 JavaScript 和 Node.js,因此能夠利用相同的技術和技能使我們的團隊能夠更快地行動、建置更多,並最終提供更好的體驗。此外,能夠在應用程式的 macOS、Windows 和 Linux 版本之間共享 95% 以上的程式碼,讓我們可以專注於建置出色的核心使用者體驗,而無需為每個平台維護一個程式碼庫。

在建置 Ghost Desktop 時,您遇到哪些挑戰?

拼字檢查可能仍然是最難提供的服務之一 - 我們可以輕鬆地使用許多線上服務之一,但在保護使用者隱私和自主性的同時,正確地檢查多種語言的文字拼字並非易事。

Electron 應該在哪些方面改進?

我們很希望看到 Electron 能將作業系統原生的拼字檢查功能帶入他們的應用程式中。我們夢想著一個 <input> 欄位能擁有如同 NSTextView 一樣的服務的世界,但我們也深知這有多麼困難。

你們最喜歡 Electron 的哪些方面?

JavaScript 以其龐大的生態系統聞名,其中包含無數的工具和框架 - 但它帶給我們的便利性怎麼強調都不為過。使用 Electron 建構應用程式只比建構網頁應用程式稍微困難一點,這真是一項了不起的成就。

Ghost 完工了嗎?如果還沒,接下來會有什麼?

Ghost Desktop 也是一個正在進行中的專案 - 我們距離完成還很遠。我們已經討論了一段時間,要為我們的使用者帶來完整的離線模式,而且我們正相當接近目標。其他值得注意的工作領域包括與其他文字編輯應用程式(如 Word 或 Atom)的擴充功能和整合,最終讓使用者能夠使用他們最喜愛的工具撰寫文章。總體而言,一旦我們發佈了離線模式功能,我們將尋求與作業系統更深入的整合。如果您對此感興趣,加入我們

您最喜歡哪些 Electron 應用程式?

我是 KapFelonyVisual Studio Code 的忠實粉絲。

👻

本周專案:Beaker Browser

·4 分鐘閱讀

本週我們採訪了 Paul FrazeeBeaker Browser 的創作者。Beaker 是一款實驗性的點對點網路瀏覽器,它使用 Dat 協議從使用者的裝置託管網站。


什麼是 Beaker?你為什麼要創建它?

Beaker 是一款參與式的瀏覽器。它是一款為獨立駭客打造的瀏覽器。

網路是封閉原始碼的。如果你想影響社群媒體的運作方式,你必須在 Facebook 或 Twitter 工作。對於搜尋,則是 Google。控制權掌握在公司手中,而不是使用者自己手中。

透過 Beaker,我們有了一個新的網路協議:去中心化檔案傳輸。「Dat」。它可以免費按需建立網站,然後從裝置分享它們。無需伺服器。這是我們的創新之處。

Beakers Protocols

當你在 Beaker 中瀏覽 Dat 網站時,你會下載檔案。這個網站永遠屬於你。你可以儲存它、複製它、修改它,並免費分享你的新版本。這一切都是開源的。

這就是它的目的:我們正在為開源網站打造一款瀏覽器。我們希望它成為一個用於社群駭客的工具包。

誰應該使用 Beaker?

駭客。模組化程式設計師。創意人士。喜歡修補東西的人。

我該如何建立一個使用 Dat 的新專案?

我們有一個名為 bkr 的命令列工具,它有點像 git + npm。這是建立網站的方法

$ cd ~/my-site
$ bkr init
$ echo "Hello, world!" > index.html
$ bkr publish

這是複製網站的方法

$ bkr fork dat://0ff7d4c7644d0aa19914247dc5dbf502d6a02ea89a5145e7b178d57db00504cd/ ~/my-fork
$ cd ~/my-fork
$ echo "My fork has no regard for the previous index.html!" > index.html
$ bkr publish

這些網站接著會從你的瀏覽器託管。這有點像 BitTorrent;你在 P2P 網格中分享網站。

如果你想要一個 GUI,我們在瀏覽器中內建了一些基本工具,但我們正在將這些工具推向使用者層級。這一切都將是可以修改的使用者應用程式。

你為什麼選擇在 Electron 上建構 Beaker?

對於這個專案來說,這很明顯。如果我自己複製 Chrome,我現在就會在寫 C++!沒有人想這樣做。我熟悉網路堆疊,而且我可以用它快速工作。這是不費吹灰之力的選擇。

事實是,我不確定沒有 Electron 我是否能做到這一切。它是一個很棒的軟體。

你在建構 Beaker 時遇到哪些挑戰?

一半的時間是在擺弄工具,弄清楚我能做到什麼程度。

製作瀏覽器本身相當容易。Electron 幾乎是一個用於製作瀏覽器的工具包。...除了瀏覽器分頁;我花了很長的時間才把它弄對。我最後還是屈服並學習如何使用 SVG。它看起來好多了,但我花了 3 或 4 次迭代才把它弄對。

Electron 應該在哪些方面改進?

如果我能將開發人員工具停靠在網頁檢視中,那就太棒了。

Beaker 接下來會有什麼?

Dat 網站的安全 DNS 名稱。一個可社群設定的 URL 方案,稱為「應用程式方案」。更多的 Dat API。

對於可能有興趣為該專案做出貢獻的人,Beaker 需要哪些方面的幫助?

我們有很多未解決的問題。別害怕 ping 我。在 freenode 上使用 #beakerbrowser。我們保留一個貢獻者頁面,我們會把你加入其中。如果你來奧斯丁,我會請你喝啤酒。

是否有任何 Electron 技巧可能對其他開發人員有用?

  1. 使用現有的建置工具。相信我,你不會想和你自己的解決方案搏鬥。使用 electron-builder。使用樣板儲存庫。
  2. 如果你需要在 Electron 儲存庫中開啟一個問題,請多走一步,使其容易重現。你會更快得到回應,而且團隊會很感激。更好的是,嘗試自己解決它。看看內部結構其實蠻有趣的。
  3. 至少讀完所有指南和進階文件一次。
  4. 不要建構瀏覽器,它是一個飽和的市場。

本周專案:Kap

·7 分鐘閱讀

Electron 社群正在快速成長,人們正以驚人的速度創造強大的新應用程式和工具。為了慶祝這種創造性的動力,並讓社群了解一些這些新專案,我們決定開始一個每週的部落格系列,介紹值得注意的與 Electron 相關的專案。


這篇文章是本系列的第一篇,介紹了由 Wulkano 所建構的開源螢幕錄影應用程式 Kap,Wulkano 是一個地理分散的自由設計師和開發人員團隊。

Kap Screencast

什麼是 Kap?

Kap 是一個開源螢幕錄影工具,主要為設計師和開發人員輕鬆捕捉他們的工作而建構。人們用它來分享動畫原型、記錄錯誤、建立愚蠢的 GIF 以及介於兩者之間的一切。

我們看到各個年齡層和背景的人在教育環境、螢幕錄影、教學中...使用它,不勝枚舉。甚至用來創建生產資產!我們對於我們這個小小的副專案受到如此好評感到非常驚訝。

你為什麼要建構它?

這是一個很好的問題,好像螢幕錄影工具不夠多似的!我們覺得替代方案不是太複雜、太昂貴就是太有限。沒有任何東西感覺剛剛好能滿足我們的日常需求。我們也認為,當我們用來工作的工具是開源的時候,這很棒,這樣每個人都可以幫助塑造它們。 建構 Kap 的最終成果也和我們沒做的事情一樣多。一切都在細節中,透過累積小的改進,成為我們想使用的工具的輪廓。

然而,也許最重要的是,Kap 已經成為我們放下煩惱,單純為了自己和像我們一樣的人建立一些東西的地方。創造一個你可以盡情發洩、嘗試新事物並享受你手藝的環境非常重要。沒有要求、沒有壓力、沒有期望。設計師和開發人員應該做副專案嗎?為什麼不呢?是的,他們應該。

你為什麼選擇在 Electron 上建構 Kap?

有很多原因

  • 網路技術
  • 大多數團隊成員都是網路開發人員
  • 我們投資於 JavaScript
  • 它為更多人打開了貢獻的大門
  • Electron 本身就是開源的
  • node_modules 的強大功能和易於維護的模組化
  • 跨平台可能性

我們認為應用程式的未來在瀏覽器中,但我們還沒有完全實現。Electron 是朝向那個未來邁出的重要一步。它不僅使應用程式本身更容易存取,也使建構它們的程式碼更容易存取。一個有趣的想法是想像一個作業系統是瀏覽器的未來,而分頁本質上是 Electron 應用程式。

此外,作為主要的網路開發人員,我們非常喜歡 JavaScript 的同構性質,因為你可以在客戶端、伺服器,現在還可以在桌面上執行 JS。使用網路技術(HTML、CSS 和 JS),許多事情比原生更簡單:更快的原型設計、更少的程式碼、flexbox > 自動版面配置 (macOS/iOS)。

在開發 Kap 時,你們遇到哪些挑戰?

最大的挑戰是使用 Electron 提供的資源來錄製螢幕。它們的效能根本無法滿足我們的需求,在我們看來會導致專案失敗。雖然這並非 Electron 本身的錯,但原生開發與使用網頁技術開發桌面應用程式之間仍然存在差距。

我們花了很多時間試圖解決 getUserMedia API 效能不佳的問題,這個問題源於 Chromium。我們在開發 Kap 時的主要目標之一,是以網頁技術開發整個應用程式。在盡一切努力使其正常運作後(Retina 螢幕上最低要求為 30 FPS),我們最終不得不尋找其他解決方案。

我在儲存庫中看到一些 Swift 程式碼。那是怎麼回事?

由於被迫尋找 getUserMedia 的替代方案,我們開始試驗 ffmpeg。除了是音訊和影片轉換的最佳工具之一外,它還具有在幾乎任何作業系統中錄製螢幕的功能,而且我們能夠錄製出符合我們在 Retina 螢幕上最低 30 FPS 要求的清晰影片。問題是?效能「😩」,CPU 使用率直線上升。所以我們回到了起點,討論了我們的選擇,並意識到我們必須做出妥協。這促成了 Aperture 的誕生,這是我們用 Swift 編寫的 macOS 專用螢幕錄製程式庫。

Electron 應該在哪些方面改進?

我們都知道 Electron 應用程式可能會大量使用 RAM,但這實際上是 Chromium 的問題。這是它的運作方式之一,而且實際上取決於你正在執行的內容,例如 Kap 和 Hyper 通常使用少於 100MB 的記憶體。

我們認為最大的改進領域之一是有效負載,尤其是 Electron 如何分發 Chromium。一個想法是使用共用的 Electron 核心,並讓應用程式安裝程式檢查系統上是否已存在。

建立跨平台的 Electron 應用程式可能會帶來更好的體驗。目前,平台之間存在太多不一致之處、特定平台的 API 和缺少的功能,導致你的程式碼充斥著 if-else 陳述式。例如,生動效果僅在 macOS 上支援,自動更新程式在 macOS 和 Windows 上的運作方式不同,甚至在 Linux 上不受支援。透明度在 Linux 上時好時壞,通常是壞的。

呼叫原生系統 API 也應該更容易。Electron 提供了一套非常好的 API,但有時你需要它沒有提供的功能。建立原生 Node.js 附加元件是一個選項,但使用起來很痛苦。理想情況下,Electron 會附帶一個良好的 FFI API,例如 fastcall。這會使我們能夠改用 JavaScript 撰寫 Swift 部分。

你們最喜歡 Electron 的哪些方面?

我們最喜歡的一點是,任何具有網頁開發知識的人都可以建構和貢獻多平台原生體驗。更不用說在它上面開發的輕鬆愉快、優秀的文件和蓬勃發展的生態系統。

從前端的角度來看,開發 Kap 的感覺與使用瀏覽器 API 建構一個簡單的網站沒有區別。Electron 在使應用程式開發與網頁開發類似(基本上相同)方面做得非常出色。實際上它非常簡單,不需要任何框架或類似的東西來幫助我們,只需乾淨且模組化的 JS 和 CSS 即可。

我們也非常欣賞開發它的團隊、他們的奉獻精神和支援,以及他們維護的活躍且友好的社群。向你們所有人致以擁抱!

Kap 的下一步是什麼?

我們的下一步是檢閱應用程式,為我們的 2.0.0 里程碑做準備,其中包括 React 重寫,以及對外掛程式的支援,允許開發人員擴展 Kap 的功能!我們邀請大家追蹤專案並在我們的 GitHub 儲存庫上做出貢獻。我們正在傾聽,並希望收到盡可能多的人的回饋,請告訴我們如何使 Kap 成為對你來說最好的工具

Wulkano 是什麼?

Wulkano 是一個設計工作室和數位社群,一個由遠端技術人員組成的團隊,他們喜歡一起處理客戶專案和我們自己的專案。我們是一群來自不同地方和背景、緊密聯繫的團隊,在我們的虛擬辦公室(恰好是基於 Electron 的 Slack)中分享知識、想法、經驗,但最重要的是有趣的 GIF 和迷因。

是否有任何 Electron 技巧可能對其他開發人員有用?

善用並參與精彩的 社群,查看 Awesome Electron,查看 範例,並充分利用出色的 文件

2016 年 8 月:新應用程式

·3 分鐘閱讀

以下是 8 月份新增至網站的新 Electron 應用程式。


該網站會透過社群的 提取請求更新新的 應用程式聚會。你可以監看儲存庫以取得新項目的通知,或者如果你對網站的所有變更不感興趣,請訂閱部落格 RSS 摘要

如果你製作了 Electron 應用程式或舉辦了聚會,請提出提取請求將其新增至網站,它就會出現在下一輪彙整中。

新應用程式

Code RPGifyRPG 風格程式碼應用程式
PamFax用於傳送和接收傳真的跨平台應用程式
BlankUp具有清晰度 +1 的 Markdown 編輯器
Rambox免費且開放原始碼的訊息和電子郵件應用程式,將常見的網頁應用程式組合在一起
Gordie適合你的卡片收藏的最佳應用程式
Ionic Creator更快地建構令人驚豔的行動應用程式
TwitchAlerts用漂亮的警示和通知讓你的觀眾開心
Museeks簡單、乾淨且跨平台的音樂播放器
SeaPig從 Markdown 到 HTML 的轉換器
GroupMe非官方 GroupMe 應用程式
Moeditor你的多用途 Markdown 編輯器
SoundnodeSoundnode 應用程式是桌面的 Soundcloud
QMUI WebQMUI Web Desktop 是一個用於管理基於 QMUI Web Framework 的專案的應用程式
Svgsus組織、清理和轉換你的 SVG
Ramme非官方 Instagram 桌面應用程式
InsomniaREST API 用戶端
Correo適用於 Windows、macOS 和 Linux 的選單列/工作列 Gmail 應用程式
KongDashKong 管理 API 的桌面用戶端
Translation Editor適用於 INTL ICU 訊息的翻譯檔案編輯器(請參閱 formatjsio)
5EClient5EPlay CSGO 用戶端
Theme Juice輕鬆進行本機 WordPress 開發