Beta 状态: Valdi 在 Snap 的生产应用中已被广泛使用超过 8 年。之所以标记为 beta,是因为工具和文档仍需在开源社区中继续打磨。Valdi 将在对开发者体验满意时退出 beta。
Valdi 是一个跨平台 UI 框架,在不牺牲开发速度的前提下提供原生性能。 使用声明式 TypeScript 编写 UI,一次编写即可编译为 iOS、Android 和 macOS 的原生视图 —— 无需 WebView、无需 JavaScript 桥接。
GitHub仓库:https://github.com/Snapchat/Valdi
快速示例
一个基本的 Valdi 组件:
import { Component } from 'valdi_core/src/Component';
class HelloWorld extends Component {
onRender() {
const message = 'Hello World! 👻';
<view backgroundColor='#FFFC00' padding={30}>
<label color='black' value={message} />
</view>;
}
}

快速开始
先决条件: Xcode(仅限 macOS)——其它依赖安装可由脚本自动完成!
# 安装 Valdi CLI
npm install -g @snap/valdi
# 一条命令完成设置(安装所有依赖)
valdi dev_setup
# 创建你的第一个项目
mkdir my_project && cd my_project
valdi bootstrap
valdi install ios # 或者 valdi install android
编辑器扩展: 为获得最佳开发体验,建议安装
Valdi VSCode/Cursor扩展(参见https://github.com/Snapchat/Valdi/docs/INSTALL.md#vscodecursor-setup-optional-but-recommended),它提供语法高亮、调试和热重载时的设备日志功能。
快速链接
为什么选择 Valdi?
Valdi 致力于解决跨平台开发的核心矛盾:开发速度 vs 运行时性能。8 年来,Valdi 为 Snap 的大量生产功能提供支持。
真正的原生性能
区别于依赖 WebView 或 JavaScript 桥接的框架,Valdi 将声明式的 TypeScript 组件编译为平台本地视图。Valdi 还提供其它多项性能优势:
- 自动视图回收 — 全局视图池系统在屏幕间复用本地视图,显著降低视图创建延迟
- 优化的组件渲染 — 组件可独立重渲染,不会触发父组件重渲染,从而实现快速的增量更新
- 优化的布局引擎 — 基于 C++ 的布局引擎在主线程运行,最小化数据传递开销
- 视口感知渲染 — 仅对可见视图进行实例化,默认支持高性能的无限滚动
更多信息请参阅 性能优化指南。
面向速度的开发体验
Valdi 消除了阻碍原生开发的传统编译-测试-调试循环:
- 即时热重载 — 在 iOS、Android 或桌面上毫秒级看到修改效果,无需重新编译
- 完整的 VSCode 调试 — 直接在 VSCode 中设置断点、检查变量、性能分析并捕获堆快照
- 熟悉的语法 — 使用 TSX + TypeScript 提供类型安全
灵活的采用模式
Valdi 可渐进集成到现有应用中:
- 在原生中嵌入 Valdi — 在现有的 UIKit 或 Android 视图层次中嵌入 Valdi 组件
- 在 Valdi 中嵌入原生视图 — 通过
<custom-view>在 Valdi 布局中使用平台特定视图 - Polyglot 模块 — 将性能关键代码使用 C++、Swift、Kotlin 或 Objective-C 实现,并导出类型安全的 TypeScript 绑定
- 全栈架构 — 使用 worker 线程进行后台处理,在 Valdi 中构建完整功能,避免平台间桥接代码
深度原生集成
Valdi 在 TypeScript 与原生平台之间生成类型安全的绑定:
- 自动代码生成 — TypeScript 接口编译为 Kotlin、Objective-C、Swift 绑定
- 原生 API 访问 — 通过 polyglot 模块直接调用平台 API 与第三方原生库
- 双向通信 — 在 TypeScript 与原生代码间安全传递复杂数据结构与回调
- 原生 protobuf 支持 — 与 protobuf 的无缝集成用于高效的数据序列化
在生产环境的验证
功能亮点
- Flexbox 布局系统,自动支持 RTL
- Worker 线程,用于多线程 JavaScript 执行
- 原生动画,提供原生体验
- 高级手势识别,平台级处理
- 内置测试框架,支持组件级单元测试
- Bazel 集成,实现可重现的增量构建


