一些人非常讨厌
电子应用。 轻率地说,该应用程序包含Chromium浏览器似乎很奇怪。 在使用此类应用程序的过程中,这种感觉得到了增强。 它们消耗大量内存,加载缓慢,并且对用户交互没有特别高的反应速度。 开发良好的Web应用程序并不容易。 为什么将网络技术拖入桌面环境? 毕竟,在这种环境下,他们会产生很多问题吗?
该材料的作者(我们今天将发表其翻译)说,尽管一切都在说明该平台的成功,但他将不会扮演Electron的捍卫者。 的确,没有人会轻视电子应用中固有的多余部分。 在开发此类应用程序时,有可能一枪杀死两只鸟吗?
Electron的某些问题(大文件大小,缓慢加载)是该平台所基于的技术的传统。 需要从低层次解决这些问题。 在电子应用程序开发的水平上,可以解决更严重的问题(内存消耗,接口速度慢)。 但是,解决这些问题并不容易。 如果有一个秘密,知道您可以在自动模式下最大程度地减少这些缺点,该怎么办?
如果您想阅读程序代码,则可以立即查看
此存储库。 这是本材料中将要考虑的项目。
秘密的本质
开发高质量电子应用程序的秘诀是在后台进程中在本地系统上执行大量计算。 您对云服务的依赖程度越低,在后台流程中进行的工作就越多,那么您将获得以下积极效果:
- 即时数据加载。 应用程序用户将不必等待数据通过网络下载。 数据是从本地存储下载的。 这立即为应用程序带来了明显的性能提升。
- 低缓存要求。 客户端应用程序无需特别担心缓存。 这是因为他需要的所有数据都在本地可用。 为了使Web应用程序达到良好的性能水平,通常需要将大量数据加载到其本地状态。 这是电子应用程序内存消耗很高的原因之一。
在这里,我不是在谈论本地数据存储的其他优点,例如,无需连接网络即可进行工作的可能性。
看一下我的Electron应用程序消耗了多少内存
-Actual的个人财务经理。 该程序将所有数据存储在本地。 不同设备之间的数据同步是一项可选功能,它不会影响主要功能。 我想,鉴于该应用程序旨在处理大量数据,因此它的内存消耗数据不言而喻。
实际内存消耗不执行任何活动动作的应用程序将占用总计239.1 MB的内存。 该指标可能更多,它取决于应用程序中到底发生了什么,但是可以仅将指定的数字作为基数。 这不是完美的,但还不错。 至少-优于我的Slack计算机所需的1371 MB内存。 我必须说,Slack是电子应用程序的一个非典型示例,其特征在于特定的问题。 由于松弛,Electron周围有一些感觉。 其他应用程序(例如,概念或Airtable)消耗大约400-600 MB的内存。 这意味着我的应用程序在这方面取得了成功,并且赢得了。
我必须说239.1 MB的数字是我在进行任何优化之前获得的。 我计划在Rust中重写应用程序的一些非常重要且占用大量内存的部分。 这将大大减少应用程序的内存需求。
后台服务器可以通过仅将特定时间点所需的数据加载到内存中来优化自身的内存消耗。 最好使用SQLite之类的东西进行数据存储。 该DBMS已经针对解决此类问题进行了认真的优化(严重-仅使用SQLite)。 另外,应该注意的是,将各种计算移至后台进程可以使应用程序的用户界面尽可能快地响应用户的影响。
事实证明,在Electron应用程序中使用后台服务器会给开发人员带来有趣的机会。 在下一节中,我们将讨论使用它可以完成的所有令人难以置信的事情。
即使您的应用程序与云数据紧密相连,但如果您打算使用Node.js API,则可能需要一个后台进程。 仅在后台进程中才可以与这些API进行交互。 事实上,无论您的Electron应用程序是什么,我相信了解我们现在要检查的项目可以为您提供一些有用的想法。
带服务器电子示例应用程序
我创建了
带服务器电子示例应用程序,以展示使用其示例开发真正的本地电子应用程序所需的所有配置。 我这样做是为了通过创建类似的项目来吸引程序员。 当我刚开始与Electron合作时,我想遇到一个类似的项目。
可在
README
找到有关该应用程序的技术信息。 这是项目的一般概述:
- 它创建了通常的Node.js进程,用于在后台执行服务器代码。
- 其中,使用node-ipc创建了一个IPC通道,该通道旨在组织后端与应用程序的用户界面之间的直接交互。
- 如果项目以开发模式启动,则服务器不会作为后台进程启动。 您可以通过单独的浏览器窗口与之交互。 这是出于调试目的。
现在,让我们放慢速度,并仔细查看此列表中的最后一项。 在开发模式下,您可以通过单独的浏览器窗口与服务器进行交互吗?
应用程序的客户端和服务器部分是的,是的。 在学习了如何启动后台程序之后,我首先意识到,我可以使用Chromium开发人员的工具。 其次-我意识到,出于调试目的,我可以使用它们来调试Node.js代码。 因此,我说的是您可以通过浏览器与Node.js进行交互的事实。 这使您可以使用基于Chromium的丰富浏览器开发人员工具包来调试服务器代码。
现在,让我们看看由于上述应用程序启动方案的应用程序而可以做的所有有趣的事情。
使用控制台
我添加了用于记录对
server-ipc.js
文件的请求和响应的命令。 我可以使用浏览器控制台进行浏览。
在浏览器控制台中调试Node.js应用程序分步执行代码
使用浏览器调试应用程序的服务器端时,可以使用分步执行代码。 这并不是说这绝对是太棒了。 但是,始终可以使用此功能非常方便,不需要使用其他程序。
分步执行代码剖析
也许这是我最喜欢的工具。 这是用于研究代码性能的出色标准工具,可让您分析应用程序的服务器端。
服务器代码性能研究使用浏览器开发人员的工具,您甚至可以探索启动后台进程时发生的情况(这很可能是启动应用程序中最难的部分)。
为此,只需开始记录指示器的过程并重新加载窗口即可。 重新启动将导致服务器重新启动。 这将我们引向下一步。
使用组合键Cmd + R或Ctrl + R重新启动服务器
在浏览器中调试服务器代码的另一个选项是,由于服务器调试是在浏览器窗口中执行的,因此只需重新加载窗口中的内容即可使服务器重新启动! 使用组合键
Cmd+R
(对于Windows,则为
Ctrl+R
)就足够了,您可以随意使用服务器代码的最新更改。 在这种情况下,将保存前端数据。 这意味着您可以继续使用应用程序的客户端部分,但是在重新启动服务器之后,客户端部分将已经可以使用新版本的服务器代码。 这让人想起正在运行的服务器上的“热”代码交换。
下图显示了如何更改服务器代码,并通过按
Cmd+R
重新加载页面
Cmd+R
之后,我继续使用客户端,该客户端现在正在与新版本的服务器交互。
服务器重启研究应用程序正在运行的服务器端和热交换代码
通常,在调试服务器时,只需将
console.log()
命令添加到代码中的正确位置,然后重新启动即可。 但是有时,在特别困难的情况下,碰巧查看正在运行的服务器中发生的情况而不是重新启动它非常有用。 不仅可以“查看”服务器内部,还可以更改其中的某些内容以查看这将如何影响问题。
在控制台中,可以使用Node.js
require
命令。 这意味着在它的帮助下,您可以连接任何服务器模块并在控制台中使用它们。
假设我们需要使用
server-handler.js
。 为此,只需在控制台中运行命令
let handlers = require('./server-handlers')
。
让我们创建一个存储服务器状态的系统。 在我们的例子中,这将是传递给
make-factorial
函数的所有数据的列表(实际应用程序的服务器状态会更加复杂):
handlers._history = [] handlers['make-factorial'] = async ({ num }) => { handlers._history.push(num) }
您可以通过连接适当的模块并查看
handlers._history
从控制台
handlers._history
服务器
handlers._history
状态。 如果需要的话,在程序执行过程中,我们甚至可以完全替换
make-factorial
实现!
服务器状态研究总结
查看
带服务器的
电子示例存储库,以了解项目实现的详细信息,并查看Electron应用程序服务器端的代码。
如果使用Visual Studio Code,则可能习惯于将开发人员工具与Node.js服务器进行高质量的集成。 使用这种方法,您可以独立于Electron应用程序自己启动服务器。 之后,您可以告诉Electron您需要连接到VS Code拥有的进程。 但是,我更喜欢使用现有的Electron开发工具。
这意味着程序员有机会使用任何第三方代码编辑工具,同时可以完全访问所有浏览器开发人员工具。
在过去的几年中,我一直在开发“
实际”应用程序,并不断使用我刚才所说的内容。 我想说我真的很喜欢这一切。 也许此应用程序的Node.js部分上的工作已经成为我所经历过的最愉快的编程经验的来源。
此外,上述原则对我们开发真正的本地应用程序非常重要。 我们已经拥有为此所需的所有技术。 最主要的是正确使用它们。
亲爱的读者们! 您对基于Electron的应用感觉如何?
