Experience Timeline

我解决过的几个复杂工程问题

这页按时间顺序讲我做过的几类事情:多人协作的报告编辑,跨端公式渲染,复杂表单调试,以及互动课件生产。每一段都从当时的业务麻烦开始,再讲我是怎么把它做成可维护的工程方案。

返回首页向下滚动进入每个经历章节
业务介绍

RaTeX 跨平台原生数学公式渲染

数学公式会出现在 AI 问答、报告编辑、学习内容、文档导出等多个场景。小程序里的碳排放公式只是一个入口,真正的问题是:不同端都需要稳定、轻量、一致地渲染 TeX。

  • 小程序只是使用场景之一,底层能力需要跨端复用
  • 公式、变量、单位需要和 Markdown/富文本内容混排
  • WebView、服务端截图、平台定制实现都难以保证一致性

RaTeX: Rust Core → DisplayList → Native Bindings

RaTeX 去掉 Web 栈,用纯 Rust 完成 LaTeX 解析与排版,产出 DisplayList 后交给各平台原生绘制,避免 WebView 隐藏内存和 JS 启动成本,同时保证跨端一致性。

问题WebView 方案常带来 50-150 MB 隐藏内存与 JS 启动延迟
核心Parser / AST / Layout 产出带坐标的 DisplayList
输出同一份渲染结果分发到移动端、Flutter、RN、Web 和服务端
关键成果
GitHub 1.3k stars社区用户自发发布到 Hacker News已有创业公司接入生产环境React Native 常见 Markdown 渲染库正在接入
  • 覆盖约 99.5% KaTeX 语法,内置 \ce、\pu 支持
  • iOS CoreGraphics、Android Canvas、Flutter FFI、React Native Native 模块均可接入
  • 服务端可生成 SVG,也可用 tiny-skia 光栅化 PNG;内存约 MathJax 服务 1%,速度约 Node 服务 10 倍
业务介绍

商业化广告平台中的复杂表单

广告平台表单不是普通输入项集合,而是大量业务规则、联动字段、动态校验、投放策略和权限状态的组合。真正困难的是联动逻辑难观察、切换路径难复现、回归成本高。

  • 字段联动与动态校验复杂
  • 表单状态变化缺少可视化入口
  • 复杂切换路径需要可记录、可回放、可测试
技术方案

复杂表单 DevTool + 单测治理

围绕 Formik 表单体系补齐调试和测试基础设施:DevTool 可视化当前表单状态,收集字段联动逻辑,记录表单切换路径并支持回放;同时补全核心逻辑单元测试。

观察当前表单状态可视化
定位收集字段联动和规则触发链路
验证切换路径回放 + 95% 单测覆盖率
关键成果
系统性提升大型团队研发效率与稳定性
  • DevTool 展示 values / errors / touched / dirty 等当前状态
  • 收集字段联动关系,定位规则触发链路
  • 表单切换路径录制与回放,降低复现成本
  • 核心表单逻辑单测覆盖率提升到 95%
业务介绍

复杂交互动画题型生产

互动题型最早以 Vue + Lottie 交付,动效、布局和代码逻辑耦合在一起,复杂题型很容易变成一次性定制。真正需要解决的是生产分工:动效团队负责画面与动画,技术团队只关注题型逻辑。

  • 从 Vue + Lottie 迁移到 Cocos 生产链路
  • 布局和动画交给动效团队配置和调整
  • 技术团队沉淀可复用题型逻辑,减少一次性开发
技术方案

Cocos 题型框架 + 引擎加载优化

通过 Cocos 题型框架把逻辑层、动画表现和资源加载拆开:技术侧先提供可复用交互逻辑和数据上报,动效侧在 Cocos 内完成布局与动画;同时优化引擎包、资源预加载和按需加载流程,降低首屏等待。

迁移Vue + Lottie → Cocos 题型生产链路
分工动效负责布局动画,技术负责交互逻辑
性能优化引擎加载、资源预加载和按需加载
关键成果
WebApp 日加载量达千万级Cocos 首次加载从 10s 级压降至 0.5s 级
  • 逻辑层与表现层拆分,题型逻辑可复用
  • 动效团队在 Cocos 内维护布局、时间轴和动画表现
  • 优化 Cocos 引擎包与资源加载流程
  • 首次加载从 10s 级压降至 0.5s 级
业务介绍

需求方需求收敛

迁移到 Cocos 之后,互动内容带来的续报率提升让需求快速放大:互动课程相比非互动课程续报率高 5%,从第一节 Demo 课开始,两年内扩展到幼升小到小学六年级、三个学科的所有课程。技术团队扩张无法线性跟上业务需求,必须和需求方一起完成需求收敛。

  • 需求从 Demo 课扩展到多学段、多学科全量课程
  • Cocos 写法和传统前端不同,新人上手成本更高
  • 技术团队规模无法跟上互动内容的倍数级增长
技术方案

需求收敛 + 动效制作规范

一方面把复杂表现拆回选择、拖拽、连线、排序等基础题型能力,减少一次性定制;另一方面把收敛后的动画规则教给动效团队,并用自动化测试验证关键帧、节点状态和正反向播放约束。

增长2 年内覆盖幼升小到小学 6 年级、3 个学科
规范把动画脚本约束转成动效团队可执行规则
测试自动检查关键帧、节点状态和播放方向
关键成果
支撑 50 人产品团队及 200 人动效团队协作
  • 与需求方共建题型边界,判断哪些需求可收敛为基础题型
  • 把表现层留给动效团队,核心逻辑保持可复用
  • 制定动画制作规范:关键帧、节点状态、正反向播放约束
  • 用逻辑测试校验动画状态,避免错误资源进入生产链路
Open Source / RaTeX

为什么是 RaTeX

最早接触公式渲染来自业务,但我后来把它放到 AI Agent 应用链路里看:模型输出最终要落到 UI,Markdown/HTML 之争、streamdown、LaTeX 公式渲染都在这一层。运行时有 LangGraph,基建有 sandbox,而跨端 LaTeX 原生渲染是闭环里少见但重要的缺口。

我理解的 AI Agent 三层闭环
UI 层输出呈现
MarkdownstreamdownLaTeX 公式渲染
运行时层任务编排
LangGraphagent 编排状态管理
基建层可控执行
sandbox文件系统执行环境权限边界
  • RaTeX 来源于业务,但价值不只在业务:它补上 AI 输出到原生 UI 的短板
  • LaTeX 原生渲染同时有技术价值和业务价值,尤其适合移动端和跨端场景
  • 真正的问题不是“AI 会不会写代码”,而是有没有数据集、benchmark 和验收标准
  • 这也是一次对个人能力边界和 AI 能力边界的实测
Benchmark / 自动化测试AI 架构文章

用 benchmark 探索 AI 的能力边界

开源 agent 项目已经非常多,大家都在探索 memory、skills 和运行时。我在 RaTeX 里选择更可量化的问题:构造数据集、生成 fixture、计算 diff。这个过程也让我更确认,AI 能力已经接近拐点,自动化测试会成为人和 AI 协作的基础设施。