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

Valdi是Snapchat开发的跨平台UI框架，已在内部使用8年，现已开源。它允许开发者使用TypeScript编写声明式UI代码，然后编译直接生成iOS、Android和macOS的原生视图，从而实现原生级性能，同时保持高开发效率。 ### 关键要点 - **研究表明**，Valdi解决了跨平台开发的经典权衡：它结合了React Native的开发速度和Flutter的性能，但通过直接编译到原生控件，避免了JS桥接的开销，似乎更适合对性能敏感的应用。 - **证据倾向于**Valdi在动画和列表渲染上表现出色，但作为新开源项目，其生态仍需时间成熟；与Flutter相比，它更注重原生集成，而非自绘引擎，这可能减少体验不一致，但也限制自定义。 - **存在争议**：一些开发者认为Valdi可能颠覆React Native，但其他人指出其beta状态和有限文档可能增加采用风险；总体上，它为大型应用提供了一个平衡选项，但小团队可能更青睐成熟框架。 ### 什么是Valdi？ Valdi是一个开源跨平台UI框架，由Snapchat开发，用于编写声明式界面。它使用TypeScript编写UI组件，编译后直接生成原生控件（如iOS的Swift/Objective-C和Android的Java/Kotlin），性能达到原生级，却能享受热重载和完整调试。一句话：把TypeScript的研发效率直接编译成原生的运行性能，让跨平台第一次真正无妥协。 ### 为什么Snapchat要自己造轮子？ 从2016年开始，Snapchat用户增长迅猛，但React Native性能瓶颈（如动画掉帧、列表卡顿）明显；Flutter当时尚未发布，其自绘引擎可能导致与原生组件体验割裂；纯原生开发则需维护iOS/Android两套代码，功能迭代痛苦。于是Snapchat组建团队，使用TypeScript编写UI，编译器直接输出原生控件，绕过JS桥接。内部代号“Valdi”（源自北欧神话的“力量之神”），目标只有一个：实现开发者速度与原生性能的完美平衡。经过8年、200+版本、5000+合并请求，以及日活约4.5亿用户的实战检验（注：2025年数据约为444-460百万DAU，文本中8.5亿可能为MAU约900百万的笔误），Valdi已成为Snapchat的核心工具，现已开源。 ### 快速上手 Valdi的入门门槛低，支持5分钟内运行 demo，支持iOS和Android。 --- Valdi是Snapchat于2025年11月开源的跨平台UI框架，已在生产环境中使用8年，支撑了Snapchat的大部分功能。该框架旨在解决跨平台开发的根本问题：开发速度与运行性能的权衡。开发者使用TypeScript编写声明式UI，框架会编译生成iOS（Swift/Objective-C）、Android（Java/Kotlin）和macOS的原生视图，无需WebView或JS桥接，从而实现原生级性能，同时保留热重载、调试等现代开发体验。 Valdi的GitHub仓库目前有15.7k星标，528 forks，证明了其初步受欢迎度。它支持嵌入现有原生应用，或在Valdi中嵌入原生组件，还允许使用C++、Swift等语言编写性能关键模块，实现类型安全的多语言集成。 #### 历史与开发背景 Valdi从2016年开始内部开发，当时React Native性能不足，Flutter尚未成熟。Snapchat需要一个能处理复杂动画、实时渲染和手势系统的框架，同时简化跨平台代码维护。经过8年迭代、200+版本更新和5000+合并请求，Valdi经受了Snapchat日活用户（2025年约444-460百万）的考验。开源后，它进入beta阶段，重点改善工具和文档。 #### 核心优势 Valdi的核心优势包括： - **真原生性能**：自动视图回收、独立渲染、C++布局引擎、视口感知渲染，支持无限滚动而无卡顿。 - **开发者体验**：毫秒级热重载、VSCode完整调试（断点、性能分析）、熟悉的TSX语法。 - **灵活集成**：嵌入原生视图、聚语言模块、自动生成绑定、原生API访问。 - **高级功能**：Flexbox布局、工作者线程、本地动画、手势识别、内置测试框架、Bazel构建集成。 - **规模验证**：支撑Snapchat关键功能，如动画和实时渲染。 #### 5分钟跑起来：iOS & Android实战 ##### ① 前置依赖（一次性） - macOS需Xcode。 - 安装Valdi CLI：`npm install -g @snap/valdi`。 - 一键设置：`valdi dev_setup`（安装所有依赖）。 - 推荐安装VSCode/Cursor扩展，支持语法高亮、调试和日志。 ##### ② 创建工程 - 创建目录：`mkdir my_project && cd my_project`。 - 初始化：`valdi bootstrap`。 - 安装平台：`valdi install ios` 或 `valdi install android`。 ##### ③ 写个组件（src/ui/Home.tsx） ```typescript 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> } } ``` ##### ④ 跑起来 使用Valdi CLI运行：`valdi run ios` 或 `valdi run android`（推测基于标准CLI用法，官方文档中隐含）。支持热重载，修改即见效。 #### Valdi vs React Native vs Flutter 以下表格总结了三者的关键比较（基于开源数据和社区讨论）。Valdi作为新人，强调编译到原生；React Native依赖桥接；Flutter使用自绘引擎。 | 方面 | Valdi | React Native | Flutter | |---------------|--------------------------------|--------------------------------|--------------------------------| | **语言** | TypeScript | JavaScript/TypeScript | Dart | | **渲染方式** | 编译到原生视图（无桥接） | 通过JS桥接调用原生组件 | 自绘引擎（Skia） | | **性能** | 原生级，高动画/列表效率 | 桥接开销可能导致卡顿 | 接近原生，但自定义渲染 | | **平台支持** | iOS, Android, macOS | iOS, Android, Web, Windows | iOS, Android, Web, Desktop | | **生态** | 新兴（beta），Snapchat背书 | 成熟，大社区，丰富库 | 成熟，Google支持，插件丰富 | | **优势** | 无妥协性能，热重载，聚语言集成 | 热更新，Web技能复用 | 一致UI，美观动画 | | **劣势** | 文档有限，需macOS for iOS | 性能瓶颈，桥接复杂 | 学习曲线，自绘不总匹配原生 | | **适用场景** | 性能敏感大型App | 快速原型，Web开发者 | 美观一致跨平台App | Valdi在性能上优于React Native的桥接模型，与Flutter类似但更注重原生集成。 #### 当前局限 & 风险 Valdi目前为beta状态，工具和文档需更多开源测试；iOS开发需Xcode和macOS；作为新框架，社区小，第三方库少。先在独立模块或小业务试水，避免全盘采用。 #### 写在最后：Valdi能不能成为下一个主流？ 有优势，有挑战，但要走出Snapchat的影子，需要社区贡献和生态成长。把TypeScript的研发效率直接编译成原生的运行性能，让跨平台第一次真正兼顾两者。8年实战、约4.5亿DAU、15.7k star，已经把坑踩完。现在，轮到开发者社区来推动它了。 --- **关键引用：** - [GitHub - Snapchat/Valdi](https://github.com/Snapchat/Valdi) - [Snapchat Open Sources Cross-Platform UI Framework](https://thenewstack.io/snapchat-open-sources-cross-platform-ui-framework/) - [A Look into Valdi: Snapchat's UI Framework](https://betterstack.com/community/guides/scaling-nodejs/valdi-snapchat/) - [Valdi – A cross-platform UI framework that delivers native performance](https://news.ycombinator.com/item?id=45852854) - [Snapchat Opens Valdi Framework to Developers After 8 Years](https://itsfoss.com/news/snapchat-open-sources-valdi/) - [GitHub README Summary](https://github.com/Snapchat/Valdi) - [Flutter vs React Native: 8 Key Differences](https://strapi.io/blog/flutter-vs-react-native-framework-comparison) - [Snapchat Statistics: Revenue, Users, Downloads (2025)](https://www.blog.udonis.co/mobile-marketing/mobile-apps/snapchat) - [Snapchat Surpasses 900 Million Monthly Active Users](https://newsroom.snap.com/q1-2025-monthly-active-users) - [X Post by Simon Grimm on Valdi vs React Native](https://x.com/schlimmson/status/1990826847295451521) - [X Post by Justin Strong on Valdi differences](https://x.com/GPTJustin/status/1987713450227941406)