大家好,很高兴又见面了,我是" 前端 进阶 ",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发! Gluon:使用系统安装的浏览器和 NodeJS 从网站创建桌面应用程序的新框架1.什么是Gluon? Gluon 是一个新的框架,用于从网站创建桌面应用程序,使用系统内置的浏览器(不是 webviews)和 NodeJS,与其他现有的活跃项目有很大不同 ,Gluon开放创新并具有一些主要优势。 Gluon 不使用其他类似框架打包浏览器(如 Chromium)或使用 webview(如 Windows 上的 Edge Webview2),而是使用系统安装的浏览器,如 Chrome、Edge、Firefox 等。 Gluon 支持基于 Chromium 和 Firefox 的浏览器作为前端,而 Gluon 的后端使用 NodeJS 是通用且易于开发的(也允许通过使用相同的堆栈从其他流行的框架(如 Electron)轻松学习)。2.Gluon有什么优势? Gluon有什么优势?系统安装的浏览器:允许用户选择支持大多数基于 Chromium 和 Firefox 的浏览器,没有 webviews打包代码小:<1MB 使用系统节点,<10MB 时打包它浏览器引擎:Chromium 和 Firefox 支持作为浏览器引擎,不同于任何其他活动框架小且易于使用:Gluon 有一个简单而强大的 API 来开发带有 Node 后端的应用程序支持 Deno(实验性的):Deno 也作为一个选项(开发者选择)来替代后端的 NodeJS快速构建: Gluon 在大多数机器上的小型项目构建时间不到 1 秒积极开发并听取反馈 : 每周都会有新的更新,如果社区喜欢(例如 Firefox 支持!),可以快速添加计划外的功能跨平台 : Gluon 适用于 Windows、Linux 和 macOS (WIP) Gluon使用火狐或者Chrome3.Gluon项目现状 Gluon 项目开源还不到一个月,因此仍处于早期和实验状态。 但它已经显示出巨大潜力!下面是Gluon项目目前的一些状态。 Gluon项目现状Gluon项目现状4.Gluon与不同项目对比4.1 内置能力对比 Gluon vs Electron vs Tauri vs Neutralinojs内置能力对比4.2 性能对比 基本(纯 HTML)Hello World 演示,在机上最新的 Windows 10 上测试结果。 使用截至 2022 年 12 月 9 日所有框架的最新稳定版本。测试结果如下: Gluon vs Electron vs Tauri vs Neutralinojs性能对比 从上图可以看出,Gluon与Tauri、Electron 、 Neutralinojs相比,在打包时间、包大小、内存使用、打包时间上等诸多维度都具有明显的优势。5.Gluon典型用例5.1 新开窗口 在 Gluon 中打开一个窗口就像一个函数调用一样简单,同时还提供了诸多选项可用,例如窗口大小或加载额外代码。import * as Gluon from "@gluon-framework/gluon"; const Window = await Gluon.open("https://gluonjs.org");5.2 IPC进程通讯 IPC(进程间通信)允许您在后端和网站前端之间进行通信。 Gluon 有一个简单但功能强大的异步 IPC API,它在 Node 和公开的 Gluon Web API 中也几乎相同,以允许更容易和更快的开发。 它还具有多个通用的子 API 来完成常见的事情,包括包装基本 API,因此大多数开发人员不需要使用不必要的复杂的基于事件的系统:// Node后端 import * as Gluon from "@gluon-framework/gluon"; const Window = await Gluon.open("https://gluonjs.org"); Window.ipc.store.config = { env: "production" }; import { writeFile } from "fs/promises"; let log = ""; Window.ipc.log = msg => { // 打印日志到磁盘 log += msg; writeFile("app.log", log); // 写入日志到文件 };5.3 Idle API Idle API 是 Gluon 的一项独特功能,允许休眠"Gluon 窗口以节省系统资源。 休眠时会完全杀死浏览器(使用约 30MB 的内存),而休眠使用页面的屏幕截图作为占位符(使用约 60MB 的内存)。 您可以使用 API 手动休眠、睡眠和唤醒,或者使用自动空闲管理,它会在选定的时间段内最小化窗口时休眠,并在它再次聚焦时将其自动唤醒。// Node后端 import * as Gluon from "@gluon-framework/gluon"; const Window = await Gluon.open("https://example.com"); const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); await sleep(5000); // 等待窗口完全加载 Window.idle.hibernate(); // 休眠窗口 await sleep(5000); Window.idle.wake(); // 唤醒窗口 await sleep(5000); Window.idle.sleep(); // 休眠窗口 await sleep(5000); Window.idle.wake(); // 唤醒窗口6.本文总结 本文主要和大家探讨下一个全新的桌面开发框架Gluon的现状,并与 Electron 、Tauri 、 Neutralinojs等诸多前辈进行对比。当然,有些人可能对Electron 、Tauri 、 Neutralinojs等有诸多执念,那就当一次看客,知道有这么个框架好了。文末的参考资料提供了大量优秀文档以供学习,如果有兴趣的读者可以自行阅读。 参考资料 https://github.com/gluon-framework/gluon https://gluonjs.org/