跳到主要內容

11 篇標籤為 "Showcase" 的文章

重點介紹精選的 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 進入點支援。)
  • Maker 現在並行執行 在 Electron Forge 6 中,Maker 為了 ✨ 舊版 ✨ 原因而循序執行。從那時起,我們測試了 Make 步驟的並行化,沒有任何不利的副作用,因此當為同一平台建置多個目標時,您應該會看到速度提升!
感謝!

🙇 非常感謝 mahnunchik 為 Forge 配置中的 GCS 發布者和 ESM 支援做出貢獻!

更好的靜態儲存自動更新

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

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

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

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

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

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

一旦您的 Maker 和發布者配置為將更新資訊清單上傳到雲端檔案儲存空間,您只需幾行配置即可啟用自動更新

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 將繼續在其所有 monorepo 套件下在 @electron-forge/ 命名空間下發布。
尋求星星

⭐ 在此過程中,我們也不小心將 electron/packager 儲存庫設為私人,這產生了不幸的副作用,即抹去了我們的 GitHub 星星計數(在抹除之前超過 9000 顆)。如果您是 Packager 的活躍使用者,我們將感謝您的 ⭐ 星星 ⭐!

@electron/windows-sign 介紹

從 2023-06-01 開始,行業標準開始要求 Windows 程式碼簽章憑證的金鑰儲存在符合 FIPS 標準的硬體上。

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

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

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

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

下一步是什麼?

我們將在下個月進入我們的年度十二月靜默期。在此期間,我們將思考如何在 2024 年讓 Electron 開發體驗變得更好。

您希望我們接下來處理什麼?請告訴我們!

本週專案:Jasper

·5 分鐘閱讀時間

本週我們採訪了 Jasper 的創作者,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.1附加到 cat/jump 中的 v1.0.0v1.0.1 的問題
repo:cat/jump label:bug label:blocker附加了 cat/jump 中的 bugblocker 的問題
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 的 Notifications API。但是,我注意到它不支援某些使用案例。在那之後,我考慮除了 Notification API 之外,還使用 Issues APIPull Requests API。但它從未成為我想要的樣子。然後,在思考各種方法時,我意識到輪詢 GitHub 的 Search API 將提供最大的彈性。我花了約一個月的實驗才達到這個目標,然後我在兩天內使用串流概念實作了 Jasper 的原型。

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

下一步是什麼?

我計劃開發以下功能

  • 篩選串流:串流具有一些篩選串流,用於篩選串流中的問題。它就像 SQL 的視圖一樣。
  • 多個帳戶:您將能夠同時使用 github.com 和 GHE
  • 提升效能:目前在 WebView 中載入問題的速度比一般瀏覽器慢。

在 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 用戶端和數百萬個網頁瀏覽器組成的巨型 P2P 網路。

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

Vuze 這樣的一些 torrent 應用程式已經支援網頁對等點,但我們不想等待其他人新增支援。因此基本上,WebTorrent Desktop 是我們加速採用 WebTorrent 協定的方式。 透過製作一個人們真正想使用的出色 torrent 應用程式,我們增加了網路中可以與網頁對等點(即網站上的使用者)共用 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 的共同創辦人之一實際上是 JavaScript 的建立者 Brendan Eich,我們在其中編寫了 WebTorrent,因此我們認為 Brave 選擇整合 WebTorrent 非常酷。

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

WebTorrent Desktop main window

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

但是,在 WebTorrent Desktop 的情況下,我們幾乎使用了每個 Electron 功能,以及正常運作過程中的數十個 Chrome 功能。如果我們想為每個平台從頭開始實作這些功能,則需要花費數月或數年的時間才能建置我們的應用程式,或者我們只能針對單一平台發布。

簡單來說,我們使用了 Electron 的 dock 整合 (顯示下載進度)、選單列整合 (在背景執行)、協定處理常式註冊 (開啟 magnet 連結)、省電阻止器 (防止影片播放期間休眠),以及 自動更新器。至於 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 活動時 (例如驗證從 peer 收到的 torrent 片段),就會導致速度變慢。

我們透過將 torrent 引擎移至第二個、隱形的渲染器程序來修正這個問題,我們透過 IPC 與之通訊。這樣一來,如果該程序短暫地使用了大量 CPU,UI 執行緒將不受影響。如奶油般滑順的滾動和動畫非常令人滿意。

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

Electron 應在哪些方面改進?

我們希望看到的一件事是關於如何建構和發布可供生產環境使用的應用程式的更完善文件,尤其是在程式碼簽署和自動更新等棘手主題方面。我們必須透過深入研究原始碼並在 Twitter 上詢問來了解最佳實務!

WebTorrent Desktop 完成了嗎?如果沒有,接下來會推出什麼?

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

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

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

WebTorrent Desktop 貢獻者之一 Feross 最近在 NodeConf Argentina 上發表了一場演講,名為「Real world Electron: Building Cross-platform desktop apps with JavaScript」,其中包含發布完善的 Electron 應用程式的實用技巧。如果您正處於擁有基本可運作應用程式的階段,並且正試圖將其提升到更高的完善度和專業水準,那麼這次演講特別有用。

在此觀看:

投影片在此:

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

本週專案:Voltra

·6 分鐘閱讀

本週我們與 Aprile ElcichPaolo Fragomeni 會面,討論由 Electron 驅動的音樂播放器 Voltra。


Voltra 是什麼?

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

voltra-artistview

Voltra 適合哪些人?

任何聽音樂的人。

是什麼動機促使您創建 Voltra?

廣播電台一直以來都佔有很大的聽眾份額。它正從無線電波轉移到網際網路。現在您可以隨選租借音樂 — 這是一場廣播復興!許多新產品和服務因此應運而生,但串流廣播仍然讓其他人控制您的音樂以及您體驗音樂的方式。

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

有免費版本嗎?

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

由於應用程式是免費的,我們稍後可能會將其開源。目前我們沒有頻寬來管理它。我們對功能以及我們想要採取的方向也有非常明確的想法。我們有一個活躍的 beta 社群,我們認真看待我們的回饋。

您如何賺錢?

我們有付費功能!

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

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

是什麼讓 Voltra 與眾不同?

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

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

您做出哪些設計和技術決策?

在設計 Voltra 時,我們考慮了來自原生應用程式和網頁的 UI 慣例,我們也仔細思考了可以移除哪些內容。在過去的幾個月裡,我們有一個活躍的私人 beta 小組,他們給了我們重要的回饋。

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

voltra-albumview

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

在建構 Voltra 時,您遇到哪些挑戰?

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

我們目前可以很好地處理非常大的收藏。大型收藏可能意味著數以萬計的圖像!從渲染程序直接使用 Node.js 的檔案系統模組,可以非常輕鬆地根據 DOM 事件快速延遲載入和卸載大量圖像。

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

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

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

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

此外,最重要的是,使用 Electron,您只需開發一次,它就應該在所有主要平台上 Just Work™。這不是保證,但為每個平台進行原生編碼的成本絕對超過了 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 時所獲得的相同技術。但是,它都是在本機託管的,因此載入時間最短。憑藉停駐在您的 dock、通知等原生功能的優勢,您真的可以專注於您的 WordPress 網站和部落格。

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

在 2015 年底,我們以 Calypso 的形式重建了大部分 WordPress.com,Calypso 是一個使用 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 上取得。

我們還有即將推出的 Raspberry Pi 整合,它使用 Electron。

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

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

發布已簽署的桌面軟體對我們來說相對較新,尤其是對於 Windows 而言。我們為 Code Signing a Windows App 撰寫了一篇文章,其中包含流程以及我們為正確執行此操作而經歷的一些障礙。

本週專案:Dat

·7 分鐘閱讀

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


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

首先,Dat 是什麼?

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

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

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

dat share path/to/my/folder

Dat 就會建立一個連結,您可以使用該連結將該資料夾發送給其他人 — 沒有中央伺服器或第三方可以存取您的資料。與 BitTorrent 不同,也不可能嗅探誰在共享什麼 (請參閱 Dat Paper 草稿以取得更多詳細資訊)。

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

Dat Desktop 是一種讓不擅長或不想使用命令列的人也能使用 Dat 的方式。您可以在您的機器上託管多個 dat,並透過您的網路提供資料。

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

DataRefuge + Project Svalbard

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

加州公民資料聯盟

CACivicData 是一個開源檔案庫,提供來自 CAL-ACCESS (加州追蹤政治資金的資料庫) 的每日下載。他們進行 每日發布,這意味著在其 zip 檔案中託管大量重複資料。我們正在努力將他們的資料託管為 Dat 儲存庫,這將減少參考特定版本或更新到較新版本所需的麻煩和頻寬。

Electron 更新

這個還沒有具體化,但我們認為一個有趣的用例是將編譯後的 Electron 應用程式放入 Dat 儲存庫中,然後在 Electron 中使用 Dat 用戶端來提取已建構應用程式二進制檔案的最新 delta,以節省下載時間,同時也降低伺服器的頻寬成本。

誰應該使用 Dat Desktop?

任何想要透過 p2p 網路共享和更新資料的人。資料科學家、開放資料駭客、研究人員、開發人員。如果有人有我們尚未想到的酷炫用例,我們非常樂於接受回饋。您可以造訪我們的 Gitter Chat 並詢問我們任何問題!

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

使用者帳戶和 metadata 發布。我們正在開發一個 Dat 註冊表網頁應用程式,將部署在 datproject.org 上,它基本上將是一個「資料集的 NPM」,但需要注意的是,我們只會是一個 metadata 目錄,而資料可以存在於線上的任何地方 (與 NPM 或 GitHub 不同,後者所有資料都集中託管,因為原始碼足夠小,您可以將其全部放入一個系統中)。由於許多資料集都很大,因此我們需要一個聯合註冊表 (類似於 BitTorrent tracker 的運作方式)。我們希望讓使用者可以輕鬆地從 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 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 允許作者一次管理多個部落格 - 並專注於他們的寫作。像常見的寫作快捷鍵這樣簡單的事情在瀏覽器中無法實現,但在我們的桌面應用程式中可用。它允許其他應用程式 透過 deeplinks 與部落格直接通訊

什麼是 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 構建應用程式只比構建 Web 應用程式稍微困難一點,這是一項了不起的成就。

Ghost 完成了嗎?如果沒有,接下來會推出什麼?

Ghost Desktop 也是一個正在進行中的專案 - 我們離完成還很遠。我們已經討論了一段時間,要為我們的用戶帶來完整的離線模式,並且我們已經非常接近了。其他值得注意的工作領域是與其他文字編輯應用程式(如 Word 或 Atom)的擴展和整合,最終允許人們使用他們最喜歡的工具來撰寫文章。總的來說,一旦我們發布了離線模式功能,我們就會尋求與作業系統更深入的整合。如果您對此感興趣,加入我們

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

我是 KapFelonyVisual Studio Code 的忠實粉絲。

👻

本週專案:Beaker Browser

·4 分鐘閱讀

本週我們採訪了 Paul FrazeeBeaker Browser 的創建者。Beaker 是一個實驗性的點對點 Web 瀏覽器,它使用 Dat 協議從用戶的設備託管網站。


什麼是 Beaker,您為什麼創建它?

Beaker 是一個參與式瀏覽器。它是為獨立駭客設計的瀏覽器。

Web 是閉源的。如果您想影響社群媒體的運作方式,您必須在 Facebook 或 Twitter 工作。對於搜尋引擎,則是 Google。控制權掌握在公司手中,而不是用戶自己手中。

有了 Beaker,我們有了一個新的 Web 協議:分散式檔案傳輸。「Dat」。它可以按需免費創建網站,然後從設備共享它們。無需伺服器。這是我們的創新。

Beakers Protocols

當您在 Beaker 中訪問 Dat 網站時,您會下載這些檔案。該網站永遠屬於您。您可以儲存它、fork 它、修改它,並免費共享您的新版本。這一切都是開源的。

這就是它的意義所在:我們正在為開源網站製作瀏覽器。我們希望它成為社群駭客的工具包。

誰應該使用 Beaker?

駭客。模組製作者。創意類型的人。喜歡修修補補的人。

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

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

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

這是 fork 網站的方法

$ 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?

對於這個專案來說,這是顯而易見的。如果我自己 fork Chrome,我現在就會在寫 C++!沒有人想這樣做。我了解 Web 技術堆疊,而且我可以快速地使用它。這是理所當然的。

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

在構建 Beaker 時,您遇到過哪些挑戰?

其中一半是在研究工具,並弄清楚我可以做到什麼程度。

製作瀏覽器本身相當容易。Electron 實際上是一個用於製作瀏覽器的工具包。... 除了瀏覽器標籤;我花了很長時間才把它弄對。我最終崩潰並學習了如何製作 SVG。它看起來好多了,但我迭代了 3 或 4 次才把它弄對。

Electron 應在哪些方面改進?

如果我可以將開發人員工具停靠在 webview 內部,那就太好了。

Beaker 接下來會推出什麼?

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

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

我們有很多未解決的問題。不要害怕 ping 我。在 freenode 上 #beakerbrowser。我們保留了一個 貢獻者頁面,我們會將您添加到其中。如果您來奧斯汀,我會請您喝啤酒。

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

  1. 使用現有的構建工具。相信我,您不會想與自己的解決方案搏鬥。使用 electron-builder。使用樣板程式碼庫。
  2. 如果您需要在 Electron 程式碼庫中開啟一個問題,請多花一點心思使其易於重現。您會更快地收到回覆,並且團隊會感謝您。更好的是,嘗試自己修復它。看看內部構造實際上非常有趣。
  3. 至少通讀所有指南和進階文件一次。
  4. 不要製作瀏覽器,這是一個飽和的市場。

本週專案:Kap

·7 分鐘閱讀

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


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

Kap Screencast

什麼是 Kap?

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

我們已經看到各個年齡層和背景的人們在教育環境、螢幕錄影、教程中使用它... 清單不勝枚舉。甚至用於創建生產資源!我們完全被我們的小型副專案受到如此好評所震驚。

您為什麼構建它?

這是一個非常好的問題,並不是說市面上缺少螢幕錄製工具!我們覺得替代方案要么太複雜、要么太昂貴、要么太有限。沒有什麼感覺恰到好處,能滿足我們的日常需求。我們也認為,當我們用來完成工作的工具是開源的時候,那真是太好了,這樣每個人都可以幫助塑造它們。構建 Kap 最終與我們沒有做的事情同樣重要。這一切都在細節中,小改進的累積成為了我們想要使用的工具的輪廓。

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

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

有很多原因

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

我們認為應用程式的未來在瀏覽器中,但我們還沒有完全達到那一步。Electron 是朝著那個未來邁出的重要一步。它不僅使應用程式本身更易於訪問,而且使構建它們的程式碼也更易於訪問。一個有趣的想法是想像一個未來,作業系統是一個瀏覽器,而標籤頁本質上是 Electron 應用程式。

此外,作為主要的 Web 開發人員,我們非常喜歡 JavaScript 的同構性質,因為您可以在客戶端、伺服器以及現在的桌面上運行 JS。使用 Web 技術(HTML、CSS 和 JS),許多事情都比原生技術簡單得多:更快的原型設計、更少的程式碼、flexbox > auto-layout (macOS/iOS)。

在構建 Kap 時,您遇到過哪些挑戰?

使用 Electron 可用的資源來錄製螢幕是最大的挑戰。它們的效能根本不足以滿足我們的要求,並且在我們看來會使該專案失敗。雖然這並非 Electron 本身的錯,但在原生開發和使用 Web 技術構建桌面應用程式之間仍然存在差距。

我們花費了大量時間試圖解決 getUserMedia API 的效能不佳問題,這個問題源於 Chromium。當我們著手製作 Kap 時,我們的主要目標之一是使用 Web 技術構建整個應用程式。在嘗試了一切可以使其正常運作的方法(最低要求是在 Retina 螢幕上達到 30 FPS)之後,我們最終不得不找到另一個解決方案。

我在程式碼庫中看到了一些 Swift 程式碼。那是關於什麼的?

由於被迫尋找 getUserMedia 的替代方案,我們開始嘗試 ffmpeg。除了是音訊和視訊轉換的最佳工具之一外,它還具有在幾乎任何作業系統中錄製螢幕的功能,並且我們能夠錄製清晰的視訊,滿足我們在 Retina 螢幕上達到 30 FPS 的最低要求。問題是?效能是 "😩",CPU 使用率變得異常。因此,我們回到了繪圖板,討論了我們的選擇,並意識到我們必須做出妥協。這導致了 Aperture,我們自己的 macOS 螢幕錄製函式庫,用 Swift 編寫。

Electron 應在哪些方面改進?

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

我們看到的最大改進領域之一是有效負載,特別是 Electron 如何分發 Chromium。一個想法是擁有一個共享的 Electron 核心,並讓應用程式安裝程式檢查系統上是否已存在它。

創建跨平台 Electron 應用程式可能會帶來更好的體驗。目前,平台之間存在太多不一致之處、特定於平台的 API 和缺少的功能,這使得您的程式碼庫中充斥著 if-else 語句。例如,vibrancy 僅在 macOS 上受支持,自動更新程式在 macOS 和 Windows 上的工作方式不同,甚至在 Linux 上都不受支持。透明度在 Linux 上是碰運氣,通常是碰不到。

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

您最喜歡 Electron 的哪些地方?

我們最喜歡的事情很容易就是,任何具有 Web 創建知識的人都可以構建和貢獻多平台原生體驗。更不用說在其上開發的輕鬆和樂趣、出色的文件和蓬勃發展的生態系統。

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

我們也是構建它的團隊、他們的奉獻精神和支持,以及他們維護的活躍而友好的社群的忠實粉絲。向你們所有人致以擁抱!

Kap 接下來會推出什麼?

我們的下一步是審查該應用程式,為我們的 2.0.0 里程碑做準備,其中包括 React 重寫以及對外掛程式的支持,允許開發人員擴展 Kap 的功能!我們邀請大家關注該專案並在我們的 GitHub 儲存庫 上做出貢獻。我們正在傾聽,並希望聽到盡可能多的人們的聲音,讓我們知道我們如何才能使 Kap 成為對您來說最好的工具

什麼是 Wulkano?

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

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

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

2016 年 8 月:新應用程式

·3 分鐘閱讀時間

以下是 8 月份添加到該網站的新 Electron 應用程式。


該網站透過社群的 pull request 更新了新的 應用程式meetup。您可以 watch 這個儲存庫 以獲取新添加內容的通知,或者如果您對該網站的所有更改不感興趣,請訂閱 部落格 RSS feed

如果您製作了一個 Electron 應用程式或主辦了一個 meetup,請發送一個 pull request 以將其添加到網站,它將出現在下一次的總結中。

新應用程式

Code RPGifyRPG 風格的程式碼編寫應用程式
PamFax用於發送和接收傳真的跨平台應用程式
BlankUp清晰度 +1 的 Markdown 編輯器
Rambox免費和開源的訊息和電子郵件應用程式,將常見的 Web 應用程式組合到一個中
Gordie適用於您的卡片收藏的最佳應用程式
Ionic Creator更快地構建令人驚嘆的行動應用程式
TwitchAlerts使用精美的警報和通知讓您的觀眾開心
Museeks一個簡單、乾淨且跨平台的音樂播放器
SeaPig從 markdown 到 html 的轉換器
GroupMe非官方 GroupMe 應用程式
Moeditor您的多功能 markdown 編輯器
SoundnodeSoundnode App 是桌面的 Soundcloud
QMUI WebQMUI Web Desktop 是一個用於管理基於 QMUI Web Framework 的專案的應用程式
Svgsus整理、清理和轉換您的 SVG
Ramme非官方 Instagram 桌面應用程式
InsomniaREST API 客戶端
Correo適用於 Windows、macOS 和 Linux 的選單列/任務欄 Gmail 應用程式
KongDash適用於 Kong Admin API 的桌面客戶端
Translation Editor適用於 INTL ICU 訊息的翻譯檔案編輯器(請參閱 formatjsio)
5EClient5EPlay CSGO 客戶端
Theme Juice輕鬆進行本地 WordPress 開發