Electron 的起源

Electron 是由 Github 开发，用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。 Electron 通过将 Chromium 和 Nodejs 合并到同一个运行时环境中，来实现访问网络与本地文件系统的能力。

在 2013 年，Electron 最初的时候是属于 Github 开源代码编辑器 Atom 的一部分，在 2014 春季这两个项目相继开源。

历史里程碑如下

Electron 的优势

Electron 可以让 Web 应用程序运行在原生系统中，尽管在一些性能要求极其苛刻的场景下让人差强人意，但是对于普通的交互应用程序却完全可以融合，不仅开发效率高，还可以非常容易的让 Web 交互，应用到桌面端程序上面去。

它的主要优势有以下几点：

• 跨平台，一次书写运行在 Linux、Mac、Windows 上，降低开发成本。
• 具备浏览器不足的本地系统交互（编辑文件、启动网络服务）
• 强大的 npm 生态，提升开发效率
• 简单易学的 JavaScript 语言，基于 Web 的桌面开发，不用再去学习 C# 或者 Swift，降低学习成本。
• 苹果商店和微软商店都支持提交 Electron 应用程序。

应用前景

你想为你的 Node.js 应用、Web SPA 应用提供图形界面，Electron 都可以实现。

有一些硬件开发的同学把 Electron 应用到独立终端设备上面，比如说触屏打印等等之类，其实连接硬件设备也可以做到，不过是通过 c 或者 c++ 扩展的形式进行二进制通信而已，一般来说需要 c 或 c++ 的经验才能做到，当然假如能找到别人封装好的 npm 包，那么就可以非常省心的完成你想要的功能，个别依赖时候在编译时有些小问题，不过通过搜索 issus 可以解决大部分问题，所以也无需过多担心。

在硬件越来越强大的未来，性能终将不是问题，使用 Web 技术构建应用，不仅可以方便的实现各种动效，还有快速的开发效率，与低成本，对于一个现代企业来说，开发效率与快速更新迭代才是一个企业产品的根本。

尤其，近些年，基于 Electron 的应用程序越来越多，最熟悉的可能就是你每天在用的 VSCode、区块链的本地服务客户端 Ganache、 老虎证券的桌面客户端、SS 客户端 electron-ssr、图片灵感管理软件 Eagle、 微软的团队协助通讯工具、Slack 客户端、Twitter 客户端，H5 游戏白鹭引擎的 IDE 以及生态圈软件等等。

更多基于 Electron 的应用，可到访问 Electron App Store 查看。

本课程你能学到什么？

黑夜之中的 Electron 飞行法则，本达人课将教您最正确的 Electron 飞行姿势。点点滴滴带你完成一个懒人听书应用程序，从此看小说再也不用眼睛了。

整体来看，课程主要分为三部分：

• 第一部分：（第 01-08 课），带大这实现一个 Nodejs 命令行版本的爬虫，爬取所需的源数据。
• 第二部分：（第 09-19 课），使用 Electron 实现了爬取、转换、播放一体化的应用。
• 第三部分：（第 19 及以后），通过 Canvas 可视化音频数据。

本课程所覆盖到的技术关键词、核心内容，如下图所示：

学习完本课程你将学会使用 Electron 创建一个爬取小说网站数据源，并通过 Text To Speech 智能 AI 服务，将文字转换成语音，并将分散的语音合并，之后再通过 Electron 读取本地音频文件，并播放出来，当然为了让音乐播放器更加的契合播放器的功能，还会有如何一步步从创建 Canvas 动画到可视化音频数据的内容。为了适配更多的小说网站，我们还需要实现插件机制，并提供插件商店。

如何快速的学习 Electron API？

其实学习 API 最快速的方式就是下载和阅读 API demo 应用程序，而本课只会把用到的给大家讲清楚，想要学习详细 API 的可以点我免费学习

里程碑截图

爬虫

先实现命令行的版本，再循序渐进的嵌入到 Electron 中，最初的想法可能只是一个小 demo

商店

实现插件商店，利用一些 CSS 小动画，增加趣味交互。

通知栏

将 Electron 应用，通过定位，修改成为通知栏小程序。

下载

通过 Canvas 实现下载的进度条

播放列表

 载入本地音频文件，并整理成播放列表

可视化

最后将播放的音频，可视化到界面上去。

下载体验连接，请仔细阅读使用说明。

不仅 Electron

在后面的章节，你将会实践一下前端新技术，在此之前，你可以先了解一下它们，学习新技术，增强你的竞争力。

Svelte

Svelte 是一款编译型的前端框架，类似于 Vue.js 的语法，只不过它零依赖，把所有的模板和逻辑都编译成字符串拼接与 js 文件，所以也被成为会消失的框架。看起来会类似于下面这样。

import App from './App.svelte'
const app = new App({
  target: document.querySelector('#app'),
  data: { name: 'world' }
})
app.set({ name: 'everybody' })
app.destroy()

函数式编程

其实就是一切皆函数，同时函数可以作为参数，也可以做为返回值，直观的体验下会像下面这样。

const getHTML = (url, charset) =>
  pipeP(
    p(url),
    getBody,
    decodeHTML(charset)
  )
getHTML('https://xxxxx.com', 'utf-8')

Rxjs

Rxjs 是 ReactiveX 编程理念的 JavaScript 版本，同时也比较符合函数式编程的哲学，可以理解为函数式编程的升级版。ReactiveX 来自微软，ReactiveX 不是一个新东西，但用在前端领域绝对是一个伟大的尝试，它是一种针对异步数据流的编程，前端最多的就是异步。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。

const getSelector = (url: string, charset?: string) =>
  request(url).pipe(
    map(handleFollowRedirect),
    concatAll(),
    pluck('body'),
    map(decodeCharset(charset)),
    map(toSelector),
    catchError(err => {
      log({ type: 'crawl', step: 'error', message: err.message })
      return of(err)
    })
  )

适宜人群

• 具备一定的 Nodejs 基础，至少做过一个完整项目。
• 具有一些 JavaScript 的基础
• 想要进军桌面端程序开发
• 想要实践重构、函数式编程与设计模式

本课程开发环境和特别说明

开发环境

• MacOS
• 开发工具：VSCode 1.25.1
• 本机 Node 版本：9.4.0
• Electron 版本：2.0.5
• Svelte 版本：2.9.7

特别说明

本实践最主要以 Mac 平台下的通知栏应用程序为例讲解 Electron 的实践，对于多平台需要自行对一些平台的方法做一些兼容，其实就是一些 API 一些差异而已，比如 Windows 没有 Dock 栏。通过 if 做一些判断即可。

 特别注意的是你的原生依赖一定要跨平台，要不然是无法工作的，或者在某些平台下面使用替代的方案等，比如在 Mac 下面使用 mp3-concat ，而在 Windows 下面使用 ffmpeg 。

关于 Electron 的资源

在 社区板块 可以找到所有关于 Electron 的资源，包括有用的工具，脚手架等等。