快速了解Electron:新一代基于Web的跨平台桌面技术

本文引用了作者“ ConardLi”的《用JS开发跨平台桌面应用,从原理到实践》一文部分内容,原文链接:segmentfault.com/a/1190000019426512,感谢原作者的无私分享。

1、引言

现在开发IM应用动不动就要求多端——即Android端、iOS端、PC端、Web端等,Android端和iOS端作为两种不同的移动端技术,单独开发和维护还能理解,PC端和Web端如果要单独开发那就有点头大了,必竟开发传统的PC桌面应用成本太高(QT这类技术跟Web技术相比,上手难度大的多,而且太小众)。所以,很大情况下大家都是PC富客户端和Web端二选一,对于比较磨叽的老板、产品经理或客户来说,这是个很费口舌的事情(你懂的。。。)。

在即时通讯网的官方技术群里不只一次看到大家在讨论Electron技术,作为新一代基于Web的桌面技术,已经被越来越的产品采用,成熟度和认可度都不错,Electron技术可以降低开发PC端的成本和难度,或许PC富客户端和Web端再也不需要二选一了。

本文将从入门者的角度,为你快速讲解Electron到底是个什么技术,包括案例介绍、技术优势、技术体验、实现原理等。

(本文同步发布于:http://www.52im.net/thread-2616-1-1.html

2、传统桌面应用程序

桌面应用程序,又称为 GUI 程序(Graphical User Interface),但是和 GUI 程序也有一些区别。桌面应用程序 将 GUI 程序从GUI 具体为“桌面”,使冷冰冰的像块木头一样的电脑概念更具有 人性化,更生动和富有活力。

我们电脑上使用的各种客户端程序都属于桌面应用程序,近年来WEB和移动端的兴起让桌面程序渐渐暗淡,但是在某些日常功能或者行业应用中桌面应用程序仍然是必不可少的。

传统的桌面应用开发方式,一般是下面两种。

1)原生开发:

直接将语言编译成可执行文件,直接调用系统API,完成UI绘制等。这类开发技术,有着较高的运行效率,但一般来说,开发速度较慢,技术要求较高,例如:

a. 使用C++ / MFC开发Windows应用;

b. 使用Objective-C开发MAC应用。

2)托管平台:

一开始就有本地开发和UI开发。一次编译后,得到中间文件,通过平台或虚机完成二次加载编译或解释运行。运行效率低于原生编译,但平台优化后,其效率也是比较可观的。就开发速度方面,比原生编译技术要快一些。例如:

a. 使用C# / .NET Framework(只能开发Windows应用);

b. Java / Swing。

不过,上面两种对前端开发人员太不友好了,基本是前端人员不会涉及的领域,但是在这个"大前端"的时代,前端开发者正在想方设法涉足各个领域,使用WEB技术开发客户端的方式横空出世——这就是本文正在介绍的“Electron”技术。

3、什么是Electron技术?

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将ChromiumNode.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。通过Node它提供了通常浏览器所不能提供的能力。

Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来(PS:据说这个Atom看起来很漂亮,但很难用...)。这两个项目在2014春季开源。

其实,Electron在早期一直是由原作者 Cheng Zhao 一个人维护和开发的(他现在是 Github 北京 Atom 编辑器开发 team 的一名工程师)。在这之前,Zhao主要进行node-webkit(现在叫nw.js)的开发工作。从概念上,Electron与nw.js很相似,但是他们有很重要的区别:一个主要的不同点是Electron 通过 Googles Chromium Content Module 来使用 Chromium 的功能,nw.js 则直接使用了 Chromium本身。

PS:Electron的作者 Cheng Zhao 应该是个中国人,但网上能查到的信息非常少,连中文名都没有(大佬就是低调...),这个框架作者还为一本中文译名叫《跨平台桌面应用开发:基于Electron与NW.js》的书写了序(见下图)。

Electron 发展历程中的里程碑:

目前它已成为开源开发者、初创企业和老牌公司常用的开发工具(看看谁在使用Electron)。

Electron资源:

1)Electron官网:https://electronjs.org

2)Electron Github:https://github.com/electron

3)Electron开发手册:https://electronjs.org/docs

4、Electron为何如此迷人?

可能主要是因为,猿类里的亚种——“前端开发”,又有了新的出路了吧,已经在岗的前端也有了新一年的 KPI/OKR,刚起步的创业公司可以只拉一个前端就能开发跨平台的多个桌面客户端... ...(开个玩笑)。

1)可以用 Web 前端技术开发跨平台的桌面客户端:

这是 Electron 最迷人的地方,究其根本是因为它是建立在 Chromium 和 NodeJS 之上的,一个负责界面,一个负责背后的逻辑,典型的"你负责貌美如花,我负责赚钱养家",为什么 Electron 能够开发跨平台的桌面应用也就可以理解了。

而对于前端开发来说,“不要和老夫说什么 C++,Java,老夫行走江湖就一把 JS,遇到需求就是干”。前端开发可以用自己熟悉的方式去写应用界面,逻辑部分也还是 JS,如果你精通 Node 后端,那后端也可以插一脚,“鸟枪换大炮”,你开发客户端的能力有一种“忽如一夜春风来”的感觉。

但是,不同系统间还是会有很大的不同,“同一套代码,编译出跨平台的多个客户端”,话是这么说,但你得因为系统的不同做一些额外的处理,以使得打包出的不同系统下的应用都可以正常工作,这可能是一些“if - else”的成本,但相比于那80%都能完全复用的代码,这些成本已经很小了。

综上所述:一个 Web 前端开发者可以花很少的成本去上手 Electron,而相比于以前开发多平台客户端的成本,利用 Electron 开发多平台客户端的成本是极低的。

2)可以从 NodeJS 的生态获得极大的助力:

因为 Electron 是基于 NodeJS 的,意味着,NodeJS 这个大生态下的模块,Electron 也都可以用,这减少了很多造轮子的时间,你要写一些逻辑将首先思考有没有成熟的模块可以引入,而不是自己吭哧吭哧闭门造车,自己造时间精力会大量得被消耗,上路还可能翻车。

Electron 从 NodeJS 获益有2个方面,一个方面是如现代的 web 项目一般,开发构建流程可以引入很多成熟的包去打造出适合自己项目的开发工作流,另一个方面就是其应用本身也可以依赖需要的包去完成自己的功能。

3)“这个东西做Web版就可以,干吗还要开发PC客户端版?”

既然 Electron 是用 Web 技术写客户端,那么看上去 Electron 要做的事,可以搬到网站上。

为什么还要搬到PC客户端,这里有3个角度的回答:

a. 用户角度: 客户端是一款独立的软件,其综合体验一般都是比网站高的,尤其是涉及到「工具」范畴的应用,此外,特定的用户群体也会有类似的使用习惯;

b. 发行方角度: 客户端是另一种产品形式,是一种产品的分发方式和入口,客户端可以实现很多本地应用独有的需求去触达用户,也能提供更加可靠的服务;

c. 开发角度: 终于...不用考虑浏览器兼容了,Chromium 也足够开发使用一些先进的 CSS 或 JS 特性,我们现在还没计划引入 webpack 和 babel,因为现在好像够用,克制才是爱,除了写起来爽,对于开发来说,终于跳出了浏览器的沙盒,你可以自己去控制 Electron 中的“浏览器”,莫名的开心。

这些综合起来回答这个小节的问题就是,用 Electron 开发客户端,用户体验好,开发麻烦小,功能更强大,老板脱发少。

4)那在 Electron 和 NW.js 之间,为啥选择前者?

我没怎么用过 NW.js,但当时在没有时间深入体验的实际情况下,我选择生态好的。

Electron 相关的社区生态很好,之后的开发过程也证明了这一点,遇到的问题基本都能通过 Stackoverflow 找到,如果没有找到,新开一个问题或者去 Github 提 Issue 都可以得到较快的解决,除非是一些已知的问题或一些看文档可以解决的问题,这类问题可能会被忽略过去。

所以,生态更好一些,我选择了 Electron。

5)总结一下,使用Electron开发的理由:

a. 使用具有强大生态的Web技术进行开发,开发成本低,可扩展性强,更炫酷的UI;

b. 跨平台,一套代码可打包为Windows、Linux、Mac三套软件,且编译快速;

c. 可直接在现有Web应用上进行扩展,提供浏览器不具备的能力;

d. 你是一个前端??‍??~

当然,我们也要认清它的缺点:性能比原生桌面应用要低,最终打包后的应用比原生应用大很多。

5、Electron的开发体验

兼容性:虽然你还在用WEB技术进行开发,但是你不用再考虑兼容性问题了,你只需要关心你当前使用Electron的版本对应Chrome的版本,一般情况下它已经足够新来让你使用最新的API和语法了,你还可以手动升级Chrome版本。同样的,你也不用考虑不同浏览器带的样式和代码兼容问题。

NodeJS环境:这可能是很多前端开发者曾经梦想过的功能,在WEB界面中使用Node.js提供的强大API,这意味着你在WEB页面直接可以操作文件,调用系统API,甚至操作数据库。当然,除了完整的 Node API,你还可以使用额外的几十万个npm模块。

跨域:你可以直接使用Node提供的request模块进行网络请求,这意味着你无需再被跨域所困扰。

强大的扩展性:借助node-ffi,为应用程序提供强大的扩展性(更详细的介绍可以自行百度相关资料了解一下)。

6、那么,都有谁在用 Electron?

现在市面上已经有非常多的应用在使用Electron进行开发了,包括我们熟悉的VS Code客户端、GitHub客户端、Atom客户端等等。

印象很深的,去年迅雷在发布迅雷X10.1时的文案:

从迅雷X 10.1版本开始,我们采用Electron软件框架完全重写了迅雷主界面。使用新框架的迅雷X可以完美支持2K、4K等高清显示屏,界面中的文字渲染也更加清晰锐利。从技术层面来说,新框架的界面绘制、事件处理等方面比老框架更加灵活高效,因此界面的流畅度也显著优于老框架的迅雷。至于具体提升有多大?您一试便知。

你可以打开VS Code,点击“帮助”-“切换开发人员工具”,来调试VS Code客户端的界面:

Electron的官网还列举了更多案例:看看谁在使用Electron

7、Electron的运行原理

如上图所示,Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API。

1)Chromium:

Chromium 是 Google 为发展 Chrome 浏览器而启动的开源项目,Chromium 相当于 Chrome 的工程版或称实验版,新功能会率先在 Chromium 上实现,待验证后才会应用在Chrome 上,故 Chrome 的功能会相对落后但较稳定。

Chromium为Electron提供强大的UI能力,可以在不考虑兼容性的情况下开发界面。

2)Node.js:

Node.js是一个让 JavaScript 运行在服务端的开发平台,Node 使用事件驱动,非阻塞I/O 模型而得以轻量和高效。

单单靠Chromium是不能具备直接操作原生GUI能力的,Electron内集成了Nodejs,这让其在开发界面的同时也有了操作系统底层 API 的能力,Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用。

3)系统API:

为了提供原生系统的GUI支持,Electron内置了原生应用程序接口,对调用一些系统功能,如调用系统通知、打开系统文件夹提供支持。

在开发模式上,Electron在调用系统API和绘制界面上是分离开发的,下面我们来看看Electron关于进程如何划分。

8、Electron项目和Web项目的区别

Electron核心可以分成2个部分:主进程和渲染进程。

主进程连接着操作系统和渲染进程,可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了,只是载体改变了,从浏览器变成了window。

传统的Web环境我们是不能对用户的系统就行操作的,而Electron相当于NodeJS环境,我们可以在项目里使用所有的node api(Electron的作者相当机智...)。

简单理解:给Web项目套上一个NodeJS环境的壳,就是Electron技术。

项目结构:相比web项目,桌面项目多了一个进程,如下图所示。

项目迁移:如果要迁移项目到Web端,就需要把项目中的Electron提供的API和NodeJS的API完全剥离出来,只能遗留Web的代码,比如 node fs模块,Electron提供ipc 模块,都需要剥离。如果你一开始就打算双端程序,在开始写代码时应该对Web代码和Elecctron的代码进行分离,以便后期的迁移。

9、本文小结

Electron是一个年轻的开源项目,被原作者一个人维护了很长时间,这反而成了很好的开始。浏览器是个比较复杂的东西,很少能引起人的兴趣,但是Electron已经有了很多个开发者,还有很好的跨平台支持,有了个不错的开始。

最后说一些可以帮助你更好学习electron的基础知识:

1)Webpack: 最强构建工具,没有之一,了解webpack,你才能更好编写项目配置;

2)NodeJS: Electron是搭载谷歌v8内核的高性能的NodeJS环境 ,所有NodeJS能用的东西,我们都能用。是不是很酸爽?

附录:有关Web即时通讯技术的文章

Web即时通讯新手入门贴:
新手入门贴:详解Web端即时通讯技术的原理

Web端即时通讯技术盘点请参见:
Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

关于Ajax短轮询:
找这方面的资料没什么意义,除非忽悠客户,否则请考虑其它3种方案即可。

有关Comet技术的详细介绍请参见:

更多WebSocket的详细介绍请参见:

有关SSE的详细介绍文章请参见:
SSE技术详解:一种全新的HTML5服务器推送事件技术

更多WEB即时通讯文章请见:
http://www.52im.net/forum.php?mod=collection&action=view&ctid=15

(本文同步发布于:http://www.52im.net/thread-2616-1-1.html

原文地址:https://www.cnblogs.com/imstudy/p/11022315.html

时间: 2024-11-10 02:20:28

快速了解Electron:新一代基于Web的跨平台桌面技术的相关文章

Electron+React+七牛云 实战跨平台桌面应用

第1章 进入 Electron 的世界介绍了整个课程的背景知识,项目简介,学习流程,可以掌握的知识点,以及学习方法和前置知识. 第2章 我们的第一个应用本章讲述了 Electron 的基础用法,包括搭建 Electron 开发环境.进程和线程的知识.BrowserWindow 模块.跨进程访问等内容. 第3章 神奇的 React本章回顾了 React 的基础知识,从而引出了全新的 React Hooks,详细讲解了 useState.useEffect.自定义Hook 等内容. 第4章 双剑合璧

如何基于web技术开发国产化网管软件

随着Java和web技术的成熟及其在Internet上的广泛应用,网络管理技术和模式迎来了又一次革命.在网络管理领域,通过Web技术(如Web服务器,HTTP协议.HTML和Java语言等)来集成网络管理系统,就能够获得可运行于各种平台的简单有效的管理工具.特别是目前人们对计算机网络管理工具的要求已不仅仅局限于集中式管理模式,而要求网络管理工具具有分布计算能力.近几年来随着Java.EJB.XML等技术的发展与成熟使人们对网络管理的分布式要求已成为现实. 1. 基于Web的网络管理模式的特点 分

基于 Web 端 3D 地铁站可视化系统

前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

【案例分享】SpreadJS金融行业应用实践,开发基于Web Excel的指标补录平台

SpreadJS作为一款基于 HTML5 的纯前端电子表格控件,以“高速低耗.高度类似Excel.可无限扩展”为产品特色,提供移动跨平台和浏览器支持,可同时满足 .NET.Java.App 等应用程序中的 Web Excel 组件开发.数据填报.在线文档.图表公式联动.类 Excel UI 设计等业务场景. 本期公开课,将由华融融通科技有限公司开发经理——郭晓东先生,为我们深入剖析:SpreadJS在金融行业的成功案例,助你快速构建基于Web Excel的指标补录平台. 案例分享地址:https

基于 Web 的 Go 语言 IDE - Wide 1.5.0 发布!

Wide 是什么 Wide 是一个基于 Web 的 Go 语言团队 IDE. 在线开发:打开浏览器就可以进行开发.全快捷键 智能提示:代码自动完成.查看表达式.编译反馈.Lint 实时运行:极速编译.实时结果输出 团队协同:统一开发环境,分布式开发,代码分享 DevOps! 大家可以使用我们提供的 Wide 在线服务,也可以自行下载并在本地环境运行 Wide 私服! Playground Wide 提供了运行单文件的 Playground,可以看作是 golang.org 的 Go Playgr

基于web的IM软件通信原理分析

关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而web端的IM应用,由于浏览器的兼容性以及其固有的“客户端请求服务器处理并响应”的通信模型,造成了要在浏览器中实现一个兼容性较好的IM应用,其通信过程必然是诸多技术的组合,本文的目的就是要详细探讨这些技术并分析其原理和过程. 1.基于web的固有通信方式 浏览器本身作为一个瘦客户端,不具备直接通过系

基于web的项目管理软件Redmine

Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统,据说是源于Basecamp的ror版而来, 支持多种数据库,有不少自己独特的功能,例如提供wiki.新闻台等,还可以集成其他版本管理系统和BUG跟踪系统,例如Perforce. SVN.CVS.TD等等.这种 Web 形式的项目管理系统通过“项目(Project)”的形式把成员.任务(问题).文档.讨论以及各种形式的资源组织在一起,大家参与更新任务.文档等内容 来推动项目的进度,同时系统利用时间

Stimulsoft Reports Designer.Silverlight是一个基于web的报表设计器控件

Stimulsoft Reports Designer.Silverlight是一个基于web的报表设计器控件,通过使用它您可以直接在web浏览器中更改您的报表控件.该产品使用Silverlight技术和ASP.NET开发.它不需要开发人员编写复杂的代码或很长的组件设置.您在服务器上使用的是一个简单的ASP.NET组件.Silverlight组件在客户端上运行.Stimulsoft Reports Designer.Silverlight拥有一个时尚的用户界面,加载迅速,运行速度快,并拥有丰富的

基于WEB的企业用能信息在线填报系统设计

源码下载:http://download.csdn.net/detail/yiduiguwen/9523660 二.课题来源及选题依据 对于任何一家企业来说,其正常的生产过程都需要各种的一次或二次能源,针对能源使用计量数据的管理和应用,在企业发展过程中有着日益重要的作用.企业用能数据反映了消耗水平的高低,可以及时有效地指导企业有关部门及时采取行之有效的措施降低能耗,提高企业的节能意识,推动节能工作深入开展. 对于企业用能情况的查询与更新,不同企业员工应当具有不同的处理权限,比如某些低级别用户只能