几个月前我分享过一次 GPUI。
当时这个项目给我的印象很深：性能强、渲染链路短、不需要 Chromium，Zed 这类原生桌面应用已经证明了这条路线的上限。
但文章发出去以后，评论区大家的反馈也非常一致——要写 Rust，对前端开发者来说门槛真的太高了。
有人直接问：“问题是也没 JS 啊？”还有一句更直接：“我们要的是 JS 写程序。”
这也是当时 GPUI 最大的尴尬。
前端做桌面应用，目前最主流的还是 Electron 和 Tauri。
Electron 可以直接沿用 React / Vue + Node.js 这套成熟生态。Tauri 虽然底层用了 Rust，但 UI 依然可以继续写熟悉的 React、Vue 和 CSS。
反过来看 GPUI，性能确实漂亮，但想开发 UI，基本绕不开 Rust。
不过最近这块突然有了不少新东西。
React 先接进来了，Vue 紧跟着也来了，甚至已经有人开始研究直接给 GPUI 塞一个 JavaScript Runtime。
React 先上了：GPUIX
最近比较火的项目叫 GPUIX，它的定位非常直接：
用 React + TypeScript 开发 GPUI 原生桌面应用。
- 项目地址：
https://github.com/remorses/gpuix
GPUIX 并没有把 React 页面塞进一个 WebView，而是直接基于 react-reconciler 实现了一套新的 React Renderer。
React 继续负责组件、状态和 Diff，产生的 UI 更新通过 Native Bridge 传给 Rust，Rust 侧维护一棵 RetainedTree，最后再由 GPUI 完成布局和 GPU 绘制。
整个链路可以简单理解成：
React → React Reconciler → Rust → GPUI → GPU
所以前端平时用的 JSX、useState、事件、组件这些东西都还能继续写。
import React, { useState } from 'react'
import { render } from '@gpuix/react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div
style={{
padding: 16,
borderRadius: 8,
backgroundColor: '#313244',
}}
onClick={() => setCount(count + 1)}
>
<text style={{ color: '#fff' }}>
Count: {count}
</text>
</div>
)
}
render(<Counter />)
看上去还是熟悉的 React，但这里有一个很容易误解的地方：这个 div 并不是浏览器里的 HTML <div>。
它不会进入 DOM，也没有 Chrome 在后面帮你渲染。div、text 这些标签最终对应的是 GPUIX 定义的 Host Element，然后交给 GPUI 去画。
换句话说，React 这次真的只剩下 “React” 了，浏览器那一层被拿掉了。
连 motion.div 都做进去了
GPUIX 最近还加入了很有意思的一块：Native Motion。
写法依然很像前端熟悉的动画库：
import { motion } from '@gpuix/react'
function WelcomeCard() {
return (
<motion.div
initial={{ width: 0, opacity: 0 }}
animate={{ width: 320, opacity: 1 }}
transition={{
duration: 0.25,
ease: 'easeOut',
}}
style={{
overflow: 'hidden',
}}
>
<text style={{ color: '#fff' }}>
Welcome
</text>
</motion.div>
)
}
这里比较关键的设计是：React 只需要把动画的 目标状态 传给 Rust，后面的中间值计算和帧刷新由 Rust / GPUI 自己完成，不需要 JavaScript 每一帧都重新跨一次 Native Bridge。
包括 hover、active 这些状态，现在也可以直接在 GPUI 侧处理，不需要为了鼠标移入移出再跑一次 JS round-trip。
这已经和传统 Web 动画的思路有明显区别了。
React 刚上，Vue 也来了
React 这边刚开始热起来，Vue 也出现了一个类似项目：gpui-vue。
- 项目地址：
https://github.com/countradooku/gpui-vue
它的目标同样非常明确：
让 Vue 3 直接渲染到 GPUI。
而且这次完全没有借 React 那套东西，底层直接基于 @vue/runtime-core 做了一套 Vue Custom Renderer。
整个链路变成：
Vue → Custom Renderer → Rust → GPUI → GPU
Vue 本身的架构其实很适合干这件事。@vue/runtime-core 负责组件、响应式、VNode 和 Diff，至于最终创建什么 UI，由 Renderer 决定。
平时 Vue Renderer 操作的是浏览器 DOM，现在 gpui-vue 把这一层换成了 GPUI。
所以代码依然是熟悉的 Vue：
import {
defineComponent,
h,
ref,
} from 'vue'
import { render } from 'gpui-vue'
const App = defineComponent({
setup() {
const count = ref(0)
return () =>
h(
'div',
{
style: {
padding: 16,
borderRadius: 8,
},
onClick: () => count.value++,
},
[
h(
'text',
{},
`Count: ${count.value}`
),
]
)
},
})
render(h(App))
上层依然是 Vue 响应式 + Vue Component + Vue Diff，只是最终 createElement、insert、remove、patchProp 这些操作已经不再指向 DOM，而是转换成 GPUI 的 Native Node。
这才是这个项目真正有意思的地方：Vue 没变，Renderer 换了。
目前 gpui-vue 已经开始做 v-model、Composables、Select、Combobox、Tooltip、Virtual List、Markdown、Code、Diff、Canvas 和 motion.div 等能力。
不过这个项目目前还非常早，现阶段更适合看技术路线和 Demo，暂时别急着拿生产项目梭哈。
这和 Electron、Tauri 其实差得挺远
很多人看到这里，第一反应可能还是：那我为什么不用 Electron、Tauri？
关键就在渲染这一层。
Electron： React / Vue → DOM → Chromium
Tauri： React / Vue → DOM → System WebView
GPUIX / gpui-vue： React / Vue → Custom Renderer → GPUI → GPU
Electron 和 Tauri 都可以完整复用 Web UI，所以生态成熟，开发效率也非常高。
GPUI 这条路线直接拿掉了 DOM 和 WebView，代价则是大量 Web 组件库不能直接搬过去，很多基础组件都需要重新实现。
所以现在讨论谁替代谁还太早，它们解决的问题和成熟度压根不在一个阶段。
甚至有人开始直接给 GPUI 塞 JavaScript
还有一条路线也值得关注。
gpui-component 的作者 Jason Lee 最近就在尝试把 JavaScript Runtime 接进 GPUI，思路是直接在 Rust 应用里嵌入 QuickJS。
这样一来，可以用 JavaScript 给现有 GPUI 应用写扩展，也可以把部分功能交给 JavaScript，甚至尝试直接用 JavaScript 描述整个 GPUI 应用。
- 相关项目：
https://github.com/longbridge/gpui-component
他的思路和 GPUIX 还不太一样。GPUIX 是让 React 继续运行在 Node.js / Bun，Rust 保存 UI Tree 并负责绘制；另一条路线则是直接把 JavaScript Runtime 嵌进 Rust 应用内部。
最终甚至可能出现：
JavaScript → GPUI → GPU
这就有点意思了。
写在最后
几个月前我写 GPUI 的时候，评论区最大的争议就是两个：
必须会 Rust，没有 JavaScript。
现在再看，情况已经发生了明显变化。
React → GPUI
Vue → GPUI
JavaScript → GPUI
这些项目现在都很早，和 Electron 多年的生态积累完全没法比，组件库、系统 API、调试工具、跨平台兼容性还有大量工作要补。
但至少有一点已经不同了：以前 GPUI 是前端开发者围观的东西，现在前端开发者终于可以真正上手写了。
如果后面 React、Vue 这套开发体验能够继续完善，同时保住 GPUI 的原生渲染优势，这条路线确实值得继续盯着。对这个方向感兴趣的话，不妨来云栈社区一起聊聊。
- GPUIX 地址：
https://github.com/remorses/gpuix
- GPUI-VUE 地址：
https://github.com/countradooku/gpui-vue
发表于 1 小时前
|
查看: 6|
回复: 0
