Zero Native：Vercel 出人意料的 Electron 杀手锏

中文العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00这是 Xero Native，一个由 Vercel 开发、基于 Zig 的原生应用构建工具，它既可以使用系统的 Web 视图
00:00:05也可以像桌面或移动端应用中的 Electron 那样捆绑整个 Chromium，提供极小的二进制文件
00:00:12以及开发时的即时重建。
00:00:14但是，必须掌握一点 Zig 才能正确使用它，这会劝退 JavaScript 开发者吗？
00:00:18点击订阅，让我们一探究竟。
00:00:20虽然 BUN 团队正在从 Zig 转向 Rust，但它仍然是一种非常酷的语言
00:00:28没有所有权检查器，没有生命周期，并且可以直接调用 C，这意味着任何 C 库只需一次导入
00:00:35而不需要任何粘合代码。
00:00:37而且它的可读性足以让 JavaScript 开发者上手。
00:00:39事实上，如果你想看我从零开始学习如何用 Zig 编程，请在评论区告诉我。
00:00:44我觉得那会是一件挺有趣的事情。
00:00:46但本质上，Xero Native 是一个轻量级的 Zig 外壳，它托管一个 Web 视图来渲染前端
00:00:51它使用 JSON 桥接，以便 Web 视图中的 JavaScript 可以与原生 Zig 层通信，反之亦然，
00:00:58这就是它能够调用操作系统级 API 的方式。
00:01:01如果你觉得这听起来很像 ElectroBUN，嗯，确实有点像。
00:01:04但有一个巨大的区别，我们稍后会在视频中讨论。
00:01:07现在，让我们先看一个非常简单的演示。
00:01:10首先，你需要安装 Zig，我是通过 Miez 安装的。
00:01:13你也可以使用 Brew，然后安装 Xero Native。
00:01:16完成这两步后，你可以运行命令 Xero Native init 来初始化一个新项目。
00:01:22这是我项目的名称，你可以随心所欲地命名。
00:01:25我将使用 React 前端标志，这会安装一个 Vite React 项目。
00:01:30也可以是 Svelte、Vue、Nex 甚至是纯 Vite。
00:01:34按下回车后，Xero Native 会添加几个目录。
00:01:37进入 demo 项目，我们可以看到 app.zon 文件，我稍后会详细介绍。
00:01:43我们有存放图标等静态资源的 assets 目录，还有 build.zig 文件，
00:01:48这是用于 Zig 构建图、JS 桥接和 Web 引擎的，以及包含前端代码的 frontend 目录。
00:01:54事实上，进入该目录，我们可以看到 JavaScript 开发者熟悉的文件。
00:01:58此时，如果运行 zig build run，它将安装所有依赖并在新窗口中打开应用。
00:02:04注意，如果你想在现有的 JavaScript 项目中安装 Xero Native，
00:02:08我建议使用 Vite 这个最小版本，然后将 frontend 目录中的内容替换为你应用的代码。
00:02:15Xero Native 还有一个非常酷的开发服务器，可以掌控整个前端生命周期。
00:02:19如果我们运行 zig build dev，这会编译二进制文件并运行 Xero Native 开发服务器。
00:02:24这样当我编辑代码时，可以看到原生应用实时更新。
00:02:28我甚至可以运行 zig build package，这会构建原生应用以便我发布。
00:02:33我们可以在 zig-out/package 目录下看到它，只有 2.9 MB，非常小。
00:02:39有些人甚至能把它缩减到 1 MB 以下。
00:02:43但如果我想更改应用图标、名称或 Web 引擎呢？
00:02:46这就是 app.zon 文件的用武之地，我可以在这里更改图标名称、项目名称，甚至应用运行的引擎以及窗口大小。
00:02:55以上就是对 Xero Native 的非常快速的概述。
00:02:58还有很多东西我没来得及讲解，比如系统托盘图标、代码签名以及 iOS 和 Android 的嵌入式应用。
00:03:05事实上，我需要再花些时间研究它，可能会再出一期视频。
00:03:09尽管 Xero Native 很棒，但它与同样使用系统原生 Web 视图创建轻量、快速应用的 Electrobun 相比如何呢？
00:03:17对于 Electrobun 来说，Bun 本身就是执行环境，因为你必须为逻辑主进程编写 TypeScript。
00:03:24所以虽然由 Zig 二进制文件启动应用，但代码运行在 Bun Web Worker 中，通过 Bun 的 FFI 与原生 API 通信，这必须经过 C++ 和 Objective-C 层。
00:03:37但使用 Xero Native，你只需要 Zig 二进制文件，不需要 JavaScript，不需要 Bun，只有 Zig，通过简单的 C 导入与操作系统级 API 和任何 C 库通信。
00:03:50这使得它与 Electrobun 相比，拥有了尽可能最薄的原生外壳。
00:03:54但目前你可能需要写一点点 Zig 才能获得 Xero Native 的全部功能，或者至少要修改 Zig 对象表示文件中的配置。
00:04:03此外，Xero Native 的功能不如 Electrobun 丰富，后者允许我更改标题栏样式，甚至添加自定义菜单项。
00:04:11不幸的是，这些功能目前在 app.zon 文件中还不支持。
00:04:15我还提交了一个 issue，因为在 MacOS 上构建安装包第一次没成功，但也可能是我个人技术问题。
00:04:22尽管如此，我相信团队正在努力添加更多功能并修复这些问题，同时增加酷炫的移动端支持。
00:04:29如果你等不及这些功能，它是开源的。
00:04:32所以只要把代码交给 Claude，告诉它你想要什么，我相信它能帮你添加这些功能，对吧？

Key Takeaway

Xero Native 通过 Zig 语言和轻量化外壳，将桌面应用安装包体积降至 3 MB 以下，并实现无需 JavaScript 主进程的直接底层 API 调用。

Highlights

  • Xero Native 是由 Vercel 开发、基于 Zig 语言构建的原生应用工具，支持调用系统 Web 视图或捆绑 Chromium。

  • 该工具生成的二进制安装包体积极小，标准示例仅为 2.9 MB，优化后可缩减至 1 MB 以下。

  • Zig 语言允许直接导入 C 库而无需编写粘合代码，简化了与底层操作系统的交互。

  • Xero Native 使用 JSON 桥接技术，实现 Web 视图中的 JavaScript 与原生 Zig 层之间的双向通信。

  • 项目初始化命令为 xero-native init，支持 React、Svelte、Vue、Next.js 及纯 Vite 等前端框架。

  • 开发环境支持 zig build dev 命令，提供原生应用窗口的实时更新与即时重建功能。

Timeline

Xero Native 核心架构与 Zig 语言优势

  • Xero Native 作为一个轻量级的 Zig 外壳托管 Web 视图并渲染前端。
  • Zig 语言不具备所有权检查器和生命周期限制，且能直接调用 C 库。
  • JSON 桥接机制允许 Web 视图中的代码访问操作系统级 API。

基于 Zig 的设计使得开发者可以规避复杂的内存管理逻辑，同时利用 C 语言生态系统的丰富资源。这种架构提供了一种比传统 Electron 更薄的原生外壳，直接连接前端界面与底层系统功能。虽然 Bun 团队正在转向 Rust，但 Zig 在直接调用 C 接口上的便利性依然是其核心竞争力。

项目初始化与开发流程

  • 开发者通过 Miez 或 Brew 安装 Zig 后即可初始化项目。
  • 应用目录结构包含负责配置的 app.zon、资源文件夹以及 build.zig 构建文件。
  • 现有 JavaScript 项目可通过替换 frontend 目录内容快速迁移至 Xero Native。

使用 xero-native init 命令可以快速搭建包含 Vite 构建工具的开发环境。系统自动生成的构建图处理了 JS 桥接和 Web 引擎的配置。对于已经拥有 React 或 Vue 项目的开发者，直接将前端代码放入指定目录即可实现原生封装。

性能表现与构建部署

  • zig build dev 命令启动开发服务器并支持前端生命周期的实时掌控。
  • zig build package 生成的最终安装包体积极具竞争优势。
  • app.zon 文件承载了图标、项目名称、窗口大小及 Web 引擎的配置信息。

2.9 MB 的包体积显著优于传统跨平台框架。开发服务器能够同步编译二进制文件与前端代码，实现编辑后的实时预览。app.zon 文件作为核心配置文件，允许开发者在不深入 Zig 代码的情况下调整应用的基础属性。

Xero Native 与 Electrobun 的差异分析

  • Electrobun 依赖 Bun 运行环境并在 Web Worker 中通过 FFI 执行逻辑。
  • Xero Native 仅需单个 Zig 二进制文件即可运行，不依赖 JavaScript 主进程。
  • 当前版本的 Xero Native 在自定义标题栏和菜单项等 UI 深度定制功能上略逊一筹。

Electrobun 的通信链路需要经过 C++ 和 Objective-C 层，而 Xero Native 的路径更短且更高效。尽管目前在功能丰富度上存在差距，且在 MacOS 上的安装包构建可能出现兼容性问题，但其开源属性和对移动端支持的规划使其成为潜在的 Electron 替代方案。开发者目前可能需要编写少量 Zig 代码来解锁全部功能。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video