钉钉表格 — 从 0 到 1 打造在线 Excel

1. 谢光磊（叶斋）阿里巴巴前端技术专家钉钉表格 — 从 0 到 1 打造在线 Excel

2. 钉钉表格 — 从零到一打造在线 Excel 谢光磊（叶斋）钉钉表格前端架构师

3. 边框样式排版样式冻结行列富文本数值格式行列自适应锁定区域数据条历史记录批注 / 评论宏 / 批处理数据透视表合并单元格复制粘贴条件格式 Excel 查找替换图表筛选视图浮动图片分类汇总公式计算组合排序数据验证浮动形状打印

4. Google Sheets Office 365 Excel WPS Web ...... 钉钉表格

5. 边框样式排版样式冻结行列富文本数值格式行列自适应锁定区域数据条历史记录批注 / 评论合并单元格宏 / 批处理数据透视表复制粘贴条件格式 / 样式钉钉表格查找替换图表筛选视图浮动图片分类汇总公式计算组合排序数据验证浮动形状打印

6. 钉钉表格 vData 协同引擎 OT调度内核模型 op + cp 棋盘模型 mData op + cp Range Man 公式引擎表格组件选区控制 Canvas 单元格控制 vData 行列操作导入导出 OT协调控制器条件格式 api 文字排版复制/粘贴 ...... event 交互处理 props 菜单工具栏类型编辑器只读/演示公式编辑筛选排序 applyOp 富文本编辑表格应用 props 待办任务 @人/锁定

7. 可扩展的表格协同的表格高性能的表格

8. 可扩展的表格

9. 1 1 1 1 棋盘模型 1

10. 响应：单元格样式新增的单元格背景设置为红色特性：公式计算特性：单元格样式计算 B1:D3 区域中空单元格的数量设置背景色为红色 cell.formula=countblank(B1:D3) cell.style.bgColor=red 响应：公式计算引用区域由 B1:D3 修改为 B1:D5 响应：合并单元格合并单元格由 [2,2] 修改为 [3,2] 特性：合并单元格 Range 以 A1 为左上角，合并 2x2 个单元格 cell.merge=[2,2] 注：合并单元格的值存储在左上角单元格(master cell)中

11. RangeMan Range 集中管理 Range，自动响应行列变化

12. 1 1 1 6 8 1 RangeMan StyleMan MergeMan FormularMan

13. 样式选区合并单元格条件格式棋盘模型 RangeMan 浮动图表筛选 / 排序选区锁定自动填充格式刷

14. • 棋盘模型，行列操作。 • 基于 RangeMan 统一管理 Range 模型。 • 基于 Range 模型扩展出大部分功能模块。

15. 协同的表格

16. 协同表格端本地表格应用 cp op cp 保存 data 协同表格服务协同表格端 op cp op 文件系统协同表格端

17. cp Check Point 全量表格数据 op Operation 单次操作的表达

18. v0 s0 s1 v1 cp op op cp 设置 [0, 1] 的背景色在第 1 行后添加 1 行

19. T(Op1, Op2) 用户 A Op1 设置[0,1]的背景色逆(Op1) Op2 恢复[0,1]的背景色在第1行后插入一行 Op3 设置[0,2]的背景色？ X 服务 Op3 Op2 设置[0,2]的背景色在第1行后插入一行。担小负端服务。，率高简单回辑打 * 逻下，同模协规大 * GOT 用户 B Op2 在第1行后插入一行 Op3 设置[0,2]的背景色

20. T(Op2, Op1) 用户 A Op4 Op1 在第1行后插入一行设置[0,1]的背景色 T ？服务用户 B Op2 在第1行后插入一行 Op3 T(Op1, Op2) 设置[0,2]的背景色 Op2 Op3 在第1行后插入一行设置[0,2]的背景色辑。逻份行一 COT 运。。前端高 + 更端限同上 * 服务协，打回需 * 无

21. Op1 Op2 Op1 T(Op1, Op1) T(Op2, Op1) Op2 T(Op1, Op2) Op3 T(Op1, Op4) Op4 T(Op1, Op5) OpN T(Op1, OpN) Op3 Op4 OpN T(Op3, Op1) T(Op4, Op1) T(OpN, Op1) T(Op2, Op2) T(Op3, Op2) T(Op4, Op2) T(OpN, Op2) Java T(Op2, Op3) Rust Op3) T(Op3, T(Op4, Op3) T(OpN, Op2) Client Server JavaScript T(Op2, Op4) T(Op2, OpN) T(Op3, Op4) T(Op3, OpN) T(Op4, Op4) T(Op4, OpN) T(OpN, Op2) T(OpN, OpN) 保如何障性一致？

22. Client Rust Server JavaScript Java WASM WASM WASM

23. • OT (Operation Transform) 是协同算法的关键。 • 上限更高的 COT 调度算法要求 OT 同时运行在两端。 • Rust + WASM 实现 OT，已验证最小闭环。

24. 高性能的表格

25. 高性能：长时间，高强度使用，不卡顿卡顿：往往来自于渲染渲染：从 DOM 到 Canvas

26. 钉钉表格 Web 应用 React Canvas API DOM API WebGL API 模型 / 控制 / 协同等等浏览器表格渲染管线 React DOM Pipeline 浏览器上层图形系统（Skia / GDI）图形系统 / 操作系统底层图形系统（OpenGL / DirectX）操作系统

27. 表格渲染管线网格层首次绘制内容层选区变化背景层排版引擎内容变化滚动文本层装饰层选区层合成到表格主界面

28. 文本层排版引擎 D1 D1 Worker D2 D2 C1 D1 E1 C0 D0 E0 C2 D2 E2 C1 D1 E1 C3 D3 E3 C2 D2 E2 buffer canvas 1 main canvas 双缓冲画布渲染 buffer canvas 2

29. 排版引擎 Hey ？

30. Microsoft Excel 是 Microsoft 为使用 Windows 和 Apple Mactintosh 操作系统的电脑编写的一款电子表格软件。

31. Microsoft Excel 是 Microsoft 为使用 Windows 和 Apple Mactintosh 操作系统的电脑编写的一款电子表格软件。

32. Microsoft Excel 是 Microsoft 为使用 Windows 和 Apple Mactintosh 操作系统的电脑编写的一款电子表格软件。

33. • 选择 canvas 渲染表格主界面。 • 分层表格渲染管线，减少重绘。 • 双缓冲画布，支持流畅的滚动。 • 自研排版引擎。

34. COT & GOT Accumulative Array Segmentation Render Pipeline Typeset & Layout RangeMan Quadtree 钉钉表格共冶一炉 Web Assembly Canvas & Offscreen Canvas Web Worker Awesome TypeScript React + Redux

35. Q&A 欢迎技术交流

钉钉表格 — 从 0 到 1 打造 在线 Excel

钉钉表格 — 从 0 到 1 打造 在线 Excel

钉钉表格 — 从 0 到 1 打造在线 Excel

钉钉表格 — 从 0 到 1 打造在线 Excel