钉钉同构表技术应用

1. 钉钉同构表技术应用来自钉钉文档团队的谢光磊（叶斋）

2. 关于讲师 ‣ 谢光磊，花名叶斋。 ‣ 南京大学地理系；中科院遥感应用研究所。 ‣ 14 年校招进入淘宝前端，19 年加入钉钉文档，目前负责钉钉文档表格类产品研发。 ‣ 译过《WebGL 编程指南》等 3 本前端书籍，开源 WebGL 引擎 G3D 的作者。 ‣ 邮箱：xieguanglei@hotmail.com ‣ 博客：https://xieguanglei.github.io

3. 释题：同构表 vs 异构表严格行列组织增删行字体字号颜色增删列左右垂直对⻬居中定义列类型边框样式异构表  （排版表）合并单元格同构表  （数据表）筛选排序背景色分组非严格行列聚合联合

4. 钉钉同构表一瞥

5. 钉钉同构表一瞥

6. 钉钉同构表一瞥业务层应用层基础组件多表切换埋点国际化表格组件层表格渲染器交互接口表格编辑器配置器模型层基础层次模型统计分析管线公式计算操作接口

7. 大数据量场景下的性能保障 ‣ 同构表支持了十万行级别的数据，百万级的单元格 ‣ 在⻚面里塞百万个 div 元素…… ‣ 虚拟滚动：JavaScript 中维护滚动偏移量，手动把单元格放到目标位置上去

8. 「屏幕上只有这么多像素。」今天，JS 能够轻易 handle 的数据量级，早已远远超出了一块屏幕的像素数量。所以今天，前端页面的渲染问题，不管是 DOM 渲染还是其他 Canvas 什么的，页面再庞大，内容再多，交互再复杂，在这句话面前都没有太大辩驳的余地。

9. 大数据量场景下的性能保障 ‣ 计算却实实在在地发生着…… ‣ 模型层全部放在 Worker 里去跑 ‣ 通信的成本岂不是很高？ ‣ 数据切片：只拿当前视窗内的数据

10. 开发文档类产品，本质上就是在开发桌面应用 Worker 这件事使我意识到，当我开始做类似文档这种复杂前端应用时，其实就已经是在开发桌面应用或原生 App 了。桌面应用面临的场景，遇到的问题，在做文档级 Web 应用时，一个都不会少。

11. 桌面应用 vs Web 应用 WinForm / QT vs DOM & BOM 多线程 vs Web Worker 文件系统 vs LocalStorage 数据库 vs IndexDB GDI / Skia vs Canvas OpenGL / DX vs WebGL Socket vs WebSocket

12. 多提一句 TypeScript C++，C#， Objective-C / Swift，Java，Dart：开发桌面应用或原生 App，从来都是强类型语言。

13. 敏感、合理的键盘响应 ‣ 从「选中」到「编辑」，敏感的键盘响应 ‣ 有多少人熟悉 onCompositionStart, createRange 这些「冷⻔」API 呢？ ‣ 另一个例子：无线设备键盘弹起时，究竟发生了什么？

14. 重新认识浏览器冷门的知识，在 MDN 上几乎没有任何解释的 API，突然成了救命稻草。这些 API，很可能和操作系统一一映射。

15. 多提一句 React React 很棒，但 React 不是银弹。事实上，React 也没有经过文档级应用的检验，需要大量性能优化的 MVVM 可能不适合文档。

16. 钉钉文档团队背景： * 阿里巴巴投入最大，HC 最多的文档团队 * 关于团队和招聘钉钉，亿级 DAU，无限想象空间我的做的事情： * * 基础产品： * 钉盘，对标 OneDrive。 * Ofﬁce 三件套：文字，表格，演示；全部自研业务透出： * 日志，知识库。 * OA 后台，远程会议，在线教育有意者请联系我！

17. 完

18. 推荐一本书 * OpenGL 红蓝宝书相比，这本书里所有的实践都是基于前端技术栈的。 * 与其他讲 Web 3D 的书相比，这本书讲图形学的底层原理，偏理论。 * 很适合前端程序员入门计算机图形学。