构建我的第一个桌面应用程序：Electron 初体验

简而言之：我正在使用 Electron 开发一款桌面应用程序。这款应用允许任何人使用 HTML、CSS 以及（可选的）JavaScript 为桌面创建小部件。点击此处查看。在本文中，我将分享我的第一印象，以及我在首次使用 Electron 时遇到的一些挑战。

我的开发生涯大部分时间都在使用 Ubuntu。让我非常困扰的是，它缺乏桌面自定义选项。在 macOS 上，有 Übersicht；在 Windows 上，Rainmeter 非常流行；然而在 Linux 上，我只能使用各种桌面管理器提供的预设小部件，而且这些小部件往往看起来过时了。即使你幸运地使用 macOS 或 Windows，我也发现常用工具的使用体验并不友好。我希望能够编写一些我熟悉的 HTML 和 CSS 代码，在我的桌面上创建一些美观的东西，而无需经历陡峭的学习曲线。

成为你想看到的世界改变。

我决定为此做点什么，我想你会喜欢的。我正在开发Glitter，这是一款几乎适用于所有操作系统的工具，它允许你使用你已经熟悉的 HTML、CSS 和 JavaScript 技术来创建（或使用他人创建的）组件。Glitter 组件将在 Glitter 平台上托管和审核，从而可以轻松安全地向全世界分发各种组件。

输入电子

我决定使用 Electron 来构建这个应用。在某些圈子里，Electron 饱受诟病，因为它最终的应用体积庞大（它同时包含了 Node.js 和 Chromium 运行时环境）且内存占用较高。但我认为它是一个非常宝贵的工具，能够进一步拓展 Web 技术的应用范围。它也让像我这样不熟悉“桌面”编程语言的人也能在这个平台上开发应用。基于 Electron 开发的热门应用包括 Slack、Discord 和 VS Code 等。

电子版初印象

Electron 的入门相当简单。我决定使用Electron Forge。他们提供了一个命令行界面 (CLI) 来快速启动开发，还提供了一些方便的应用程序打包工具。另一个很棒的功能是它开箱即用地支持 Webpack。如果你打算尝试一下，我建议你加入 Atom 的官方 Slack 频道，其中包含 #electron 频道。Electron Forge 的作者会在那里活跃（还有很多其他热心人士）。

在 Electron 中，应用程序的入口点是主进程（本质上是一个 Node.js 脚本）。从这里，你可以根据需要创建任意数量的渲染进程（浏览器窗口实例）。这一点我很快就理解了，而且非常合理。它也支持我熟悉的关注点分离，即后端（在本例中是主进程）和前端（渲染器）。我使用 React 来构建 UI，但 Glitter 组件将自带一个支持 Vue.js 和 React 的组件生成器（更多内容将在 MVP 版本发布后介绍）。

Electron 的更新非常频繁。团队一直在努力工作，不断推出非常实用的功能。例如，在 7.x 版本中，他们引入了一种速度更快的进程间通信 (IPC) 方法（本质上是一种在主进程和浏览器窗口实例之间传递数据的方法——虽然之前已经支持，但存在一些问题）。

并非一切都尽如人意。

尽管 Electron 的文档相当完善，但我还是遇到了很多无法按预期运行的情况。

例如，在我的使用场景中，我需要为每个控件生成透明无边框的窗口。在 Ubuntu 系统上，仅仅按照文档说明并将选项传递给BrowserWindow实例是完全不起作用的。我必须在应用程序启动后设置一个 500 毫秒的任意超时时间，只有这样该选项才能生效。
对于其他一些选项，在构造函数中设置它们总是无效，但奇怪的是，在实例化窗口后调用该选项的 setter 方法却可以正常工作。

我对这些可能性印象深刻。

我使用 Electron 的体验非常棒。我非常感谢维护它的团队，并衷心祝愿这个平台未来一切顺利。它为我们带来了许多优秀的应用程序，希望它在未来也能继续为我们带来更多精彩的应用。

如果您对使用 Electron 进行开发有任何疑问，欢迎留言。我计划撰写一篇关于在 Electron 开发中使用 TypeScript 的文章，以及我如何构建代码结构的文章。

另外，别忘了看看我正在开发的应用程序。当然，我也欢迎大家提出任何反馈意见。