Electron 是一個跨平台的、基於 Web 前端技術的桌面 GUI 應用程式開發框架。
使用 Web 前端技術來開發一個桌面 GUI 程式是一件多麼炫酷的事情，你可以使用 HTML、CSS 來繪製介面和控制布局，使用 JavaScript 來控制使用者行為和業務邏輯，使用 Node.js 來通訊、處理音訊視訊等，幾乎所有的 Web 前端技術和框架（jQuery、Vue、React、Angular 等）都可以應用到桌面 GUI 開發中。
至此，JavaScript 這門神奇的語言除了能開發 Web 前端、Web 後台（基於 Node.js）、手機 APP（基於 React），也能開發桌面 GUI 程式了。
經濟學中的“有需求就有市場”在技術領域也適用，Electron 就是應需求而生的。Electron 面世之後，不僅滿足了大部分現有的開發需求，還創造了大量的新需求，開闢了一個新的生態。
Electron 的由來
如果想開發一個桌面 GUI 應用軟體，希望其能同時在 Windows、Linux 和 Mac 平台上執行，可選的技術框架並不多，在早期人們主要使用以下三個框架來完成這類工作：
-
wxWidgets：https://www.wxwidgets.org
-
GTK：https://www.gtk.org
-
Qt：https://www.qt.io
這三個框架都是用 C/C++ 語言開發的，受語言開發效率的限制，開發者想通過它們快速地完成桌面應用的開發工作十分困難。
近幾年相繼出現了針對這些框架的現代程式語言系結庫，諸如 Python、C#、Go 等，大部分都是開源社群提供的，但由於歷史原因，要想用到這些框架的全部特性，還是需要編寫 C/C++ 程式碼。並且由於幾乎沒有高品質的 Node.js 的系結庫，前端程式設計師想通過這三個框架開發桌面應用更是難上加難。
Stack Overflow 的聯合創始人 Jeff Atwood 曾經說過，凡能用 JavaScript 實現的，注定會被用 JavaScript 實現。桌面 GUI 應用也不例外，近幾年兩個重量級框架 NW.js（https://nwjs.io）和 Electron（https://electronjs.org）橫空出世，給前端開發人員開啟了這個領域的大門。
Electron 最初由趙成和 GitHub 的工程師於 2013 年4月建立，當時名字為 Atom Shell，用來服務於 GitHub 的開發工具 Atom，2014 年5月開源，2015 年4月才正式更名為 Electron。目前 GitHub 公司內部仍有一個團隊在維護這個開源專案，且社群內也有很多的貢獻者。
Electron 更新非常頻繁，平均一到兩周就會有新版本發布，Issue 和 Pull request 的回復也非常及時，一般關係到應用崩潰的問題（Crash Issue）一兩天就能得到回復，普通問題一週內也會有人跟進。社群活躍程度由此可見一斑。
發起者是中國人
與 Electron 類似的另外一個框架是 NW.js，它們都是用 Web 前端技術來開發桌面 GUI 程式。更多內容請轉到：NW.js和Electron優缺點綜合對比
這兩個框架都與中國人有極深的淵源，2011 年左右，中國英特爾開源技術中心的王文睿（Roger Wang）希望能用 Node.js 來操作 WebKit，而建立了 node-webkit 專案，這就是 NW.js 的前身，但當時的目的並不是用來開發桌面 GUI 應用。
中國英特爾開源技術中心大力支援了這個專案，不僅允許王文睿分出一部分精力來做這個開源專案，還給了他招聘名額，允許他招聘其他工程師來一起完成。
2012 年，故事的另一個主角趙成（Cheng Zhao）加入王文睿的小組，並對 node-webkit 專案做出了大量的改進。
後來趙成離開了中國英特爾開源技術中心，幫助 GitHub 團隊嘗試把 node-webkit 應用到 Atom 編輯器上，但由於當時 node-webkit 並不穩定，且 node-webkit 專案的走向也不受趙成的控制，這個嘗試最終以失敗告終。
但趙成和 GitHub 團隊並沒有放棄，而是著手開發另一個類似 node-webkit 的專案——Atom Shell，這個專案就是 Electron 的前身。趙成在這個專案上傾注了大量的心血，這也是這個專案後來廣受歡迎的關鍵因素之一。再後來 GitHub 把這個專案開源出來，最終更名為 Electron。
你可能從沒聽說過這兩個人的名字，但開源界就是有這麼一批“英雄”，他們不為名利而來，甘做軟體行業發展的鋪路石，值得這個領域的所有從業者尊敬。
基於 Electron 的應用
1) 軟體開發領域
在軟體開發領域，最為開發人員所熟知的無過於 Visual Studio Code 了。Visual Studio Code 依靠豐富的功能、極速的響應、極佳的使用者體驗贏得了廣大開發人員的青睞。作為一個新興的 IDE 工具，其在最近一期的 IDE 排行榜單中排名第七，使用者量持續迅猛增長。
另外，MongoDB 桌面版管理工具 Compass 也是基於 Electron 開發的。
2) 社交通訊領域
社交通訊領域風靡全球的 Skype 桌面版和 WhatsApp 桌面版、高效辦公領域的 Slack 和飛書、視聽領域的 Nuclear（一款很有趣的音樂播放器）和 WebTorrent Desktop（以P2P協定播放音視訊的應用）、金融交易領域的 OpenFin、早期的以太坊用戶端 Mist 和 Brave 瀏覽器（由前 Mozilla CEO 和 JavaScript 之父 Brendan Eich 建立）等，都是基於 Electron 打造的。
3) Web 介面測試領域
Electron 還被用於 Web 介面測試。自 PhantomJS 宣布停止更新後，Electron 成了有力的替代者。
測試工程師可以通過編寫自動化測試指令碼，輕鬆地控制 Electron 存取網頁元素、提交使用者輸入、驗證介面表現、跟蹤執行效率等。另外，知名的 HTTP 網路測試工具 Postman 也是基於 Electron 開發的。
4) Electron 是極客喜愛的工具
由於 Electron 有自定義代理、截獲網路請求、注入指令碼到目標網站的能力，它也成了眾多極客的趁手工具，比如有開發者開發過一個音樂聚合軟體，把 QQ 音樂、網易雲音樂、蝦米音樂聚合在一個軟體裡播放。
我的朋友也曾開發過一個自媒體內容管理軟體，可以一鍵把文章發佈到百家號、大魚號、頭條號等自媒體平台。
如果你基於 Electron 開發了軟體，也完全可以自由地把你的產品分享到 Electron 的官網（https://github.com/electron/apps/blob/master/contributing.md#adding-your-app）。
Electron 的生態
electron-builder 是一個 Electron 的構建工具，它提供了自動下載、自動構建、自動打包、自動升級等能力，是 Electron 生態中的基礎支援工具，大部分流行的 Electron 應用都使用它進行構建和分發。
在 Electron 應用記憶體取本地資料，可以使用 Cookie、LocalStorage 或 IndexedDB 這些傳統的前端技術，也可以選擇 Electron 生態內的一些方案，例如：
-
rxdb 是一個可以在 Electron 應用內使用的實時 NoSQL 資料庫；
-
如果希望使用傳統的資料庫，也可以在 Electron 內使用 SQLite 資料庫。
Vue CLI Plugin Electron Builder 和 electron-vue 是兩個非常不錯的工具，開發者可以基於它們輕鬆地在 Electron 應用內使用 Vue 及其元件（包括 HMR 熱更新技術）。雖然後者擁有更多的 GitHub star，更受歡迎，但我推薦使用前者。前者基於 Vue CLI Plugin 開發，更新頻繁，而後者已經有近一年時間沒更新過了。
electron-react-boilerplate 是一個專案模板，它把 Electron、React、Redux、React Router、Webpack 和 React Hot Loader 組合在一起。開發者基於此模板可以快速構建 React 技術體系的 Electron 應用。
angular-electron 也是一個專案模板，開發者可以基於它快速構建基於 Angular 和 Electron 的應用。
如果不希望使用上述前端框架，僅希望使用 webpack 與傳統 Web 前端開發技術開發 Electron 應用，可以考慮使用 electron-webpack 元件完成工作。
另外，awesome-electron 專案記錄了大量與 Electron 有關的有趣的專案和元件。
Electron 的優勢
Electron 基於 Web 技術開發桌面應用。Web 技術是現如今軟體開發領域應用最廣泛的技術之一，入門門檻非常低，周邊生態繁榮而且歷史悠久。
1) Electron 開發效率高
相較於基於 C++ 庫開發桌面軟體來說，基於 Electron 開發更容易上手且開發效率更高。由於 JavaScript 語言是一門解釋執行的語言，所以 C++ 語言固有的各種問題都不再是問題，比如：
-
C++ 沒有垃圾回收機制，開發人員要小心翼翼地控制記憶體，以免造成記憶體漏失；
-
C++ 語言特性繁多且複雜，學習難度曲線陡峭，需要針對不同平台進行編譯，應用分發困難。
使用 Electron 開發桌面應用就不用擔心這些問題。
2) Electron 執行效率高
在執行效率上，如果前端程式碼寫得足夠優秀，Electron 應用完全可以做出與 C++ 應用相媲美的使用者體驗，Visual Studio Code 就是先例。
另外，Node.js 本身也可以很方便地呼叫 C++ 擴充套件，Electron 應用內又包含 Node.js 環境，對於一些音視訊編解碼或圖形影象處理需求，可以使用 Node.js 的 C++ 擴充套件來完成。
3) Electron 立足於 JavaScript 生態
隨著 Web 應用大行其道，Web 前端開發領域的技術生態足夠繁榮。Electron 可以使用幾乎所有的 Web 前端生態領域及 Node.js 生態領域的元件和技術方案。截至本文發布時，發布到 npmjs.com 平台上的模組已經超過 90 萬個，覆蓋領域廣，優秀模組繁多且使用非常簡單方便。
4) 無需考慮相容性問題
在完成 Web 前端開發工作時，開發者需要考慮很多瀏覽器相容的問題，比如：使用者是否使用了低版本的 IE 瀏覽器，是否可以在樣式表內使用 Flexbox（彈性盒模型）等。這些問題最終會導致前端開發者束手束腳，寫出一些醜陋的相容程式碼以保證自己的應用能在所有終端表現正常。
但由於 Electron 內建了 Chromium 瀏覽器，該瀏覽器對標準支援非常好，甚至支援一些尚未通過的標準，所以基於 Electron 開發應用不會遇到相容問題。開發者的自由度得到了最大化保護，你可以在 Electron 中使用幾乎所有 HTML5、CSS3、ES6 標準中定義的 API。
5) Electron 可以使用作業系統介面
另外，Web 前端受限存取的檔案系統、系統托盤、系統通知等，在 Electron 技術體系下均有 API 供開發者自由使用。
Electron 的不足
基於 Electron 開發桌面 GUI 應用並不是完美的方案，它也有它的不足，綜合來說有以下幾點。
1) 打包後的應用體積巨大
一個功能不算多的桌面應用，通過 electron-builder 壓縮打包後至少也要 40MB。如果開發者不做額外的 Hack 工作的話，使用者每次升級應用程式，還要再下載一次同樣體積的安裝包，這對於應用分發來說是一個不小的負擔。但隨著網路環境越來越好，使用者磁碟的容積越來越大，此問題給使用者帶來的損失會慢慢被削弱。
2) 開發複雜度較大，進階曲線較陡
跨進程通訊是基於 Electron 開發應用必須要了解的知識點，雖然 Electron 為渲染進程提供了 remote 模組來方便開發人員實現跨進程通訊，但這也帶來了很多問題，比如某個回撥函數為什麼沒起作用、主進程為什麼報了一連串的錯誤等，這往往給已經入門但需要進階的開發者帶來困惑。
3) 版本發布過快
為了跟上 Chromium 的版本發布節奏，Electron 也有非常頻繁的版本發布機制，每次 Chromium 改動，都可能導致 Electron 出現很多新問題，甚至穩定版本都有很多未解決的問題。幸好 Electron 的關鍵核心功能一直以來都是穩定的。
4) 安全性問題
Electron 把一些有安全隱患的模組和 API 都設定為預設不可用的狀態，但這些模組和 API 都是非常常用的，因此有時開發者不得不開啟這些開關。但是，一旦處理不當，就可能導致開發的應用存在安全隱患，給開發者乃至終端使用者帶來傷害。
安全問題有很多值得關注的技術細節，以至於 Electron 官方文件中專門開闢出來一個章節號召程式設計師重視安全問題。但我認為，很多時候安全和自由是相悖的，在不損失自由的前提下提升安全指標的工作是值得肯定的，如果哪天 Electron 以安全為由停用指令碼注入的技術，相信很多開發者都會反對。
5) 資源消耗較大
Electron 底層基於的 Chromium 瀏覽器一直以來都因資源佔用較多被人詬病，目前來看這個問題還沒有很好的解決辦法，只能依賴 Chromium 團隊的優化工作。
除了以上這些問題外，Electron 還不支援老版本的 Windows 作業系統，比如 Windows XP。在中國還有一些使用者是使用 Windows XP 的，開發者如果需要面向這些使用者，應該考慮使用其他技術方案。