【译】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）经过输入命令进行交互的程序。

相关资源：