当前位置：首页 > news >正文

Valdi：Snapchat 开源的新一代跨平台 UI 框架

news 2025/11/12 5:59:54

🧩 Valdi：Snapchat 开源的新一代跨平台 UI 框架

“用 TypeScript 写出原生 UI，跨平台但不失性能。”

2025 年初，Snapchat（Snap Inc.）正式开源了其内部使用近 8 年的跨平台 UI 框架 —— Valdi。
这款框架的出现，给已经“卷了多年”的跨平台开发领域（React Native、Flutter、Compose Multiplatform、Qt、Tauri…）带来了新的声音。

一、背景：跨平台 UI 的老问题

过去十年，跨平台技术经历了几个阶段：

阶段	技术代表	特点	问题
WebView 容器	Cordova / Ionic	快速上手	性能差、交互不自然
JS 桥接渲染	React Native	JS 写 UI，调用原生组件	桥接通信频繁、性能瓶颈
自绘渲染引擎	Flutter	自己绘制像素、跨平台一致性好	引擎大、内存占用高、非原生控件
Compose Multiplatform	JetBrains	Kotlin 全家桶、原生 API	平台局限，生态小

Snapchat 团队也经历过相似的痛点。
他们需要一种方式 ——
既保留 原生视图的性能与体验，又能 用统一语言快速构建多平台 UI。
于是，Valdi 诞生了。

二、Valdi 的设计原理

Valdi 的核心理念可以用一句话概括：

“声明式 + 编译期生成原生视图”

也就是说：

你使用 TypeScript + TSX 语法编写界面；
Valdi 的编译器会将其编译为各平台的原生视图代码；
运行时 没有 WebView，也没有 JS Bridge。

🔧 原理拆解

声明式 UI 层（TypeScript）
开发者使用 TS 编写组件，语法风格与 React 类似。

import { Component } from 'valdi_core/src/Component'class HelloValdi extends Component {onRender() {<view backgroundColor="#FFFC00" padding={20}><label color="black" value="Hello, Valdi 👻" /></view>}
}

编译层（Valdi Compiler）
解析 TSX → AST → 转译为 Swift/Kotlin/ObjC 等原生代码。
同时生成类型绑定（Type Bindings），实现自动双向通信。
原生层（Native Runtime）
- Valdi 运行时基于 C++，负责布局、渲染、回收等核心机制；
- 所有组件均映射为平台原生控件（如 UIView, TextView）；
- 提供统一的生命周期管理与性能优化机制。
视图回收机制（View Recycling）
类似 RecyclerView 的思想：
Valdi 维护一个全局 View Pool，通过回收与复用原生视图来减少创建成本。
视口感知渲染（Viewport-Aware Rendering）
仅渲染当前视口内的组件，非可见区域不绘制，从根本上减少 UI 布局压力。

三、架构构造与模块划分

Valdi 主要包含以下核心模块：

模块	功能	说明
valdi_core	框架核心	组件系统、渲染树、事件系统
valdi_runtime	C++ 原生运行时	布局、内存管理、视图池
valdi_compiler	TypeScript 编译器	将 TSX 转译为原生层绑定
valdi_bridge	语言绑定层	生成 Swift/Kotlin 接口
valdi_devtools	开发者工具	热重载、调试、VS Code 插件
valdi_ui	内置组件库	Button、Label、ListView 等

结构上，它更像 React + Flutter + SwiftUI 的混合体：

从 React 借鉴了声明式组件模型；
从 Flutter 吸收了跨平台一致性理念；
从 SwiftUI 学到了布局与声明式 DSL 设计。

四、Valdi 的主要优点

✅ 1. 真正原生性能

Valdi 不走桥接路线，生成的 UI 是原生控件，因此性能与体验几乎等同手写 Swift/Kotlin。

✅ 2. 熟悉的 TypeScript 语法

对于前端开发者而言，Valdi 的上手门槛极低。
同时 TypeScript 的类型系统也保证了跨语言的安全性。

✅ 3. 跨平台一致性

一次开发可生成 iOS、Android、macOS 界面，未来计划支持更多平台。

✅ 4. 高效渲染与布局

独立组件渲染（局部更新）
C++ 布局引擎
可见区域优先渲染
视图复用机制

这一系列机制让大规模 UI（例如聊天、feed 流）也能保持高帧率。

✅ 5. 无缝原生扩展

Valdi 可嵌入原生 App，也可在其中嵌入原生模块，实现混合架构。

五、Valdi 的不足与挑战

⚠️ 1. 生态尚不成熟

Valdi 目前仍处于 Beta 阶段，文档、第三方组件、社区生态都比较初期。

⚠️ 2. 学习曲线存在“编译期思维”

不像 React Native 的即时 JS 执行，Valdi 是编译型框架。
对调试和构建理解不足可能导致初期上手难度略高。

⚠️ 3. 框架复杂度较高

Hacker News 上有开发者评论它“over-engineered”：
C++ + TS + Swift/Kotlin 混合带来灵活性的同时，也增加了维护与构建复杂度。

⚠️ 4. 社区与案例较少

除 Snapchat 自身外，尚未看到大规模第三方项目采用。
生态成长速度将决定其未来成败。

六、Valdi 与主流框架对比

特性	Flutter	React Native	Compose Multiplatform	Valdi
UI 渲染机制	自绘引擎	JS 桥接原生	Kotlin 原生	TS 编译原生
性能	高	中	高	高
开发语言	Dart	JS/TS	Kotlin	TypeScript
原生一致性	一致但非原生控件	依赖桥接	高	原生控件
成熟度	高	高	中	低（Beta）
调试体验	优秀	成熟	一般	良好（VS Code 支持）