在 2013 年,Electron 最初的时候是属于 Github 开源代码编辑器 Atom 的一部分,在 2014 春季这两个项目相继开源。
历史里程碑如下
Electron 的优势
Electron 可以让 Web 应用程序运行在原生系统中,尽管在一些性能要求极其苛刻的场景下让人差强人意,但是对于普通的交互应用程序却完全可以融合,不仅开发效率高,还可以非常容易的让 Web 交互,应用到桌面端程序上面去。
它的主要优势有以下几点:
- 跨平台,一次书写运行在 Linux、Mac、Windows 上,降低开发成本。
- 具备浏览器不足的本地系统交互(编辑文件、启动网络服务)
- 强大的 npm 生态,提升开发效率
- 简单易学的 JavaScript 语言,基于 Web 的桌面开发,不用再去学习 C# 或者 Swift,降低学习成本。
应用前景
你想为你的 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 动画到可视化音频数据的内容。为了适配更多的小说网站,我们还需要实现插件机制,并提供插件商店。
其实学习 API 最快速的方式就是下载和阅读 应用程序,而本课只会把用到的给大家讲清楚,想要学习详细 API 的可以点我免费学习
里程碑截图
爬虫
先实现命令行的版本,再循序渐进的嵌入到 Electron 中,最初的想法可能只是一个小 demo
商店
实现插件商店,利用一些 CSS 小动画,增加趣味交互。
通知栏
将 Electron 应用,通过定位,修改成为通知栏小程序。
下载
通过 Canvas 实现下载的进度条
播放列表
载入本地音频文件,并整理成播放列表
可视化
最后将播放的音频,可视化到界面上去。
,请仔细阅读使用说明。
不仅 Electron
在后面的章节,你将会实践一下前端新技术,在此之前,你可以先了解一下它们,学习新技术,增强你的竞争力。
Svelte
是一款编译型的前端框架,类似于 Vue.js
的语法,只不过它零依赖,把所有的模板和逻辑都编译成字符串拼接与 js
文件,所以也被成为会消失的框架。看起来会类似于下面这样。
函数式编程
其实就是一切皆函数,同时函数可以作为参数,也可以做为返回值,直观的体验下会像下面这样。
Rxjs
是 ReactiveX
编程理念的 JavaScript
版本,同时也比较符合函数式编程的哲学,可以理解为函数式编程的升级版。 来自微软,ReactiveX
不是一个新东西,但用在前端领域绝对是一个伟大的尝试,它是一种针对异步数据流的编程,前端最多的就是异步。简单来说,它将一切数据,包括 HTTP 请求,DOM 事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能。
- 具备一定的 Nodejs 基础,至少做过一个完整项目。
- 具有一些 JavaScript 的基础
- 想要进军桌面端程序开发
- 想要实践重构、函数式编程与设计模式
本课程开发环境和特别说明
开发环境
- MacOS
- 开发工具:VSCode 1.25.1
- 本机 Node 版本:9.4.0
- Svelte 版本:2.9.7
特别说明
本实践最主要以 Mac 平台下的通知栏应用程序为例讲解 Electron 的实践,对于多平台需要自行对一些平台的方法做一些兼容,其实就是一些 API 一些差异而已,比如 Windows 没有 Dock 栏。通过 if 做一些判断即可。
特别注意的是你的原生依赖一定要跨平台,要不然是无法工作的,或者在某些平台下面使用替代的方案等,比如在 Mac 下面使用 mp3-concat
,而在 Windows 下面使用 。
关于 Electron 的资源
在 社区板块 可以找到所有关于 Electron 的资源,包括有用的工具,脚手架等等。