站点图标 高效码农

Valdi：高效跨平台 UI 框架，轻松实现原生体验

高效码农

探索 Valdi：一个高效的跨平台 UI 框架

大家好，我是这里的一个开发者爱好者。今天，我想和你聊聊 Valdi 这个框架。它是一个跨平台 UI 框架，能让你用 TypeScript 写一次代码，就能在 iOS、Android 和 macOS 上运行原生视图。听起来挺实用的，对吧？如果你是软件工程或相关专业的毕业生，正在找一个能平衡开发速度和性能的工具，Valdi 可能就是你要的那个。我们一步步来了解它，从基础开始，到怎么参与贡献，再到社区规范。别担心，我会用简单的话解释清楚，还会预测一些你可能有的问题，直接给你答案。

先说说 Valdi 是什么。Valdi 是一个开源项目，已经在 Snap 的生产应用中用了 8 年。它现在处于 beta 阶段，主要因为开源后的工具和文档还需要更多实际测试。但核心功能已经很稳固了。它的目标是解决跨平台开发的老问题：要么开发快但性能差，要么性能好但开发慢。Valdi 用声明式的 TypeScript 组件，直接编译成原生视图，不用 web 视图或 JavaScript 桥接。这意味着你的 app 运行起来像原生的一样流畅。

Valdi 的核心优势

你可能会问：“为什么我要用 Valdi，而不是其他跨平台框架？” 好问题。Valdi 的设计就是为了在性能和开发体验上找到平衡点。让我列出几个关键点：

  • 真正的原生性能：不像有些框架依赖 web 视图，Valdi 的组件直接转成平台的原生视图。比如在 iOS 上是 UIKit，在 Android 上是对应的视图系统。这避免了桥接的开销。
  • 自动视图回收：有一个全局视图池，能重用视图，减少加载时间。想象一下，切换屏幕时不用每次都新建视图，这对 app 的响应速度有大帮助。
  • 优化的渲染：组件独立重渲染，不影响父组件。布局引擎用 C++ 写，在主线程跑，跨线程开销小。
  • 视口感知渲染：只渲染可见的部分，适合无限滚动列表，不会卡顿。

除了这些，Valdi 还有其他性能优化，比如 worker 线程用于后台处理，native 动画和手势识别。这些都让 app 感觉更 native。

开发体验呢？Valdi 知道传统 native 开发周期长，所以加了热重载：改代码几毫秒就看到变化，不用重编译。还能在 VSCode 里调试，设置断点、检查变量、性能分析。语法用 TSX，熟悉 React 的会觉得亲切，但它是为 native 优化的。

Valdi 的灵活性也很强。你可以把它嵌入现有 native app，或者反过来把 native 视图放进 Valdi 布局。支持 polyglot 模块，用 C++、Swift、Kotlin 或 Objective-C 写关键代码，和 TypeScript 安全交互。还有 protobuf 支持，数据序列化高效。

它支持 Flexbox 布局，自动 RTL；内置测试框架；集成 Bazel 构建系统，确保构建可重复和增量。

Valdi 在生产中证明了自己，能处理复杂动画、实时渲染和手势系统。如果你做的是需要高性能的 app，比如社交或媒体类，Valdi 是个好选择。

一个简单的 Valdi 示例

想看看 Valdi 怎么用？这里有个基本组件的例子。用 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>;
  }
}

这个组件创建一个黄色背景的视图，里面有个黑字的标签显示 “Hello World! 👻”。在 iOS 上运行看起来像这样：

Hello World example running on iOS

简单吧？它直接编译成原生视图，性能 native。

如何开始使用 Valdi

你可能在想：“我怎么安装和启动 Valdi？” 别急，我一步步告诉你。Valdi 支持 iOS、Android 和 macOS。详细指南在 docs/INSTALL.md 里，但这里总结一下。

步骤 1: 设置环境

  • 确保有 Node.js 和 TypeScript（5.x 版本）。
  • 对于 iOS，需要 Xcode；Android 需要 Android Studio；macOS 类似 iOS。
  • Clone 仓库：git clone https://github.com/Snapchat/Valdi.git（假设这是仓库地址，根据 README 推测）。

步骤 2: 安装依赖

用 yarn 或 npm 安装。Valdi 用 Bazel 构建，所以安装 Bazel。

步骤 3: 构建和运行

  • 运行 Bazel 构建命令。
  • 对于热重载，启动 Hermes 调试器在 VSCode。
  • 嵌入现有 app：用 native-bindings 把 Valdi 组件加进 UIKit 或 Android 视图。

更多细节看 Getting Started Guide。如果你卡住了，加入 Discord 问问：https://discord.gg/uJyNEeYX2U。

Valdi 的文档覆盖了从安装到高级主题，比如性能优化、动画、手势等。还有 codelabs 教程，帮助你上手。

Valdi 的社区和贡献

Valdi 是开源的，欢迎大家参与。社区用 Discord 交流，还有 Contributor Covenant 风格的行为准则，确保大家友好相处。

你可能会问：“我能贡献什么？” Valdi 欢迎各种形式：

  • 修复 bug
  • 改进文档
  • 加测试或性能优化

新功能？先在 Discord 讨论。

如何贡献：一步步指南

  1. 阅读准则：先看 CONTRIBUTING.md 和 CODE_OF_CONDUCT.md。
  2. Fork 仓库：创建你的分支。
  3. 做修改：遵循编码标准——用现有风格，文档齐全，加测试，别加多余依赖。
  4. 写 commit：用 conventional commit，比如 “feat: Add new feature” 或 “fix: Resolve bug”。
  5. 跑测试：确保不破现有功能。
  6. 提交 PR：描述清楚变化。维护者会 review，建议修改，然后 merge。

贡献后，你会被加到 All Contributors 列表，认可代码、文档、设计等所有贡献。

法律方面：贡献时，你保证是原创或有权提交，授予 MIT 许可下的使用权。如果有专利，授予免费许可。不需要 CLA，但确保第三方代码兼容 MIT 并 attribution。

Valdi 的行为准则

社区健康很重要。Valdi 的 Code of Conduct 基于 Contributor Covenant 2.1，确保每个人不受骚扰，包容多样性。

我们承诺什么？

作为成员、贡献者和领导，我们承诺让社区无骚扰，无论年龄、体型、残疾、民族、性别、经验、教育、经济地位、国籍、外貌、种族、种姓、颜色、宗教或性取向。

我们会以促进开放、欢迎、多样、包容和健康社区的方式行事。

积极行为示例

  • 对他人表现出同理和善良
  • 尊重不同意见、观点和经验
  • 给出并优雅接受建设性反馈
  • 承认错误、道歉，并从中学习
  • 关注社区整体利益，而非个人

不可接受行为

  • 使用性化语言或图像，性关注或 advances
  • 挑衅、侮辱、贬低评论，个人或政治攻击
  • 公开或私下骚扰
  • 未获许可发布他人私人信息，如地址或 email
  • 其他在专业环境中不适当的行为

执行责任

社区领导澄清和执行标准，对不适当行为采取公平行动。能移除、编辑或拒绝不符贡献，并解释原因。

准则适用于社区空间和代表社区的公共场合，如用官方 email 或社交账号。

报告问题

遇到问题？报告给 opensource@snap.com。会快速公平调查，尊重隐私。

执行指南

领导根据影响决定后果：

  1. 修正：不适当语言——私人书面警告，解释为什么，可能要公开道歉。
  2. 警告：单一或系列违反——警告，指定期无互动，违反可禁。
  3. 临时禁：严重违反——临时禁互动。
  4. 永久禁：模式违反，如持续不适当、骚扰或贬低群体——永久禁。

更多 FAQ 在 https://www.contributor-covenant.org/faq。

常见问题解答 (FAQ)

我预测了一些你可能的问题，直接回答。基于 Valdi 的文档，这些是常见疑问。

Valdi 是什么？

Valdi 是一个跨平台 UI 框架，用 TypeScript 写声明式组件，编译成 iOS、Android、macOS 的原生视图。目标是 native 性能加快速开发。

Valdi 支持哪些平台？

iOS、Android 和 macOS。见 platforms badge。

Valdi 是开源的吗？

是的，MIT 许可。见 LICENSE.md。

Valdi 的状态如何？

Beta，因为开源工具和文档需更多测试。但核心已在生产用 8 年。

如何报告 bug 或请求功能？

开 issue，提供细节：重现步骤、OS、Valdi 版本、预期 vs 实际行为、可能原因。

Valdi 有组件库吗？

组件库即将推出：https://github.com/Snapchat/Valdi_Widgets。

Valdi 如何处理性能？

通过自动视图回收、独立渲染、C++ 布局引擎、视口渲染。详见 Performance Optimization Guide。

我能把 Valdi 嵌入现有 native app 吗？

能，用 native-bindings。反之也行，用 加 native 视图。

Valdi 支持 native API 吗？

支持，通过 polyglot 模块和自动代码生成。TypeScript 接口编译成 Kotlin、Objective-C、Swift 绑定。

Valdi 有测试框架吗？

有，组件级单元测试。见 workflow-testing.md。

如何加入社区？

Discord：https://discord.gg/uJyNEeYX2U。

贡献需要签 CLA 吗？

不需要，但同意 MIT 兼容许可和专利授予。

如果违反行为准则会怎样？

根据严重度，从警告到永久禁。报告给 opensource@snap.com。

如何优化 Valdi app 的性能 (HowTo)

假设你已经在用 Valdi，想提升性能。这里是基于文档的步骤指南。

步骤 1: 理解视图回收

Valdi 的全局池重用视图。确保组件设计支持回收，比如避免状态依赖特定视图。

步骤 2: 优化渲染

用独立组件渲染。避免不必要重渲染，通过 shouldComponentUpdate 控制。

步骤 3: 用 worker 线程

对于后台任务，用 worker-service 移到别线程，减少主线程阻塞。

步骤 4: 布局优化

用 Flexbox，测试 RTL。布局引擎高效，但复杂布局测试性能。

步骤 5: 视口渲染

在列表用 viewport-aware，确保只 inflate 可见项。

更多见 performance-optimization.md。

如何在 Valdi 中添加 native 代码 (HowTo)

想混用 native？这样：

步骤 1: 创建 polyglot 模块

用 annotations 定义接口，生成绑定。

步骤 2: 写 native 实现

在 C++、Swift 等写，暴露给 TypeScript。

步骤 3: 在组件用

导入模块，调用方法。数据和回调安全传递。

详见 native-polyglot.md。

Valdi 的高级特性表格

为了清晰，这里用表格总结高级特性：

特性 描述 文档链接
动画 Native 动画，原生感觉 advanced-animations.md
手势 平台 native 处理 core-touches.md
Worker 线程 多线程 JS 执行 advanced-worker-service.md
Protobuf 高效数据序列化 advanced-protobuf.md
Full-stack 整个特征在 Valdi 建，少桥接 advanced-full-stack.md
Bazel 集成 可重复构建 workflow-bazel.md
调试 VSCode 断点、堆 dump workflow-hermes-debugger.md

贡献时的法律注意事项

贡献时，确保原创。授予 MIT 下使用、修改、分发权。专利授予免费许可。道德权 waived 或不主张干扰项目。

如果你是公司贡献，确保有权。

为什么 Valdi 适合你的项目？

想想你的需求。如果你要跨平台、native 性能、快速迭代，Valdi 合适。它不是万能，但对需要嵌入 native 或处理复杂 UI 的项目强。

例如，在 Snap app 中，它处理实时渲染和动画，没问题。

结束语：加入 Valdi 社区

Valdi 不只是框架，是社区。跟着准则贡献，享受过程。有什么问题，Discord 见。我们一起让它更好。

退出移动版