大家好，很高兴又见面了，我是"前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是Gluon？

Gluon 是一个崭新的框架，用于从网站创建桌面应用程序，前端使用系统内置的浏览器（不是 webviews），后端使用NodeJS。 Gluon 不使用其他类似框架打包浏览器（如Electron的Chromium）或使用 webview（如Tauri）的方案，而是直接使用系统安装的浏览器，如 Chrome、Firefox 等。

Gluon：使用系统安装的浏览器、NodeJS以从网站开发桌面应用程序。

这样带来的好处也比较明显：

相对而言，构建包较小Chromium 版本未耦合构建为用户提供更多自由/选择

而Tauri等其他方案使用WebView2/WebKitGTK也有自己独特的优势，比如：

不必依赖系统安装的库完全开源（WebView2为闭源）不用担心在非 Windows 上使用其他库为开发人员和用户提供更多自由/选择（不局限于一个生态系统/库/引擎）2.Gluon项目状态？

从NPM的使用数据来看，Gluon最近周下载量也只有惊人的391左右（估计还处于填坑阶段），而且整体趋势也趋于平稳，没有表现出明显的上升趋势。

Gluon的NPM数据

而Github的数据相对亮眼，开源一个月已经有2.5k的star，53个分支，已经很不容易，确实值得关注。不过总体来说，Gluon还处于“幼儿期”。

Gluon的Github数据

3.Gluon有那些特点3.1 跨平台、跨浏览器、跨运行时

Gluon 支持 Windows、Linux 和 Mac，支持大多数基于 Chromium 和基于 Firefox 的浏览器。还可以使用 Node、Deno 或 Bun 作为 JS 运行时来支持您的应用程序（实验性）。

Gluon跨平台、跨浏览器、跨运行时

3.2 初期阶段&发展迅速快速成型：Gluon 具有简单而强大的 API，同时内置诸多功能积极开发：Gluon 年轻且发展迅速，积极听取反馈。Deno支持：Gluon 还支持使用 Deno（或 Bun）代替 Node，以获得更多选择。

初期阶段&发展迅速

3.3 性能突出

Gluon 不仅用途广泛，而且还是目前最快的框架之一，同时也旨在使用更少的内存和资源。

性能优秀

从上图可以看出，同一个应用的启动时间，Gluon(0.4s)<Electron（0.5s）< Tauri (0.9s) < Neutralinojs (1.2s)。

4.常见API调用4.1 打开窗口

在 Gluon 中打开一个窗口只需要调用一个函数，同时函数提供了诸多选项，可用于设置窗口大小或加载额外代码。

import * as Gluon from '@gluon-framework/gluon';const Window = await Gluon.open(';);// 打开窗口

4.2 IPC调用

IPC（进程间通信）是 Node 后端和 Web 前端相互通信的方式，可以使用 IPC 中的 3 个“子 API”。

暴露函数

可以直接将 Node 函数“公开”到 Web 前端，使用内置的 IPC 事件的简单包装器，而暴露的函数是异步的（由于在内部使用 IPC）。

// Node后端代码import * as Gluon from '@gluon-framework/gluon';const Window = await Gluon.open(';);// 暴露函数用于将信息写入日志文件import { writeFile } from 'fs/promises';let log = '';Window.ipc.log = async msg => {  log += msg;   // 日志  return await writeFile('app.log', log)   // 内容写入文件    .catch(() => false)   // Return false on error    .then(() => true);  // Return true on success};

在前端可以直接调用：

// 网站前端代码const success = await Gluon.ipc.log('Message!');success // true

Store

存储 Node 后端和 Web 前端之间的双向公共数据，但是值必须是 JSON 可序列化的，并重新设置以更新值。

// Node后端代码import * as Gluon from '@gluon-framework/gluon';const Window = await Gluon.open(';);// IPC Store存储前后端公共数据Window.ipc.store.config = {  env: 'production'};

站点调用方式如下:

// 网站前端代码// IPC Store获取前后端公共数据const { config } = Gluon.ipc.store;config.env // 'production'

事件机制

Gluon的IPC使用基于事件的异步机制，您也可以使用该系统。

// Node后端代码import * as Gluon from '@gluon-framework/gluon';const Window = await Gluon.open(';);// 暴露函数用于读取JSON文件内容import { readFile } from 'fs/promises';Window.ipc.on('get config', async () => JSON.parse(await readFile('config.json', 'utf8')));

前端调用如下：

// 网站前端代码const config = await Gluon.ipc.send('get config');

4.3 空闲（Idle） API

Idle API 是 Gluon 的一项独特功能，允许“休眠”Gluon 窗口以节省系统资源。

休眠时，会在内部完全杀死浏览器（使用约 30MB 的内存），而休眠使用页面的屏幕截图作为占位符（使用约 60MB 的内存）。

可以使用 API 手动休眠、唤醒，或者使用自动空闲管理，它会在选定的时间段内最小化窗口时休眠，并在它再次获得焦点时将其唤醒。

//Node后端import * as Gluon from '@gluon-framework/gluon';const Window = await Gluon.open(';);const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));await sleep(5000); // 等待window加载完成Window.idle.hibernate(); //window休眠await sleep(5000);Window.idle.wake(); // 唤醒windowawait sleep(5000);Window.idle.sleep(); // 休眠windowawait sleep(5000);Window.idle.wake(); // 唤醒window

5.Gluon vs. Electron vs. Tauri vs. Neutralinojs不同方案的对比5.1 核心实现方案对比

Gluon vs Electron vs Tauri vs Neutralinojs的内置能力对比

从上图来看，不同方案的对比可以重点关注下前、后端维度：

前端对比：Gluon使用系统安装的Chromium或FireFox，而Electron打包了独立的Chromium，Tauri vs Neutralinojs则使用系统安装的webview。后端对比：Gluon通过系统安装或者打包Node.js，而Electron则使用独立的Node.js，Tauri使用原生Rust，Neutralinojs不限5.2 性能对比

Gluon vs Electron vs Tauri vs Neutralinojs的性能大比拼

从图上可以看出，Gluon与Tauri、Electron 、Neutralinojs等方案相比，在打包时间、包大小、内存使用等诸多维度都具有明显的优势。因此，虽然Gluon还处于“幼儿期”，但是确实是一个值得长期关注的项目。

6.本文总结

本文主要和大家介绍下桌面开发框架Gluon的现状，并在实现方案上与 Electron 、Tauri 等诸多前辈进行对比。当然，有些人可能对Electron 、Tauri 等方案有诸多执念，那就当一次看客，知道有这么框架就好了。文末的参考资料提供了大量优秀文档以供学习，如果有兴趣的读者可以自行阅读。

参考资料