【譯】Electron 的本質

時間 2019-11-06

標籤 electron 本質简体版

原文原文鏈接

本文翻譯自 http://jlord.us/essential-ele... css

本文將簡明扼要地講解 Electron。html

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 Store。node

Next：爲何它如此重要？git

定義：github

JavaScript、HTML 和 CSS 都是 Web 語言，它們是組成網站的一部分，瀏覽器（如 Chrome）懂得如何將這些代碼轉爲可視化圖像。
Electron 是一個庫：Electron 對底層代碼進行抽象和封裝，讓開發者能在此之上構建項目。

相關資源：
Apps built on Electron
Electron API Demos（看看你能經過 Electron 實現什麼功能）web

爲何它如此重要？

一般來講，每一個操做系統的桌面應用都由各自的原生語言進行編寫，這意味着須要 3 個團隊分別爲該應用編寫相應版本。而 Electron 則容許你用 Web 語言編寫一次便可。npm

Next：它由什麼組成？編程

定義：json

原生（操做系統）語言：用於開發主流操做系統應用的原生語言的對應關係（大多數狀況下）：Mac 對應 Objective C、Linux 對應 C、Windows 對應 C++。

它由什麼組成？

Electron 結合了 Chromium、Node.js 和用於調用操做系統本地功能的 API（如打開文件窗口、通知、圖標等）。windows

Next：開發體驗如何？

定義：

API：應用程序接口（Application Program Interface）描述了庫提供的函數集。
Chromium：Google 創造的一個開源庫，並用於 Google 的瀏覽器 Chrome。
Node.js（Node）：一個在服務器運行 JavaScript 的運行時（runtime），它擁有訪問文件系統和網絡權限（你的電腦也能夠是一臺服務器！）。

相關資源：

Node.js
Chromium
Electron blog post: Using Node as a Library （深刻了解）
Electron versioning

開發體驗如何？

基於 Electron 的開發就像在開發網頁，並且可以無縫地 使用 Node。或者說：在構建一個 Node 應用的同時，經過 HTML 和 CSS 構建界面。另外，你只需爲一個瀏覽器（最新的 Chrome）進行設計（即無需考慮兼容性等）。

Next：具有條件（開發方面）

定義：

使用 Node：這還不是所有！除了完整的 Node API，你還可使用託管在 npm 上超過 350,000 個的模塊。
一個瀏覽器：並不是全部瀏覽器都提供一致的樣式，Web 設計師和開發者常常所以而不得不花費更多的精力，讓網站在不一樣瀏覽器上表現一致。
最新的 Chrome：可以使用超過 90% 的 ES2015 特性和其它很酷的特性（如 CSS 變量）。

相關資源：

Can I Use?（查看每一個瀏覽器對特性的支持程度）
Updates to Chrome（Chromium 博客）
CSS Variables

具有條件（開發方面）

由於 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 有兩種進程：『主進程』和『渲染進程』。部分模塊只能在二者之一上運行，而有些則無限制。主進程更多地充當幕後角色，而渲染進程則是應用程序的各個窗口。

定義：

模塊：Electron 的 API 是根據它們的用途進行分組。例如：dialog 模塊擁有全部原生 dialog 的 API，如打開文件、保存文件和警告等彈窗。
Next：主進程

相關資源：

Electron APIs List

主進程

主進程，一般是一個命名爲 main.js 的文件，該文件是每一個 Electron 應用的入口。它控制了應用的生命週期（從打開到關閉）。它既能調用原生元素，也能建立新的（多個）渲染進程。另外，Node API 是內置其中的。

定義：

調用原生元素：打開 diglog 和其它操做系統的交互均是資源密集型操做（注：出於安全考慮，渲染進程是不能直接訪問本地資源的），所以都須要在主進程完成。

Next：渲染進程

相關資源：

Electron APIs List

渲染進程

渲染進程是應用的一個瀏覽器窗口。與主進程不一樣，它能存在多個（注：一個 Electron 應用只能存在一個主進程）而且相互獨立（它也能是隱藏的）。主窗口一般被命名爲 index.html。它們就像典型的 HTML 文件，但 Electron 賦予了它們完整的 Node API。所以，這也是它與瀏覽器的區別。

定義：

相互獨立：每一個渲染進程都是獨立的，這意味着某個渲染進程的崩潰，也不會影響其他渲染進程。
隱藏：可隱藏窗口，而後讓其在背後運行代碼。

Next：把它想象成這樣

相關資源：

Electron APIs List

把它們想象成這樣

Chrome（或其餘瀏覽器）的每一個標籤頁（tab）及其頁面，就比如 Electron 中的一個單獨渲染進程。即便關閉全部標籤頁，Chrome 依然存在。這比如 Electron 的主進程，能打開新的窗口或關閉這個應用。

相關資源：

Differences between Main and Renderer Process

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 的 App Store。

Next：更多資源

定義：

命令行工具：在終端（terminal）經過輸入命令進行交互的程序。

相關資源：