Electron 的本質
本文將簡明扼要地講解 Electron。
| Background | Development | Development Con't |
|---|---|---|
| What is Electron | Prereqs | Stay in touch |
| Why is this important | Two Processes | Put it all Together |
| How,even? | Main Process | Packaging |
| What is developing like? | Renderer Process | More resources |
| / | Think of it like this | / |
Electron 是什么？
Electron 是一個能讓你通過 JavaScript、HTML 和 CSS 構建桌面應用的 庫 。這些應用能打包到 Mac、Windows 和 Linux 電腦上運行，當然它們也能上架到 Mac 和 Windows 的 app stores。
Next：為什么它如此重要？
定義：
-
JavaScript、HTML 和 CSS都是 Web 語言，這就意味著它們都是組成網站的一部分，瀏覽器（如 Chrome）能將這些代碼轉為可視化圖像。
-
Electron 是一個庫：Electron 對底層代碼進行抽象和封裝，讓開發者能在此之上構建項目。
相關資源：
為什么它如此重要？
通常來說，桌面應用都需要用每個操作系統對應的原生語言進行開發。這意味著需要擁有3個團隊為這個應用編寫3個相應的版本。Electron 則允許你通過 web 語言編寫一次即可。
Next：它由什么組成？
定義：
-
原生（操作系統）語言，用于開發主流操作系統的應用的原生語言如下（大多數情況下）：Mac 對應 Objective C、Linux 對應 C、Windows 對應 C++。
它由什么組成？
Electron 結合了 Chromium 、 Node.js 和用于調用操作系統本地功能的 API（如打開文件窗口、通知、圖標等）。
Next：開發體驗如何？
定義：
-
API：應用程序接口描述了開發者對于此庫可調用功能。
-
Chromium：Google 創造的一個開源庫，并用于 Google 的瀏覽器 Chrome。
-
Node.js（Node）：一個用于在服務器運行 JavaScript 的工具，它擁有文件系統和網絡的權限（你的電腦也可以是一臺服務器！）。
相關資源：
開發體驗如何？
基于 Electron 的開發，就好像開發一個網頁一樣，而且能夠無縫地 使用 Node 。或者說：就好像構建一個 Node app，并通過 HTML 和 CSS 構建界面。另外，你只需為一個瀏覽器（ 最新的 Chrome ）進行設計。
Next：具備條件（開發方面）
定義：
-
使用內置的 Node：這還不是全部！除了 Node API，你還可以使用托管在 npm 上，超過 300,000 個的模塊。
-
一個瀏覽器：并非所有瀏覽器都提供同樣的樣式，因此 web 設計師和開發者時常不得不花費更多的精力去讓一個網站在不同的瀏覽器上看起來一致。
-
最新的Chrome：可使用超過 90% 的 ES2015 特性和其它很酷的特性（如 CSS 變量）。
相關資源：
-
Can I Use? （查看每個瀏覽器對特性的支持程度）
-
Updates to Chrome （Chromium 博客）
具備條件（開發方面）
因為 Electron 應用的兩個組成部分是網站（譯者注：UI）和 JavaScript（譯者注：功能），所以在基于 Electron 開發前，你需要擁有這兩方面的經驗。你可以搜索 HTML、CSS 和 JS 的教程，并在你的電腦上安裝 Node。
定義：
-
讓編程桌面程序成為現實：學會如何搭建一個網站和編寫 Node 應用并不是一朝一夕的事情，但你可以將下面的資源鏈接作為你的入門教程。
Next：兩個進程
相關資源：
-
Install Node （選擇長期支持版本（LTS））
-
NodeSchool Tutorials （試一試 learnyounode）
-
JS for Cats (by Max Ogden)
-
Learn to Code HTML & CSS (by Shay Howe)
-
CSS Tricks （學習 CSS 的最佳實踐和技巧）
-
Mozilla Developer Network （好比一本關于網站和 JavaScript 的字典）
兩個進程
Electron 有兩個種進程：主進程和渲染進程。有些模塊會工作在其中一個進程上，而有些會在兩個進程之上。主進程更多地充當幕后角色，而渲染進程則是應用的每個窗口（window）。
定義：
-
模塊：Electron 的 API 是根據它們的功能進行分組。例如： dialog 模塊擁有所有原生 dialog 的 API，如打開文件、保存文件和彈窗。
Next：主進程
相關資源：
主進程
主進程，通常是一個命名為 main.js 的文件，該文件是每個 Electron 應用的入口。它控制了應用的生命周期（從打開到關閉）。它能 調用原生元素 和創建新的（多個）渲染進程，而且整個 Node API 是內置其中的。
定義：
-
調用原生元素：打開 diglog 和其它操作系統交互均是資源密集型操作（譯者注：出于安全考慮，渲染進程是不能直接調用本地資源的），因此都需要在主進程完成（不涉及渲染進程）。
Next：渲染進程
相關資源：
渲染進程
渲染進程是應用的一個瀏覽器窗口。與主進程不同，它能存在多個（譯者注：一個 Electron 應用只能有一個主進程）并且是 相互獨立的 。它們也能 隱藏的 。它通常被命名為 index.html 。它們就像典型的 HTML 文件，但在 Electron 中，它們能獲取完整的 Node API 特性。因此，這也是它與其它瀏覽器不同的地方。
定義：
-
相互獨立：每個渲染進程都是獨立的，這意味著就算某個崩潰了，而不會影響其余的渲染進程。
-
隱藏的：你可以設置一個窗口是隱藏的，然后讓它只在背后執行代碼。
Next：把它想象成這樣
相關資源：
把它們想象成這樣
在 Chrome（或其它瀏覽器）中的每個標簽頁（tab） 和其內的頁面，就好比 Electron 中的一個單獨渲染進程。如果你關閉所有標簽頁，Chrome 依然存在，這好比 Electron 的主進程，而且你能打開一個新的窗口或關閉這個應用。
相關資源：
Next: 相互通訊
相互通訊
盡管主進程和渲染進程都有各自的任務，但它們之間也有需要協同完成的任務。因此它們之間需要通訊。 IPC 就為此而生，它提供了進程間的通訊。利用它能在主進程與渲染進程之間傳遞信息。
定義：
-
IPC：主進程和渲染進程都有一個 IPC 模塊。
Next：匯成一句話
匯成一句話
Electron 應用就像 Node 應用，它也使用一個 package.json 文件 。該文件能定義哪個文件作為主進程，并因此讓 Electron 知道從何啟動你的應用。然后主進程能創建渲染進程，并能使用 IPC 讓兩者間進行消息傳遞。
定義：
-
package.json 文件 ： 這是一個常見的 Node 應用文件，它包含了關于項目的元數據和一系列依賴。
Next：快速開始
快速開始
Electron Quick Start 代碼庫是一個 Electron 應用的基本骨架，擁有 package.json 、 main.js 和 index.html 。該項目是你了解和學習 Electron 的好開頭！當然，查看下面相關資源中的 Boilerplates，可在里面選擇適用你的模板。
Next: 打包
相關資源：
打包
一旦你的應用構建完成，你可以通過 命令行工具 electron-packager 對其打包成適用于 Mac、Windows 和 Linux 的應用。當然，你可以在 package.json 添加該命令行。查看下面的相關資源，學習如何將應用發布到 Mac 和 Windows 的應用商城。
Next：更多資源
定義：
-
命令行工具：這是一個在終端（terminal）中通過輸入命令進行交互的程序。
相關資源：
更多資源
這里提供更多的相關資料，以便你更深入全面地學習 Electron。
Resources:
相關資源：
來自：https://segmentfault.com/a/1190000007503495