Electron入门资源

Electron入门资源

白话讲解Electron和一些资源

什么是 Electron?

Electron是一个基于JavaScript, HTML 和 CSS的开发库，可以用来编写桌面程序。这些应用程序可以被打包运行在Mac, Windows 和 Linux电脑上，而且可以被上传到Mac和Windows的AppStore上。

定义:

JavaScript, HTML and CSS 是网页语言, 意味着它们可以编写网站，类似Chrome的浏览器知道如何把这些代码转换成人们看到的可使画面。

Electron 是一个开发库 Electron 是一套可重用的开发库，不需要重新造轮子。你可以用它来开发应用程序。

资源:

使用 Electron 编写的程序列表

Electron API Demos (看看那些东西你可以使用)

为什么是它?

通常每个操作系统的桌面应用程序都是用原生代码开发。这就是说你的应用程序要有三个开发团队。Electron 让你编写一次而且是使用网页语言。

资源:

操作系统原生开发语言 大部分操作系统原生开发语言包括如下: Mac, Objective C; Linux, C; Windows, C++.

还有更多嘛?

Electron 组合了Chromium和Node.js，还有一些原生操作系统功能，例如：打开文件对话框，通知，icons等等

定义:

API API 描述了一套函数，你可以在开发库中看到它们。

Chromium Google开发的，是一个开放源代码的程序库，用来构造Google的浏览器 Chrome。

Node.js (或叫 Node) 用JavaScript构造的在服务器端使用的工具，可以访问文件系统和网络(当然，你的PC也是一台服务器!)。

资源:

Node.js

Chromium

Electron 博客文章: 使用Node来开发 (deep dive)

Electron 版本号

使用它的感觉?

使用 Electron 来开发就像编写一个网站，你可以平滑的使用Node，或者就像编写Node程序，用 HTML 和 CSS 来编写界面UI。并且你只需要最新版的Chrome浏览器来进行开发。

定义:

使用Node 还有很多东西! 除了使用的Node全部API，你可以使用npm中的超过300,000多个模块，npm是一种Node包管理器。

同一个浏览器 很多浏览器有一些细微的差别, 网站设计师和开发者通常需要弥合这些差异, 使在不同的浏览器上看起来是一样的。

最新版 Chrome 实现了90%的ES2015标准, 更新到最新的JavaScript, 有一些很库得特性，例如 CSS 变量.

资源:

Can I Use? (see what each browser supports)

Updates to Chrome (Chromium Blog)

CSS Variables

准备一下

既然 Electron 的两个主要组成部分是网页和JavaScript, 开始编制程序前，你最好有一些这两个得经验。来看看一些HTML, CSS和JS的教程，然后开始安装 Node 到你的电脑上。

定义:

让我们开始吧, 学习网页知识和编写Node程序不需要通宵达旦，真的，你只需要从下面的链接开始。

资源:

Install Node (chose the LTS version)

NodeSchool Tutorials (try learnyounode)

JS for Cats (by Max Ogden)

Learn to Code HTML & CSS (by Shay Howe)

CSS Tricks (learn CSS best practices and tips)

Mozilla Developer Network (like a dictionary for websites and JavaScript)

两个进程

Electron 有两种类型的进程：主进程和渲染进程。有些模块工作在单个进程上有些模块工作在两个进程上。主进程主要工作在后台上面，你的APP的每个窗口实际上代表了渲染进程。

定义:

模块 Electron的API根据他们的功能被组合在了一起。例如：

dialog

模块定义了所有关于原生对话框的API，打开文件对话框，保存文件对话框，警告窗口。

资源:

Electron APIs 列表

主进程

主进程，通常是文件

main.js

, 是每一个Electron程序的入口。它定义了程序的生命周期，从打开到关闭。它调用原生的控件和创建程序中的每一个渲染进程。而且全部Node API集成在里面。

定义:

调用原生控件 打开文件对话框和其他原生控件与操作系统进程通信的操作比较消耗资源，所以这些都在主进程中执行，不需要打断渲染进程的执行。

资源:

Electron APIs 列表

渲染进程

渲染进程就是你的程序中的浏览器窗口。跟主进程不同，他们有很多个，而且相互之间是独立的。他们也可以被隐藏起来。通常渲染进程有一个命名为

index.html

。 他不像一个典型的HTML文件，但他可以访问全部的Node API，不像真正的网页浏览器那样。

定义:

相互之间独立 每个渲染进程是一个独立的进程，意味着即使一个崩溃了而不会影响其他。

隐藏 你可以把窗口隐藏起来，使用它就像在后台一样，执行一系列操作。

资源:

Electron APIs 列表

想象一下Electron程序的逻辑

在Chrome或其他浏览器中，每一个tab和他的网页内容就像Electron中的一个渲染进程。如果一个关掉了所有的tab，Chrome仍然在那里没有退出，就像Electron中的主进程一样，你可以继续操作打开新的页面或者退出程序。

资源:

主进程和渲染进程的区别

主进程和渲染进程如何保持联系

主进程和渲染进程之间需要保持通信，他们共同完成不同的任务。这里他们使用了IPC，进程间通信，使用它来在主进程和渲染进程之间交换信息。

定义:

IPC 主进程和渲染进程都有相应的IPC模块。

把他们组合在一起

Electron程序与Node程序有些类似，都使用

package.json

文件。这个文件定义了那个是程序的主进程，以及程序的入口点。 然后主进程创建渲染进程，你可以使用IPC在他们之间交换信息。

定义:

package.json

文件 这个是Node程序中的常用文件，包括了项目的信息和一系列的依赖项。

程序模板

Electron 程序模板仓库是一个Electron程序的骨架，包括

package.json

,

main.js

和

index.html

文件，你可以仔细查看一下，这是一个编写程序开始的地方! 同时，你可以选择下载查看一些模板，框架组成的程序样板。

资源:

Electron 程序模板

各种精巧的样板

打包

当你的程序已经编写完成以后，你可以使用工具程序

electron-packager

来打包，包括 Mac, Windows 或 Linux 版本。把这个工具加入到

package.json

中，下载查看下面的资源关于如何上传到 Mac 和 Windows app stores 中。

定义:

command-line tool This is a program that you interact with by passing commands to it in your terminal.

资源:

electron-packager

Electron API Demos packaging scripts

Mac App Store Electron Guide

Windows App Store Electron Guide

更多资源

在这里概念上已经足够了，需要更多的了解请看下面的一些资源。

资源:

Full Electron docs

Awesome Electron: tools, videos, components, meetups

Spectron (Electron testing library)

Devtron (Inspect your Electron app)