跳至主要內容

每週專案：Kap

·7 分鐘閱讀
skllcrn
skllcrn
sindresorhus
sindresorhus
zeke
zeke

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)，許多事情比原生程式碼簡單得多：更快的原型設計、更少的程式碼、彈性盒子 > 自動配置 (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 應用程式可能會佔用大量記憶體，但這實際上是 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 的哪些方面？​

我們最喜歡的方面是，任何具有網頁開發知識的人都可以建立並貢獻於多平台原生體驗。更不用說開發時的輕鬆和樂趣，出色的文件和蓬勃發展的生態系統。

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

我們也是其建構團隊的忠實粉絲，他們的奉獻精神和支持，以及他們所維護的積極友善的社群。向你們所有人致敬！

Kap 的下一步是什麼？​

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

Wulkano 是什麼？​

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

是否有任何可能對其他開發人員有用的 Electron 提示？​

善用並參與出色的社群，查看 Awesome Electron，看看範例，並利用出色的文件！