「小墨是前端」专注前端技术分享，推荐优质开源项目，展示 Github、Gitee 创意作品，深入前端底层原理，一起探索技术边界。
跨平台开发总是在“开发效率”和“运行性能”之间找平衡。Valdi 的目标就是鱼与熊掌兼得：它让你用 TypeScript 和声明式的 TSX 语法写界面，然后直接编译成 iOS、Android 和 macOS 上的原生 UI 组件，从而在获得原生性能的同时，享受前端的开发效率。
一、核心设计 / 实现拆解
跨平台框架的性能，很大程度上看它的架构。React Native 的 JS-Native 桥接是个异步通信机制，在 UI 操作频繁时，列如快速滑动列表，大量的消息在 JS 线程和原生 UI 线程间来回传递，容易造成延迟和卡顿。
Valdi 的解法很直接：撤销运行时的桥接。它用一套基于 Bazel 的构建系统，在编译时就把 TypeScript 到原生视图的映射关系给确定下来。这个过程有点像“预编译”，它解析 TSX 树，生成能在原生端直接执行的指令。设计的精髓，就是把原本运行时动态干的脏活累活，都提前到编译阶段干完。
好处很明显：运行时没了持续的跨线程通信开销，UI 创建和更新的路径更短，响应更直接，性能自然就上去了。同时，由于保留了 TSX 语法，前端开发者写起来还是很顺手。
代价当然也有：这种重度依赖编译期优化的方案，工具链和构建系统（Bazel）相对复杂，不熟悉 Bazel 的团队有额外的学习成本。而且，框架的灵活性在某些方面会受编译规则的限制，动态性不如解释执行的 JS。列如一些依赖运行时动态生成组件结构的高级玩法，在这里可能就玩不转了。
另一个是它用 C++ 写的布局引擎。布局计算是 UI 渲染里很耗时的一环。Valdi 把这部分用 C++ 实现，让它能直接在主线程上高效运行，减少了数据在不同语言环境间来回倒腾的开销。和一些把布局计算放 JS 线程的方案比，它在主线程密集型任务下表现更好，但这也意味着布局系统的调试和扩展需要 C++ 的知识。
Polyglot 模块：优雅的混合编程
目前的大型应用，很少有完全用单一跨平台框架写的，混合开发是常态。Valdi 在这方面提供了一个叫“Polyglot 模块”的方案，我觉得挺优雅的。
它要解决的核心问题是：怎么让 TS 代码和原生代码（Swift, Kotlin, C++）安全、高效地聊天？传统的手动桥接方式又烦又容易出错。Valdi 的做法是自动代码生成。你只要在 TS 里定义一个接口，写好方法和数据结构，它的工具链就会自动给你生成对应的 Swift、Kotlin 和 Objective-C 接口代码。
这样做的好处是，你在 TS 里调用一个原生功能，感觉就像调用一个本地的、有类型检查的函数一样，IDE 会给你完整的类型提示。反过来，原生代码调 TS 函数也一样。这套机制把混合开发的维护成本降得很低，不用再担心由于接口变更导致两边对不上的低级错误。代价则是增加了一层代码生成的抽象，真出了问题，排查链路会变长，你得判断问题到底出在 TS 代码、自动生成的绑定代码还是原生代码本身。
二、它的取舍：哪里爽，哪里有坑
爽点：
- 原生级的性能体验：这是它最大的卖点。对流畅度、响应速度有极高要求的应用，Valdi 是个很有竞争力的选择。
- 一流的开发效率：毫秒级的热重载和完善的 VSCode 调试，让开发者能像写 Web 应用一样快速迭代，对习惯了原生开发漫长编译等待的工程师来说，效率提升是实打实的。
- 灵活的渐进式集成：强劲的混合开发能力，让它可以很方便地嵌入现有原生项目，风险可控，很适合老项目改造。
需要接受的代价（坑点）：
- 生态还在早期：虽然在 Snapchat 内部用了很久，但作为开源项目，它的社区、第三方库和现成的解决方案远不如 RN 和 Flutter 成熟。许多时候，你可能得自己动手封装原生 SDK，这对项目初期快速验证不太友善。
- 学习曲线不低：上层是 TS，但要玩转它，或者深入排查问题，可能需要了解其底层的 C++ 核心、Bazel 构建系统，甚至一些原生开发知识。这对纯前端背景的团队是个不小的挑战。
- 官方的 Beta 标签：官方在 README 里也坦言项目还在 Beta 阶段，说“our tools and documentation need more battle testing in the open source world”。这意味着工具链、文档和 API 可能还会有变动，选择它就要接受这种不确定性。
三、适合谁用，不适合谁用
比较适合的场景：
- 性能敏感型应用：列如社交、内容流、工具类 App，这些应用的用户对卡顿的容忍度很低。
- 大型团队与老项目迁移：团队里有原生开发人员，想逐步引入跨平台技术提升效率。Valdi 的混合开发能力让它成为一把理想的“手术刀”，可以小范围、低风险地重构。
- macOS 桌面应用开发：想用前端技术栈开发高性能 Mac 应用的开发者，Valdi 提供了一个不错的选择。
不太适合的场景：
- 追求快速上线的小项目：如果你的项目依赖大量现成的第三方 UI 库和功能模块（地图、支付等），RN 或 Flutter 更成熟的生态可能是更好的选择。
- 纯前端技术栈的团队：如果团队完全没有原生开发背景，遇到需要深入排查或封装原生功能的问题时，可能会很吃力。
- 需要覆盖 Web 端的项目：目前来看，Valdi 主要聚焦原生移动端和桌面端，没有明确的 Web 支持计划。如果 Web 是重大目标，选它就意味着要维护另一套技术栈。
项目地址：https://github.com/Snapchat/Valdi
如果这篇文章对你有协助，欢迎点赞、收藏、转发！持续分享前端干货和开源好物，关注我，不迷路～
#前端# #GitHub# #开源# #TypeScript# #React# #性能优化# #跨平台#
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
