最近入手 Electron，發現本文，覺得很不錯，分享給大家。
作者：JESSICA LOR
譯者：Xiaohu Zhu 朱小虎
原文地址：http://jlord.us/essential-electro
1. 什麼是 Electron？
Electron 是一個可用於使用JavaScript，HTML 和 CSS 構建桌面應用程序的庫。這些應用程序可以打包爲在 Mac，Windows 和 Linux 計算機上運行，也可以放置在 Mac 和 Windows 應用程序商店中。
1.1 定義：
- JavaScript，HTML 和 CSS 是網絡語言，這意味着它們是網站的基礎，而 Chrome 之類的瀏覽器知道如何將這些代碼轉換爲您看到的視覺圖形。
- Electron 是一個庫 Electron 是可以複用而不必編寫自己的代碼。您可以使用它在其之上構建項目。
- 基於 Electron 構建的應用
- Electron API 演示（請參閱對 Electron 可以做什麼）
2 爲什麼這很重要？
通常，每個操作系統的桌面應用程序均以各自的本地語言編寫。這可能意味着要有三個團隊編寫您的應用程序的三個版本。Electron 使您可以一次使用網絡語言編寫應用程序。
2.1 定義：
- 本機（操作系統）語言這些是（主要）使用以下主要操作系統構建的語言：Mac，Objective C；Linux，C；Windows，C ++。
3 怎麼做？
Electron 將 Chromium 和 Node.js 與一組自定義 API 結合在一起，以用於本機操作系統功能，例如打開文件對話框，通知，圖標等。
3.1 定義：
- API 應用程序接口描述了可供您使用庫的一組功能。
- Chromium 由 Google 創建，這是 Google 瀏覽器 Chrome 使用的開源庫。
- Node.js（或 Node）一種工具，用於在服務器上編寫 JavaScript，訪問文件系統和網絡（您的計算機也是服務器！）。
3.2 資源：
4 情況如何？
使用 Electron 進行開發就像構建可以在其中無縫使用 Node
的網頁，或者構建可以在其中構建 HTML 和 CSS 界面的 Node 應用程序一樣。而你只需要設計一個瀏覽器，在最新的 Chrome。
4.1 定義：
- Use Node in 還不是全部！除了無處不在的完整 Node API 之外，您還可以利用 npm（Node 的軟件包管理器）上已編寫和託管的 300,000 多個模塊。
- 一個瀏覽器並非所有瀏覽器都是相同的，Web 設計人員和開發人員通常必須加倍努力才能使一個站點在每個站點上看起來都相同。
- 最新的 Chrome 使用 ES2015 的 90％ 以上，JavaScript 的最新更新以及 CSS 變量等出色功能。
4.2 資源：
5. 先決條件
由於 Electron 的兩個組件是網站和 JavaScript，因此在開始之前，您需要具備這兩個方面的經驗。查看有關 HTML，CSS 和 JS 的一些教程，然後在計算機上安裝Node。
5.1 定義：
- 真實地說，學習製作網站和編寫 Node 並不是一朝一夕的事，但希望下面的鏈接可以幫助您入門。
5.2 資源：
- 安裝 Node（選擇 LTS 版本）
- NodeSchool教程（嘗試 learningyounode）
- JS for Cat（作者：Max Ogden）
- 學習編碼 HTML 和 CSS（Shay Howe 撰寫）
- CSS 技巧（學習 CSS 最佳實踐和技巧）
- Mozilla 開發人員網絡（一個網站和 JavaScript 的詞典）
6 兩個過程
Electron 有兩種類型的過程：主過程和渲染器。有模塊上每一個或兩個過程的工作。主要過程更多地是在幕後，而渲染器過程是應用程序中的每個窗口。
6.1 定義：
-
模塊 Electron 的 API 根據其功能分組在一起。例如，該
dialog模塊具有用於本機對話框的所有 API，例如打開文件，保存文件和警報。
6.2 資源：
7. 主進程 Main process
主進程（通常是一個名爲的文件 main.js）是每個 Electron 應用程序的入口點。它控制着應用的壽命，從打開到關閉。它還會調用本機元素，並在應用程序中創建每個新的渲染器進程。內置了完整的 Node API。
7.1 定義：
- 調用本機元素打開對話框和其他本機操作系統的交互會佔用大量資源，因此它是在主進程中完成的，而渲染器進程不會中斷。
7.2 資源：
8 渲染器進程
渲染器進程是您應用中的瀏覽器窗口。與主進程不同，這些流程可以有多個，並且每個進程都是獨立的。它們也可以被隱藏。通常以一個命名 index.html。它們就像典型的 HTML 文件一樣，但是在 Electron 中，與任何 Web 瀏覽器不同，您在這裏也可以使用整個 Node API。
8.1 定義：
- 每個渲染器進程都是獨立的，每個渲染器進程都是一個單獨的進程，這意味着一個崩潰不會影響另一個。
- 隱藏您可以將窗口設置爲隱藏，並使用它僅在後臺執行代碼。
8.2 資源：
9 像這樣
在 Chrome（或其他網絡瀏覽器）中，每個選項卡及其網頁都類似於 Electron 中的單個渲染器進程。如果您關閉所有標籤頁，則 Chrome 仍然存在，就像您的主進程一樣，您可以打開新窗口或退出應用程序。
9.1 資源：
10 保持聯繫
主進程和渲染器進程需要能夠通信，因爲它們都負責不同的任務。爲此，有 IPC，進程間通信。使用它在主進程和渲染器進程之間傳遞消息。
10.1 定義：
- IPC主進程和渲染器進程每個都有要使用的 IPC 模塊。
11 放在一起
Electron 應用程序類似於節點應用程序，並使用一個 package.json 文件。您可以在其中定義哪個文件是您的主進程，從而定義 Electron 在哪裏啓動您的應用程序。然後，該主進程可以創建渲染器進程，您將使用 IPC 在兩者之間傳遞消息。
11.1 定義：
-
package.json文件這是 Node 應用程序中的常見文件，其中包含有關項目的元數據和依賴項列表。
12 快速開始
該 Electron 快速啓動庫是一個最基本的 Electron 應用與 package.json，main.js 並且 index.html 您已經瞭解了這裏，一個上手偉大的地方！另外，請根據您選擇的框架查看樣板中的模板。
12.1 資源：
13 打包
構建應用後，您可以將其與適用於 Mac，Windows 或 Linux 的命令行工具 打包在一起 electron-packager。爲此添加腳本 package.json。請查看以下資源，以在 Mac 和 Windows 應用商店中獲取您的應用。
13.1 定義：
- 命令行工具 這是一個程序，您可以通過在終端中向其傳遞命令來與之交互。
13.2 資源：
謝謝閱讀