Githubnode
官方地址webpack
表明做:c++
Atom - Code editor. Github开源的代码编辑器,Electron起源地git
Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDEgithub
Hyper - Terminal. 3万多星的命令行窗口,慌了!web
其余shell
本章主要内容数据库
- 理解Electron是什么
- 学习Electron基于什么技术
- 了解使用Electron和传统Web应用程序有什么不一样
- 构建Electron应用
- 在生产中使用Electron构建现实应用
网页的一大特点就是无处不在, 这是一个使人惊叹的平台,用它所建立的协做平台,能够被多种类型的设备所访问,不管设备运行在何种操做系统上。换句话说,网页只能运行在浏览器中,没法直接运行在操做系统中,所以网页应用程序也就没法访问文件操做系统。它们也没法执行非JavaScript编写的代码,他们没法调用桌面应用程序可使用的众多操做系统接口。还有,当大多数网页应用程序没有可靠的互联网链接时,也就没法使用了。npm
很长一段时间,相对于网页开发,构建桌面程序须要适应彻底不一样的技能栈。 咱们中的许多人没有足够的耐心为学习新语言和框架所需的曲线来进行长时间的学习。使用Electron,您可使用做为Web开发人员的现有技能来构建具备原生桌面应用许多功能的应用程序。编程
Electron是一个实时框架,容许您使用HTML5,CSS和JavaScript建立桌面应用程序。这是一个由GitHub的工程师Cheng Zhao(又名zcbenz)发起的开源项目。之前称为Atom Shell,Electron做为构建Github上可编程的文本编辑器Atom的框架而被开发出来。您可能据说过或使用过Apache Cordova或Adobe PhoneGap来构建包含在本机shell中的Web应用程序 - 用于iOS,Android和Windows Phone等移动操做系统。若是是这样,那么用Electron构建桌面应用程序会有所帮助。
Electron容许您使用已知的Web技术来构建桌面应用程序。在本书中,您将学习如何构建使用Windows,macOS和Linux上的本机操做系统API的应用程序。
Electron将Chromium和Node.js合并到同一个运行环境中。它容许开发人员使用Web页面构建GUI,并经过与操做系统无关的API访问Windows,macOS和Linux上的本机操做系统功能。
Chromium和Node自己就是广受欢迎的应用程序平台,它们都被独立用于建立雄心勃勃的应用程序。 Electron将两个平台结合在一块儿,容许您使用JavaScript构建一个全新的应用程序类。您能够在浏览器中执行任何操做,您Electron和Node中能作的任何事,您在Electron中一样可使用。 使人兴奋的部分是您能够将两种技术结合在一块儿。能够构建仅使用一个技术没法实现可是利用这两个平台的优势能够生成的应用程序,这就是本书的所有内容。 Electron不只是构建功能相似原生的Web应用程序的绝佳选择桌面应用技术;它也是围绕Node应用程序构建GUI的绝佳选择,不然将限制在命令行界面。见图1.1。
假设您要构建一个容许您在计算机上查看和编辑图像文件夹的应用程序。传统的浏览器应用程序没法访问文件系统。他们没法访问照片目录,加载目录中的任何照片,或保存您在应用程序中所作的任何更改。使用Node,您能够实现全部这些功能,可是您没法提供GUI,这会使您的应用程序对普通用户难以使用。经过将浏览器环境与Node相结合,您可使用Electron建立一个能够打开和编辑图片的应用程序而且提供用户界面给你的用户。见图1.2。
Electron不是一个复杂的框架 - 它是一个简单的运行时框架。与您从命令行使用Node的方式相似,您可使用Electron命令行工具运行程序。您无需学习许多约定,便可开始使用,而且您能够自由地构建应用程序,可是我会在本书中提供建议和最佳实践。
图1.1
LevelUI是一个使用Electron构建的Node的LevelUp数据库.你不能经过传统的浏览器Web技术来构建,由于它不能访问用户计算机上的本地数据库,也不能使用LevelUI库,由于它是一个编译过的c++模块,只有Node能够可是浏览器不可使用。
图1.2 Electron结合网页浏览组件Chromium与Node的底层系统访问。
Chromium是谷歌的Chrome web浏览器的开源版本。它共享许多相同的代码和特性,但有一些细微的差异和不一样的受权。内容模块是核心代码,容许Chromium在独立进程中呈现web页面,并使用GPU加速。它包括Blink渲染引擎和V8 JavaScript引擎。内容模块使web浏览器成为web浏览器。它处理从web服务器获取和呈现HTML、加载任何引用的CSS和JavaScript、相应地设计页面样式并执行JavaScript。
考虑Chromium最简单的方法是考虑它没有作什么。内容模块不支持Chrome扩展。它不处理与谷歌的云服务同步书签和历史记录。它不能安全地存储您保存的密码,也不能在您访问某个页面时自动为您填写密码。它不会检测一个页面是否用另外一种语言编写,而后调用谷歌的翻译服务寻求帮助。内容模块只包含呈现HTML、CSS和JavaScript所需的核心技术。
在JavaScript存在的前15年里,在传统上是孤立于web浏览器。对JavaScript运行在服务端没有太多的支持。项目是存在的,但历来没有获得任何推动。Node.js项目最初是发布于2009年,做为一个使用JavaScript用于开发开源、运行时跨平台的服务器端应用程序。它使用了谷歌的开源V8引擎来解释JavaScript,用于访问文件系统、建立服务器和从外部模块加载代码的接口。
在过去的几年里,Node受到了极大的关注和欢迎而且用途普遍,从编写web服务器到控制机器人,还有?你猜对了,构建桌面应用程序。Node附带了一个名为npm的包管理器,这使得在多达25万个库的注册表寻找依赖变得容易。
Electron被大大小小的公司用于构建桌面应用程序。如前所述,它最初是做为GitHub的Atom
文本编辑器的基础开发的。Atom须要访问文件系统来履行其做为文本编辑器的职责。一样,其余公司也将Electron技术做为文本编辑应用程序的基础。Facebook发布了一个基于Atom的Nuclide包,它将文本编辑器变成了一个完整的集成开发环境(IDE),并提供了一流的支持,用于React Native、Hack和Flow项目。微软的跨平台Visual Studio Code
编辑器也使用了Electron,它运行在macOS、Windows和Linux上。
您可使用electronic构建更多的文本编辑器。流行的消息传递应用程序-Slack,在其Windows和Linux版本中使用了Electron。Nylas为其N1电子邮件客户端使用了Electron,在全部主要平台上的此客户端看起来都很漂亮。它还支持JavaScript插件架构,容许第三方开发人员添加特性和扩展UI。
Particle-生产用于建立定制硬件的开发工具包,它的IDE使用了Electron,该IDE容许用户编写代码,并经过蜂窝网络或Wi-Fi网络将代码部署到硬件设备上。使用Mapbox Studio,用户能够导入本地存储的数据,并在本身的计算机上进行处理,而无需经过internet将数据发送到Mapbox的服务器。其结果是更快更好的体验,容许设计师轻松建立自定义映射。
Dat是一个针对分散数据用于共享、同步和版本控制的开源工具。这个由捐献资助的项目由三个web开发人员组成。尽管是一个相对较小的团队,Dat仍是为该项目发布了一个使用Electron构建的桌面应用程序。2015年,wiredcraft(一家软件咨询公司)利用Electron开发了一款离线友好的Windows应用程序,用于收集和纠正缅甸的选民登记信息。该公司须要一个可以存储收集到的数据的应用程序 而后在设备链接到网络时发布它。该公司选择了Electron而不是c++构建它的方案,由于它容许Wiredcraft利用其现有的HTML、CSS和JavaScript功能,而不是从新学习这些技能以适应不一样的生态系统。
Javascript的建立者Brendan Eich开发了一款专一于速度和安全性的新浏览器braveich,它自己就是创建在Electron之上的,参见图1.3。没错,您甚至可使用web技术来构建web浏览器。
图1.3 Brave是一个构建在Electron之上的完整web浏览器。
基于electronic构建的新项目天天都在发布,由于公司和开发人员看到了构建产品的价值,这些产品使用桌面应用程序提供的功能,同时仍然保持web固有的平台能力。在本书的最后,您将使用现有的web开发技能,并将其应用于建立在传统浏览器环境中不可能建立的新应用程序。
让咱们从你不须要知道的开始。本书是为web开发人员编写的,他们但愿使用现有的技能来建立在传统浏览器环境中不可能建立的桌面应用程序。从这本书中获取有价值的构建桌面应用程序的知识,你不须要任何经验积累。
也就是说,您应该可以轻松地编写JavaScript、HTML和CSS,可是您不须要成为专家。在本书中,我不会涉及变量或条件,可是若是您熟悉JavaScript的通常语言特性,那么,你可能就具有了必要的技能。若是您熟悉Node中的一些约定和模式,这也颇有帮助。如模块系统如何工做。咱们将在遇到这些概念时探讨它们。
当您为web浏览器编写应用程序时,您必须在选择使用什么技术方面保持保守,在如何编写代码方面保持谨慎。这是由于,与许多服务器端状况不一样,您编写的代码将在其余人的计算机上执行。
您的用户可能正在使用最新版本的现代浏览器,如Chrome或Firefox,也可能正在使用过期版本的Internet Explorer。在何处呈现和执行代码,您几乎没有发言权。你必须作好一切准备。
当您编写代码时,一般必须考虑到当今广泛使用的绝大多数浏览器的版本中支持的最普遍特性。即便问题存在更好、更有效或更吸引人的解决方案,您也可能没法使用该方法。当您决定使用现代浏览器特性时,您一般须要实现一个应急计划,包括优雅的回退、特性检测和渐进加强,这给您的开发工做流增长了不小的阻力。
当您使用Electron构建应用程序时,您是在打包特定版本的Chromium和Node。所以,您能够依赖这些版本中可用的任何特性。您没必要关心其余浏览器及其版本支持哪些特性。例如,若是你构建的应用程序的Chromium版本支持Service Worker API,那么您能够放心地在应用程序中使用该API。参见图1.4。
图1.4 在基于浏览器的web应用程序中,因为Fetch API提供了不一致的支持,所以依赖它多是不实际的。可是在您的Electron应用程序中,您将当前稳定的Chromium构建与对Fetch API的彻底支持捆绑在一块儿。
Electron容许您使用最前沿的web平台特性,由于它包含了相对较新的Chromium版本。Electron中Chromium的版本一般会在Chromium发行新的稳定版后的一到两周以内更新,具体时间根据升级所需的工做量而定。为了使版本更加稳定,Electron一般会在Node.js发布了新版本的一个月以后再更新。在Electron里,Node.js和Chromium共享同一个V8实例--一般是Chromium在用的版本。大多数状况下这能正常工做但有时候仍是须要为Node.js打补丁。
若是您像我同样,那么构建web应用程序的经验可能比桌面应用程序丰富得多。您但愿将建立桌面应用程序的能力添加到您的工具集中,可是您没有足够的时间来学习一种新的编程语言,并且可能还须要学习一个新的框架。
学习一门新的语言或框架是一项重大的投资。做为一名web开发人员,您习惯于编写对全部用户都一样有效的应用程序—即便这意味着要与特定浏览器或屏幕大小的特性做斗争。可是,当您考虑构建传统的桌面应用程序时,您谈论的不只仅是学习一种语言和框架。若是您想要针对Windows、macOS和Linux,还须要学习至少三种不一样的语言和框架。
我的和小型团队可使用Electron在他们没法提供桌面应用程序的状况下提供桌面应用程序。对于一个小团队来讲,雇佣一个精通每一个平台构建应用程序的开发人员可能不是一个选择。electronic容许您使用现有的技能集并将应用程序部署到全部主要平台。使用Electron,您能够支持多个操做系统,而不须要像一般支持多个浏览器那样作那么多工做。
Electron应用程序相似于任何其余桌面应用程序。它们与您的其余本机应用程序一块儿位于文件系统中。它们位于macOS的dock中,或者Windows和Linux的任务栏中,其余本地应用程序都挂在那里。Electron应用程序能够触发本机打开和保存文件对话框。能够将这些对话框配置为容许操做系统只选择具备特定文件扩展名的文件、整个目录或多个文件。你能够拖拽文件到Electron应用程序并触发不一样的操做。
此外,Electron应用程序能够像其余应用程序同样设置自定义应用程序菜单。参见图1.5。它们能够建立自定义上下文菜单,当用户从应用程序中右键单击时,这些菜单就会当即生效。您可使用Chromium的通知API来触发系统级的通知。它们还能够从系统剪贴板中读取数据,并将文本、图像和其余媒体写入剪贴板。
图1.5 Electron容许您建立自定义应用程序菜单
与传统的web应用程序不一样,Electron应用程序并不局限于浏览器。您能够在菜单栏或系统托盘中建立应用程序。参见图1.6。您甚至能够注册全局快捷方式来触发这些应用程序或它们的任何功能,只需在操做系统中的任何位置进行特殊的击键。
图1.6 您能够在操做系统的菜单栏或系统托盘中建立一个应用程序。
Electron应用程序能够访问系统级的信息,好比计算机是处于电池供电状态仍是正在充电。若是有必要,它们还可让操做系统保持亮屏,防止它进入节电模式。
web是历史上最大的分布式应用程序平台。它是如此广泛,以致于web开发人员将许多相关的头痛视为理所固然。构建web应用程序须要精心设计服务器端之间的通讯应用程序和潜在的数千个客户端应用程序实例。客户端代码运行在用户的web浏览器中——远离服务器。
客户机中发生的任何事情对于浏览器会话都是惟一的,除非更改被发送回服务器。一样,若是您的端发生了任何更改,您必须等到客户机发送另外一个HTTP请求更新;或者,若是在客户机和服务器上都实现了该功能,则能够经过WebSockets发送更新。
桌面应用程序具备更普遍的功能,而且因为用户显式地下载、安装和打开应用程序,因此对它们所能作的限制更少。然而,当你在浏览网页时,您正在执行没有选择安装在计算机上的代码。所以,web应用程序在它们被容许作的事情上有不少限制。
当浏览器访问web上的一个页面时,它会很高兴的加载全部HTML代码文档,以及这些代码添加的任何附加依赖项,而后开始执行代码。多年来,浏览器厂商对浏览器的功能进行了限制,以防止恶意代码对用户或internet上的其余站点形成伤害。
我不是个坏人!可是为了便于讨论,假如我是。假设我运行一个流行的站点,它销售手工制做的小部件。有一天,一个竞争对手忽然出如今个人雷达上,他以一样高的折扣出售而且优良的小部件。个人网站一样仍是受欢迎的,可是这个新的挑战者难以睡眠。做为一个坏人,我决定将JavaScript添加到个人网站中,该网站每隔几毫秒就向竞争对手的网站发出一次AJAX请求,但愿访问我网站的数千名访问者可以下载这段代码,从而有效地击溃竞争对手的服务器,使其没法处理任何合法的请求。这也会下降访问者在我网站上的体验,但这是我愿意付出的代价让竞争对手的网站变得崩溃。
尽管个人计划具备恶魔般的性质,但它行不通。现代浏览器限制客户端代码向第三方服务器发出请求,除非该服务器明确声明容许此类请求。
通常来讲,大多数网站不会这样作。若是您想向第三方服务器发送请求,那么您必须先向您本身的服务器发出请求,让它与第三方,并将结果转发给客户端。如前面的示例描述,这增长了个人服务器瓶颈对那些成千上万的请求,这将使我推出这类攻击变得不可行。很是简单的原理,对于个人竞争对手只需屏蔽我单一的服务器地址而不是来个人网站的成千上万游客的IPs。
浏览器还严格限制客户端代码能够访问什么以及它能够作什么。全部这些都为用户提供了更安全、更安全、最终更好的体验。这一切都是很是实用的,也是Web成为这样一个世界的用户平台缘由之一,很是棒的,平易近人。
也就是说,全部这些有用且重要的安全限制都严重限制了使用web技术构建应用程序的类型。用户显式地下载和安装Electron应用程序,就像任何其余本机应用程序同样。您能够像任何本机桌面应用程序或服务器端Node进程那样自由地访问文件系统。您还能够自由地向第三方api发出请求,而不须要通过Node服务器,由于您能够访问与任何其余Node进程相同的特权和功能。参见图1.7。
图1.7 Electron应用程序可使用Node.js第三方api发出请求。
除了授予对文件系统的访问权和启动web服务器的能力以外,Node.js还使用了基于CommonJS模块规范的系统。从最先的版本开始,Node就支持将代码分解为多个模块,并在给定文件中显式地包含所需的模块。
为浏览器打包大量JavaScript代码并不老是那么容易。对于少许代码,您能够将其包含在匹配的一对<script>
开始和结束。 对于较大的代码块,可使用src
属性引用外部JavaScript文件。咱们欢迎您尽量多地这样作,可是您必须付出性能代价,由于浏览器会发出一个额外的请求来获取每一个外部资产。
欢迎您使用构建工具,如webpack
或Browserify
(若是您愿意),但在Electron应用程序中一般没有必要使用它,欢迎您使用构建工具,如webpack或Browserify(若是您愿意),可是在Electron应用程序中一般没有必要使用它,由于全部Node的全局属性(例如require
、module
和export
)均可以在浏览器内容中使用。您能够在传统上认为是客户端的地方使用Node的模块系统,而不须要向应用程序添加构建过程。
您能够从Electron应用程序的浏览器上下文访问Node的全部api。除了利用Node的模块系统以外,您还可使用带有本地扩展的已编译模块、访问文件系统,以及作一些一般在浏览器环境中不支持的其余事情。
任何曾经在横贯大陆的航班上使用过计算机的人均可以证实,大多数基于浏览器的web应用程序在没有链接到internet的状况下都不太好。甚至使用任何流行的客户端框架的高级web应用程序 与Ember、React或Angular同样,一般须要链接到远程服务器来进行数据交换。
Electron应用程序已经下载到用户的计算机上。一般,它们加载本地存储的HTML文件。在那里,若是链接可用,他们能够请求远程数据和页面。Electron甚至提供了api,容许您检测链接是否可用。使用Electron构建离线应用程序不须要特殊的清单或前沿技术—这是默认状态,除非应用程序显式地从internet请求某些东西。除非特殊状况(例如,您正在构建一个聊天客户机),不然Electron应用程序能够像其余应用程序同样离线工做。
Electron由主进程和渲染器进程所组成。每一个进程在应用程序中扮演不一样的角色,Electron包含不一样的模块来帮助您构建应用程序。某些模块,例如从系统剪贴板读写的能力,在这两种类型的进程中均可用。其余的,好比访问操做系统接口的能力,仅限于主进程。参见图1.8。
图1.8 Electron多进程框架
Electron运行package
的main
脚本的进程被称为主进程。 这个文件能够命名任何您想要的名称,只要它正确地包含在package.json中。
主流程有几个重要的职责。它能够响应应用程序生命周期事件,例如启动、退出、准备退出、后台调用、前台跳转、等等。主过程也负责与本机操做系统接口通讯。若是你想要显示对话框去打开或者保存文件,能够从主进程中执行。
主进程可使用Electron浏览器窗口模块建立和销毁渲染器进程,渲染器进程能够加载web页面来显示用户界面。每个进程利用Chromium的多进程架构,并在本身的线程上运行,而后,这些页面能够加载其余JavaScript文件并在此进程中执行代码。与普通web页面不一样,你能够在本身的渲染进程中,访问全部Node APIs,容许使用本机模块和较低级别的系统交互。
每一个渲染进程都是独立的,没法访问操做系统集成的接口。若是须要触发打开或保存文件对话框或访问任何其余操做系统集成。其对应的渲染进程必须与主进程进行通信。
Electron与另外一个名为NW.js(之前称为node-webkit)的项目相似。这二者有不少共同之处。事实上,在开始研究Electron以前,zcbenz(Electron项目发起者)是NW.js的重要贡献者。也就是说,它们在几个重要的方面是不一样的,如表1.1所示。
表1.1 Electron和NW.js之间的主要区别的比较
Electron | NW.js | |
---|---|---|
平台 | 支持官方最新的Chromium版本 | Chromium分支版本 |
进程模型 | 分离进程模型 | 共享Node进程 |
错误报告 | 内置 | 不支持 |
自动更新 | 不支持 | |
Windows支持 | Windows 7及以上 | Windows XP及以上 |
NW.js使用了一个Chromium的分支版本。Electron使用Chromium和Node.js而且不作任何修改。这使得Electron更容易跟上大多数Chromium和Node的最新版本。Electron还包括自动下载更新和错误崩溃上报,NW.js不支持。
NW.js应用程序从HTML页面启动,每一个浏览器窗口共享一个Node 进程。若是打开多个窗口,它们都共享同一个Node进程。Electron将Node和浏览器进程分开。在Electron,你从Node启动一个主进程。这个主进程能够打开浏览器窗口,每一个都有本身的进程。Electron提供了主进程和浏览器窗口之间的通信接口,在这本书。咱们称之为渲染进程
若是须要考虑向后兼容性,那么NW.js多是更好的选择,由于它支持Windows XP和Vista。Electron只支持Windows 7及之后。对于多媒体应用,Electron一般是更好的选择,由于Chromium的FFmpeg库是一个静态连接的依赖项,Electron支持更多开箱即用的依赖,用NW.js,您须要手动连接FFmpeg依赖项。