允许服务与桌面交互_使用Electron构建响应式桌面应用

如果您像我一样，就喜欢JavaScript及其生态系统，并且一直在使用React之类的框架或带有NodeJS的高性能Web服务器来构建出色的Web应用程序。现在，您想开发一个桌面应用程序，不想学习一种新的编程语言，或者您想尽可能地从现有Web项目中重用。这是Electron进入图片保存日期的时间。

Electron允许您使用HTML，CSS和JavaScript构建桌面应用程序。互联网上有很多反对Electron的论据，其中之一就是它的性能和许多次低质量的应用程序，但不要怪罪框架。电子功能强大且性能卓越。如今，许多流行的应用程序都在Electron之上运行，例如VS Code，Slack，Skype，Discord等。

但是，为什么会有很多人这么反对呢？问题始于应用程序和人们使用Electron的方式。对于许多人来说，将Web应用程序移植到Electron意味着将您现有的代码保持原样并将其嵌入到Electron容器中。这是一件可怕的事情吗？也许不是，但是您没有充分利用Electron的功能。您仅在更改独立应用程序的浏览器选项卡。

我们可以改善什么？在本文中，我们将探究Electron的基础知识，并将构建一个示例应用程序来展示一些Electron方式。

[阅读：Neural在2021年及以后的人工智能市场前景]

电子如何工作？

电子建立在3个主要组件之上：

• 铬：负责网站内容
• NodeJS：用于与操作系统进行交互
• 自定义API：解决与操作系统打交道时的常见问题

如架构图所示，这些组件中的每个组件都在电子架构层上以不同级别进行交互。

电子有两种类型的过程。

• 主要流程：负责窗口管理以及与操作系统的所有交互。这就是一切的开始，它可以创建和管理多个渲染器进程
• 渲染器过程：可能有一个或多个，每个都将托管一个Chrome实例并负责Web内容。

请务必注意，渲染器进程无法直接访问OS功能。相反，他们通过IPC与主要流程进行通信以实现这些任务。

许多典型的Electron应用程序将使用主进程创建一个渲染器进程并加载其Web应用程序。今天，我们将迈出这一步。

必备部分：Hello World！

接下来，我们将构建一个“ hello world！” 应用。我们不会使用不必要的框架或库来专注于Electron代码。

让我们开始吧。

设置电子

构建应用程序的第一步是创建一个项目并安装电子库，因此从使用NPM创建项目开始：

npm init

并设置您的应用程序详细信息。作为该应用程序的起点，我喜欢使用main.js，但您可以使用所需的任何文件名。

接下来，安装Electron。

npm install -D electron@latest

建立屏幕

对于我们的微hello世界示例，我们需要两个文件，main.js和hello-world.html。main.js是我们的主要过程；我们将创建第一个渲染器进程，以加载我们的hello-world.html。

这是的入门代码 main.js

该入门工具包将处理运行该应用程序所需的最少操作，并创建第一个渲染器new BrowserWindow并main.html在其上加载。它还将解决某些情况，以退出应用程序并在需要时重新启动主窗口。

关于我们，main.html我们将使用以下内容：

这只是一个简单的HTML，它公开了我们的应用程序使用的node，chrome和Electron的当前版本。

最后，我们需要运行我们的应用程序；首先，您需要更改package.json并添加启动脚本。

如果一切顺利，您应该会看到一个这样的窗口：

有没有更简单的方法？

简短的答案是肯定的！虽然要付出代价。许多样板为构建Electron应用程序提供了起点，其中一些使用Vanilla JS，另一些直接与某些最受欢迎的框架（如React和Vue）集成。

我不是这些样板的忠实拥护者，因为它们经常带有许多我不需要的库和附加内容。但是它们是让您入门的好地方。

这是一些受欢迎的：

• 电子锻造
• 电子生成器
• 电子反应样板
• 电子战

构建流畅的应用程序

我们已经在Electron的体系结构中看到了工作原理。如果您像我一样，您可能会担心Chromium和Node的所有实例都在运行，应该这样做。我们都知道Chromium（或Chrome）如何吞噬我们的内存并影响我们的性能，那么我们该如何避免基于Chromium的应用程序做到这一点呢？我们如何保持他们的表现？

这里有一些提示：

永远不要阻塞主要流程

主要过程是一切开始的地方。它是应用程序所有进程的父进程。它是主要与操作系统进行通信，处理所有窗口以及它们之间的通信并运行UI线程的窗口。

阻止此过程意味着应用程序将停止响应，直到操作完成。在任何情况下，在任何情况下都不会运行占用大量CPU的代码，并且需要很长时间才能完成。

以下是一些建议：

• 对于占用大量CPU的操作，请将这些函数委派给工作线程，渲染器进程，甚至派生专用进程来执行该任务（尽管请确保您知道最后一个任务在做什么）。
• remote尽可能避免使用该模块。使用remote模块在不知不觉中阻塞UI线程太容易了。
• 避免在主线程上使用阻塞的I / O操作；如果需要，请使用NodeJS提供的异步等效项。

可以阻止渲染器进程吗？

并不是的。也许后果不会像阻止主要过程那样有害，但是阻止渲染器是有代价的。您的窗口可能变得缓慢或反应迟钝，并且整个用户体验将非常糟糕。

当我们使用网络时，我们已经习惯了某些网络应用突然变慢，变得不平滑，并且我们对此表示满意。但是，在桌面应用程序方面，我们的标准更高。请注意这一点，因为用户的期望很重要。

我该怎么做才能使我的应用程序更具响应性？我们可以在网络应用程序上做的几乎相同的事情；毕竟，在渲染器过程中，我们只是在谈论Chromium。

• requestIdleCallback：API，允许JavaScript的执行排队在空闲的浏览器时间内运行，无论是在帧结束时还是在用户不活动时。
• Web worker：将Web浏览器分配给新线程的最佳工具，可在Web浏览器上运行昂贵的计算。

您不需要跨浏览器的兼容性

在Web开发过程中，通常使用polyfills支持不同的浏览器。在构建Electron应用程序时，您不需要任何这些。如果它在Chromium上运行，那么它将在Electron上运行，并且不需要支持任何其他浏览器。减少捆绑，并通过不加载这些额外的模块来使一切变得更快。

捆绑所有代码

在Web开发中，有时我们会从服务器（例如CDN）加载脚本或页面，这些脚本或页面与我们的应用程序分开提供，这很好。毕竟，对于Web来说，我们总是需要下载这些资产才能运行该应用程序。

对于桌面应用程序，这是不同的。通过捆绑应用程序中的所有静态资产，脚本和内容，避免任何不必要的网络请求。这将使您的应用程序可以做两件事：脱机工作，并加快加载过程，因为读取磁盘比上网便宜。

结论

下次您需要构建跨平台的桌面应用程序时，建议您尝试Electron，尤其是如果您来自JavaScript，并且已经有一些代码可以重用。

请注意，如果使用正确，Electron可能会很棒。请记住，尽管它看起来像一个网络，但它并不完全是一个网络，因此您需要进行一些特殊考虑才能使其正常运行。