想寫桌面程式卻無從下手？Electron 讓你橫跨Windows MacOS與Linux 無煩惱！

在先前的文章中，我們討論過從 Web 前端轉職到後端的一大利器 - Node.js，但你可能還不知道，一旦你在前端領域中得心應手，其實就可以往桌面軟體，或是我們稱 GUI 應用程式的領域發展 (Graphical user interface 圖形使用者介面)。

雖然線上應用程式也很多人使用，但是我們生活中還是充斥著很多桌面程式，例如，微軟著名的 Visual Studio Code，開發 Web API 的好用測試工具 Postman，Git / Github 新手神器 Github Desktop ，與工作溝通神器 Slack ，老牌聊天視訊軟體 Skype。製作這些桌面程式的關鍵人物可就是鼎鼎大名的跨平台解決方案 - Electron，今天就讓小編來為各位簡單介紹一下這傢伙的奧妙之處。

 

首先，桌面應用程式跨平台問題一直都是開發者的痛點，Windows 上有微軟的幾種解決方案，基本上使用 C# 語言開發，但是他無法跨平台在其他作業系統上執行，例如 MacOS 或是 Linux。而 MacOS 也同樣的，必須要使用 XCode 建立 MacOS 應用程式，使用的是 Swift 或是 Objective-C 語法，函式庫與 UI 邏輯等 iOS 有不小的差異。

這層面上，大多數的公司因為市佔率的關係選擇拋棄 MacOS 的確是不難想像的決定。真的選擇建立兩版程式的公司並不多見 (大多為通訊軟體)。

不過 Windows Only 有一個問題，早期 2000 前後因為網頁應用還沒有那麼複雜，使用者體驗沒有那麼好，所以 Windows 桌面應用程式很流行。但是現在網頁程式當道，並不是那麼多程式需要那麼的「及時」反應，所以就連 Word, Excel, Power Point, Outlook 都已經網路化了，Google Docs, Sheets, Sliders, Gmail 等網路應用程式也已經是很多年輕人棄微軟 Office 系列後的首選。這也表示，如今桌面應用在很多領域是沒有必要的選擇，直接做 Web 版就可以了，那桌面應用在什麼情況是有用的呢？

首先要先認知的是，雖然桌面應用不代表不連網路，但是不連網路只有桌面應用程式可以運行，所以有一些情況是不方便做網路設計的話，那可能桌面應用是首選。

另外一個就是畫面即時反應能力，這層面要分成兩個部分。第一個是，網站在切換頁面的時候，需要額外送出網路連線取得新頁面的資料，才有辦法繪製畫面。但是桌面應用不用，大多數的頁面資源都已經放在 APP 裡面，在安裝的時候就下載好了。另外一個就是跟作業系統核心的距離，如果中間隔太多層，那反應自然感覺就會慢。

在大部分的桌機上，網頁應用的速度其實已經非常好了，但是如果是效能比較差的裝置型的電腦，那就不太一定。再來，裝置型的電腦有很大部分是 Linux 作為作業系統，因為微軟授權費的問題。這時候微軟的解決方案就不能使用了。所以如果一樣的開發環境可以在多個作業系統上運行是再好不過了。

Electron 是由 GitHub 當初為了開發 Atom 編輯器而衍生出的一個開源框架，第一個版本發佈為 2013 年，主要是可以透過 Node.js 作為後端的開發，並使用 Chromium 為前端來完成桌面應用程式的開發。

(Github 被微軟收購後，Atom 好像就沒什麼消息了，資源似乎都在 Visual Studio Code 上面)

許多人可能不熟悉 Chromium，人如其名，他就是 Google 以 Chrome 為基礎發布的一個 BSD 開源專案，像是新版的 Microsoft Edge，Opera 等著名瀏覽器，就是透過 Chromium 為基礎去開發的。

一個標準的 Electron 應用程式，最少會包含三種檔案：package.json, index.html 以及 main.js。index.html 就是主要的進入點，主要就是處理呈現給使用者端的圖形化介面，而 main.js 則是程式應用核心的運算部分的進入點，而package.json 就是 node.js 的設定文件。

從上看就可以看得出來，Electron 製作出來的應用程式就是一個 Node.js 的應用程式，當然還要包含了其他  Electron 的函式庫才有辦法運行。而 Electron 本身就是一個 Node.js 應用程式，當中與後端的呼叫與資料庫連結等，都可以使用 Node.js 的方式來做開發。又因為基於 Chromium 的關係，所以 Electron 是一個跨平台整合方案，畢竟在 Windows, MacOS, Linux 這些作業系統上面，Chromium 都可以運行。

此外，因為 Electron 自備 Chromium，所以不需要像網路應用程式一樣去考慮 Client 端用的是哪一個瀏覽器，甚至是哪一版的瀏覽器。所以不用怕碰到CSS JavaScript 不相容的問題。

但好用歸好用，其實也是有一些小缺點，雖然他對前端出生的人來說相當友善又好上手，但麻煩的是他的封裝檔案 Size 跟其他相比卻是大上不少(畢竟自帶 Chromium)，另外由於他的開發方式還是以 Web 瀏覽器開發為基底，程式碼無需編譯明碼執行以及執行較耗資源這些壞毛病也是一脈相承。

此外，在 Desktop 跨平台整合方案中還有一個明星 QT。單就效能來講的話，基於 C++ 的 QT 在本質上會比 Electron.js 要來得優秀不少，畢竟中間沒有隔一層。但是 QT 也是有相對應的缺點，一是超級貴的收費模式，不然就要強迫 LGPL 中獎。Electron.js 則是免費商用的(BSD 授權)。

再來，會 JavaScript 的人，通常對 CSS 也是有一定程度的認識，Electron.js 的畫面一樣是用 CSS 控制，當然使用前端框架例如 React、Vue.js 、Bootstrap 絕對是沒問題的。如果使用 QT 的話，那就要重新學習他的畫面控制邏輯。也是要花不少時間學習。

另外一個議題是，其實 Node.js 是可以跟 C++ 共同使用的(官網：C++ Addons)。畢竟 Node.js 基於 V8 JavaScript engine，而且 V8 JavaScript engine 也是由 C++ 寫的，所以在設計的一開始就包含了與 C++ 互動的路徑。一般來說只要效能有問題，解決方案通常就是讓 C / C++ 來解決 (C++ 相容 C語言)，就跟 Python / Ruby 是一樣的。所以 Electron.js 如果有效率的問題的話，一樣是可以利用 C++ 來救援。

總之，有興趣往桌面應用程式開發的你，如果已經有著豐富的前端開發經驗，不如試著使用看看 Electron 來打造人生的新一個高峰吧!

最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!!