跨平台 UI 框架 Valdi

58次阅读
没有评论

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>;
  }
}
跨平台 UI 框架 Valdi

快速开始

先决条件: 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 的无缝集成用于高效的数据序列化

在生产环境的验证

功能亮点

正文完
 0
评论(没有评论)

YanQS's Blog