TypeScript 直接编译成原生二进制,没有浏览器,没有 V8

一句话介绍

W3C OS 是一个基于 Linux 的操作系统,应用使用标准 W3C DOM + CSS 编写(和 Web 一样的 API),但通过 Rust/LLVM 编译成原生机器码。一个应用只有 2.4 MB,启动不到 100ms,内存占用约 15 MB。AI 代理可以在 1 毫秒内读取每个 UI 元素 ------ 不需要截图猜测。

GitHub : github.com/wangnaihe/w...


为什么做这个?

做过桌面开发的人应该都有同感:

Electron ------ 每个应用打包一个 90 MB 的 Chromium,单窗口吃 200 MB 内存。Slack、VS Code、Discord...... 本质上就是在跑一个浏览器。

React Native / Flutter ------ 虽然比 Electron 轻,但仍然依赖解释器或虚拟机,不是真正的原生。

Qt / GTK ------ 真正原生,但 API 完全不同,学习成本高,生态小。

与此同时,全球有几千万开发者已经熟悉 Web 平台:DOM、CSS、TypeScript。这是世界上最大的开发者生态。

问题是:为什么用 Web 技术写应用,就必须拖着一个 90 MB 的浏览器?

核心思路

把 W3C 标准(DOM + CSS)当作通用应用框架,直接编译成原生机器码:

scss 复制代码
app.tsx  →  w3cos build  →  原生二进制 (2.4 MB)

编译流水线:

  1. 解析 TypeScript 为 AST
  2. 转译 AST 为 Rust 源码(DOM 调用变成 Rust 结构体操作)
  3. 编译 Rust → 原生 ELF/Mach-O 二进制(通过 rustc/LLVM)
  4. 运行 标准进程 ------ 没有运行时,没有虚拟机,没有垃圾回收

底层技术栈:

  • Taffy ------ CSS 布局引擎(Flexbox、Grid、Block)
  • tiny-skia ------ 2D 渲染(第二阶段换 Vello + GPU)
  • winit ------ 原生窗口管理

写一个应用

tsx 复制代码
import { Column, Text, Button } from "@w3cos/std"

export default
<Column style={{ gap: 20, padding: 48, alignItems: "center", background: "#0f0f1a" }}>
  <Text style={{ fontSize: 42, color: "#e94560" }}>W3C OS</Text>
  <Text style={{ fontSize: 20, color: "#a0a0b0" }}>用 TSX 写的原生应用</Text>
  <Button style={{ background: "#e94560", borderRadius: 8 }}>开始使用</Button>
</Column>

编译:

bash 复制代码
$ w3cos build app.tsx -o myapp --release
⚡ 转译 TS → Rust... done
🔨 编译原生二进制... done
✅ 输出: ./myapp (2.4 MB)

产出的就是一个标准的原生可执行文件,双击就能跑。

和现有方案的对比

Electron React Native Flutter W3C OS
包体积 90+ MB 30+ MB 15+ MB 2.4 MB
内存 200+ MB 100+ MB 80+ MB ~15 MB
启动速度 2-5 秒 1-3 秒 0.5-2 秒 < 100ms
语言 JS (V8 JIT) JS (Hermes) Dart (AOT) TS (原生 AOT)
运行时 Chromium Bridge + Native Dart VM
AI 读取 UI 截图 (1-3s) 截图 截图 DOM 树 (< 1ms)

AI 原生:为什么这很重要

这是我最兴奋的部分。

当前所有操作系统对 AI 来说都是不透明的。AI 代理想操作一个桌面应用,需要:

  1. 截屏
  2. 发给视觉模型
  3. 猜测屏幕上有什么 UI 元素
  4. 点击像素坐标,然后祈祷点对了

每次操作要 1-3 秒,消耗大量 API 费用,而且一旦 UI 改版就全部失效。

W3C OS 的做法:所有应用都基于 DOM。AI 代理直接读取结构化的 DOM 树:

yaml 复制代码
传统 OS:  AI → 截图 → 视觉模型 → 猜测 → 点击坐标 (1-3 秒, ¥¥¥)
W3C OS:   AI → DOM 树 → 结构化元素 → 精确操作 (< 1ms, 免费)

三层访问模型:

  • Layer 1 ------ DOM 访问:直接读写任何元素,触发事件。100% 精确,< 1ms
  • Layer 2 ------ 无障碍树:ARIA 兼容的结构化摘要,给 LLM 用,token 消耗极少
  • Layer 3 ------ 标注截图:兼容 Claude Computer Use / UI-TARS 等视觉方案

在 AI 代理越来越重要的今天,一个 AI 可以「看懂」的操作系统,价值不言而喻。

它还是一个操作系统

W3C OS 不只是应用框架 ------ 它可以作为独立操作系统启动。ISO 镜像约 50-100 MB(基于 Buildroot 构建),几秒钟启动,直接进入 W3C OS Shell。

bash 复制代码
# 构建 ISO
./system/scripts/build-iso.sh

# 用 QEMU 运行
qemu-system-x86_64 -cdrom w3cos.iso -m 2G -vga virtio

# 或者刷到 U 盘启动
sudo dd if=w3cos.iso of=/dev/sdX bs=4M status=progress

AI 驱动开发

W3C OS 的开发模式也很特别:AI 写代码,人类做决策

复制代码
人类提 Issue → 管理 AI 分类 → 开发 AI 写代码 → 人类审核合并

AI 开发消耗的 token 由社区赞助。100% 用于 AI 计算,没有人类工资,完全透明。

当前进度

Phase 0(骨架)已完成:

  • 7 个 Rust crate,完整的 Cargo workspace
  • CSS:Flexbox、Grid、Block、定位、溢出、z-index、阴影、变换、过渡
  • W3C DOM API:Document、Element、Events、querySelector
  • AI Bridge:三层访问模型 + 权限系统
  • TS → Rust 编译器
  • 4 个示例应用、Dockerfile、可启动 ISO 脚本

正在开发 Phase 1:响应式状态系统、事件处理、文本输入、动画。

试试看

bash 复制代码
git clone https://github.com/wangnaihe/w3cos.git
cd w3cos
cargo build --release
./target/release/w3cos build examples/showcase/app.ts -o showcase --release
./showcase

也可以用 GitHub Codespaces 一键启动。


GitHub : github.com/wangnaihe/w... 许可证: Apache 2.0

欢迎 Star、Fork、提 Issue。如果你觉得这个方向有价值,也欢迎分享给更多人。

相关推荐
Talents2 小时前
OpenLayers 7.5.2 判断点是否在区域边上
前端
cmd2 小时前
前端基础必看:JS 变量提升 & 函数提升完整解析
前端·javascript
小金鱼Y2 小时前
前端必看:this 不是玄学!5 大绑定规则帮你永久告别 this 困惑
前端·javascript·面试
谁在黄金彼岸2 小时前
用 AI 设计力打造专业 UI/UX:在 Trea、Qoder 等 AI IDE 中集成 ui-ux-pro-max-skill
前端
We་ct2 小时前
React Hooks 核心原理
前端·react.js·链表·前端框架·reactjs·hooks
~无忧花开~2 小时前
React组件与Props完全指南
开发语言·前端·react
爱丽_2 小时前
Vue3 响应式系统:`ref`/`reactive`/`watchEffect` 的工作方式与最佳实践
前端·vue.js
~无忧花开~2 小时前
React元素渲染:核心概念全解析
开发语言·前端·javascript·react.js