本届前端早早聊大会于2020年6月13日举行，请来了四位前端技术专家来谈一谈前端深藏的文档栈。
这四位前端技术专家和他们带来的内容分别是：
-
灼翎 （来自菜鸟 ） ： 菜鸟业务从 Excel 到 WebExcel 的探索之路
-
叶斋 （来自钉钉） ： 钉钉文档同构表技术应用
-
展新 （来自钉钉） ： 钉钉文档编辑器的前世今生
-
遇春 （来自语雀） ： 语雀电子表格自研之路
菜鸟业务从 Excel 到 WebExcel 的探索之路
WHY Web-Excel
-
Excel 的优势是什么？
-
Excel 的使用对象是谁？
-
Excel 给业务的帮助是什么？
菜鸟业务 Web-Excel 机会点
-
某网点中心运营同学每次分析数据需要从报表平台中拉取数据，导出本地进二次分析，分 析的数据形成报表，截图发给其他运营同学
-
某仓小二运营同学每天做的工作就是从业务平台获取数据，导出线下制作报表，在截图汇报给上级领导
-
物流场景
-
配送
-
仓储
-
运输
-
包装流程
-
中后台管理
-
末端驿站
-
-
系统
-
千仓千面 生产型系统
-
千人千面 沟通数据流转
-
-
效率
- 能上手 操作快
业务核心痛点
-
人与人之间沟通效率问题
-
人与人之间数据协同管理问题
-
数据与业务平台协同问题
格新系统 —— 业务从 Excel 转型到 WebExcel
-
沟通即协作 —— 解决线下业务数据快速线上化
-
协作即创作 —— 解决业务数据管理以及线下数据对接业务平台
钉钉工作沟通工具
-
导入 / 接入 / 新建
-
沟通协作 / 协作创作
-
沟通协作 - 数据收集 - 分发收集
-
一次性填写
-
周期性填写
-
基于数据填写
-
-
协作创作 - 业务管理 - Smart 系统
- 数据管理
- 数据引用/报表
- 三方系统集成
-
-
数据服务
- 数据透视
- 智能图标
- 服务接口
-
权限
- 编辑权限
- 数据权限
- 自定义权限
Smart 模式
- 线下表格
- 异构表变同构表
- 前端解析表格数据
- 数据模型化
- 模型字段设置
- 字段校验
- 枚举设置
- 数据导入
- Smart 系统
- 数据管理
- 数据模型化
- 模型字段设置
- 字段校验
- 枚举设置
- 数据导入
- 用户
技术难点 —— 多人协同
- 所有操作可协同
- 操作传输及时性
- 操作数据一致性
产品建设技术架构
- 导入 Excel => 协同办公 => Smart 系统
- 导入 Excel
- 基础
- 能力集成
沟通即协作 协作即创作
- 管理系统
- 代码研发 - 响应速度慢，交付成本高
- 重复劳动 - 员工每日工作内容重复，效率低下
- 系统无人维护 - 数据孤岛情况严重
- 格新系统
- 面向业务的无代码产品 - 只需会用 excel，不需要懂编程也可以快速上手
- 无代码 workflow
- 跨端操作
- 多维数据分析
- 架构与权限控制
- 智能机器人 Robot - 将重复工作交给智能机器人，解决重复 workflow
- 简单易学
- 打通通知
- 账号安全
- 交互简洁
- 连通业务系统 - 提供多种服务接口，快速对接已有业务系统，打破数据孤岛
- MetaQ
- SDK
- JDBC
- OpenAPI
- 面向业务的无代码产品 - 只需会用 excel，不需要懂编程也可以快速上手
多种方式对接业务数据分析 - 解决业务数据分析链路不完整，将数据回归到业务中
- 服务接口式对接业务数据，让数据处理、数据分析、数据分享整个链路不断层
- 第三放系统嵌⼊&前后端SDK化
- 直接对接存储数据源
SMART 系统与业务平台对接
- Smart 系统 => 数据服务 => SDK 服务化 => 业务平台
- 数据服务
- 字段模型映射
- 配置监听数据存储消息
- 数据服务开放
- SDK 服务化
- 后端服务 SDK 化
- 前端能力 SDK 化
未来展望 - 全面拥抱 Web-Excel
- 钉钉化 —— 钉钉 PC、微应用、创建收集、查看报表
- 服务化 —— 管理数据 SDK、表格解析、导入导出、表格数据模型化
- 业务化 —— 业务数据管理、业务系统对接、业务数据获取、业务数据分析
- 平台化 —— 服务平台化、数据分析平台化
- 智能化 —— 数据解析智能化、数据分析智能化
钉钉文档同构表技术应用
同构表 vs 异构表
- 异构表（排版表）
- 字体字号颜色、左右垂直对齐居中、边框样式、合并单元格、背景色、非严格行列
- 同构表（数据表）
- 严格行列组织、增删行、增删列、定义列类型、筛选、排序、分组、聚合、联合
大数据量场景下的性能保障
- 同构表支持了十万行级别的数据，百万级的单元格
- 在页面里塞百万个 div 元素……
- 虚拟滚动：JavaScript 中维护滚动偏移量，手动把单元格放到目标位置上去
- 计算却实实在在地发生着
- 模型层全部放在 Worker 里去跑
- 通信的成本岂不是很高
- 数据切片：只拿当前视窗内的数据
屏幕上只有这么多像素
- 今天，JS 能够轻易 handle 的数据量级，早已远远超出了一块屏幕的像素数量。 所以今天，前端页面的渲染问题，不管是 DOM 渲染还是其他 Canvas 什么的， 页面再庞大，内容再多，交互再复杂，在这句话面前都没有太大辩驳的余地
开发文档类产品，本质上就是在开发桌面应用
- Worker 这件事使我意识到，当我开始做类似文档这种复杂前端应用时，其实就 已经是在开发桌面应用或原生 App 了。桌面应用面临的场景，遇到的问题，在 做文档级 Web 应用时，一个都不会少
桌面应用 vs Web 应用
- WinForm / QT VS DOM & BOM
- 多线程 VS Web Worker
- 桌面应用 VS Web 应用
- 文件系统 VS LocalStorage
- 数据库 VS IndexDB
- GDI / Skia VS Canvas
- OpenGL / DX VS WebGL
- Socket VS WebSocket
钉钉文档编辑器的前世今生
编辑器简史
- 打字机时代
- 文本编辑器时代
- 富文本编辑器时代
- Web 编辑器时代
- 第一阶段（2003.05 - 2013.01）
- designMode、contentEditable、webkit-user-modify
- 解决浏览器兼容问题
- 规避浏览器的 Bug，以及扩充 API，工具栏的体现
- 第二阶段（2016.02 - 2019.10）
- 抛弃 execCommand API
- 基于 DOM API 实现 selection、range
- 自建内存数据模型，通过事件驱动 view 的更新
- 终极方案，自定义输入框，包括光标、输入法、删除等基础动作，具备绘图布局等能力
- 第一阶段（2003.05 - 2013.01）
钉钉文档
- 文本处理器时代 - 编辑器技术之路
- 纯文本
- 富文本格式
- 多人实时编辑
- 历史回滚
- 划词评论
- 分页
- 标尺系统
- 网格系统
- 内容排版
技术点
- There are many kinds of white-space ， one of them saved the cursor
- The cursor is a special selection
- Hard Break vs Sort Break
- Emoji Family & Delete action
语雀电子表格自研之路
Why
- 为什么做在线电子表格？
- 电子表格推动了产业发展
- 为什么选择自研？
- 生活中99%的产品都值得被重新创造一遍
- 自研
- 底层可控性
- 业务拓展性
- 研发成本与效率
How
- 用了哪些技术？
- 异构 / 同构
- Tips：同构表不支持合并单元格
- 多人实时协同
- 如何将变更同步到其他端
- 同步op
- 同步 Command
- 基于 OP vs 基于 Command
- 解决了什么问题 ？
- 最大单元格数量
- 要支持多少单元格 ： 5M 数据可以存储 250w 单元格
- 表格粘贴破损修复
- 最大单元格数量
What
- 最难的是做决定 : 是否选择自研，取决于对产品核心体验的定义，如果 涉及到产品的核心体验，自研可以将可控性把握在自 己手中。
- 和用户一起成长 : 重视用户的反馈，能提反馈的都是热心用户，自研有时候会 有一些打破用户固有习惯的设计，多听听用户真实使用感受， 对产品细节体验的提升非常重要
- 拥抱复杂度 : 复杂的问题，往往没有现成的最佳方案，需要结合 场景做最优选择，越是复杂的问题，解决后带来的 收益越大，也是形成产品壁垒的关键
- 长期主义 : 在一个被精耕的领域，有大量可以学习和借鉴 的方法，也有很多值得被重新创造的地方，不 可能一蹴而就，保持耐心，追求卓越。
关于前端早早聊大会
你的支持，是早早聊办下去的唯一动力！ 点击保存下图，转发朋友圈即可，越多人参与，越多讲师愿意来分享！ 还想听哪方面的分享，直接加 Scott 微信： codingdreamer 提需求吧！前端早早聊大会目标成为用得上、听得懂、抄得走的技术大会，计划 2020 年办 >= 15 期，由前端早早聊与掘金联合举办，前端早早聊大会行程动态、录播视频/PPT/讲稿资料下载请关注 「前端早早聊」 公众号跟进。
6 月 20 日举办第十届 - 前端跨端跨栈，报名请戳：www.huodongxing.com/go/tl10 ，海报及讲师行程如下：
