最近入手 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 结合在一起，以用于本机操作系统功能，例如打开文件对话框，通知，图标等。
components.png
3.1 定义：
- API 应用程序接口描述了可供您使用库的一组功能。
- Chromium 由 Google 创建，这是 Google 浏览器 Chrome 使用的开源库。
- Node.js（或 Node）一种工具，用于在服务器上编写 JavaScript，访问文件系统和网络（您的计算机也是服务器！）。
3.2 资源：
4 情况如何？
使用 Electron 进行开发就像构建可以在其中无缝使用 Node
main.png
的网页，或者构建可以在其中构建 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，进程间通信。使用它在主进程和渲染器进程之间传递消息。
ipc
10.1 定义：
- IPC主进程和渲染器进程每个都有要使用的 IPC 模块。
11 放在一起
Electron 应用程序类似于节点应用程序，并使用一个 package.json 文件。您可以在其中定义哪个文件是您的主进程，从而定义 Electron 在哪里启动您的应用程序。然后，该主进程可以创建渲染器进程，您将使用 IPC 在两者之间传递消息。
app-files
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 资源：
谢谢阅读
网友评论