v2-1276771c89f9d9aff8f13feae887e13f_1440w.jpg

一、ReScript: JavaScript平台上高质量大规模程序构建的秘密武器

141639790079_.pic_hd.jpg

• 设计为js提供服务的脚本语言

151639790483_.pic_hd.jpg

• 数据与函数分离

二、使用跨端方案 Rax 编写鸿蒙应用

161639791417_.pic_hd.jpg
171639791552_.pic_hd.jpg
181639791786_.pic_hd.jpg
191639791856_.pic_hd.jpg

• 多操作系统模式都有自己的一套体系，基于大前端的思路更加高效（人工成本更低）

201639792127_.pic_hd.jpg
211639792191_.pic_hd.jpg
221639792247_.pic_hd.jpg

• vDOM是一种标准的数据结构，数据驱动UI

231639792340_.pic_hd.jpg
241639792497_.pic_hd.jpg

• 多端渲染对接方案：1、语法编译，编译时思路；2、运行时思路；3、底层渲染指令思路

251639792624_.pic_hd.jpg
261639792692_.pic_hd.jpg

• 多端工程构建：大前端思路下构建多webpack任务（或者多其他打包工具任务，如rollup、vite、gulp等）

271639792714_.pic_hd.jpg
281639792795_.pic_hd.jpg

• 构建跨端方案离不开IDE侧的构建，对研发链路进行串联，兜底方案可以通过Dev Server方案对接第三方的IDE

三、V8 JS AOT化的探索与实践

301639793501_.pic_hd.jpg
321639793598_.pic_hd.jpg
341639793760_.pic_hd.jpg
351639793921_.pic_hd.jpg
361639794052_.pic_hd.jpg

• JS AOT方案：1、使用本地代码（机器码，汇编），缺点：编译慢、体积大、内存高、性能差、CPU架构不通用；2、全字节码缓存，缺点：性能损耗；3、部分字节码缓存，缺点：版本问题、CPU通用性、机型通用性

371639794169_.pic_hd.jpg
381639794337_.pic_hd.jpg

• 有效性：1、PGO（Profile-guided optimization）预发布；2、先验规则，预测需要被执行的代码，增量更新；

391639794434_.pic_hd.jpg
401639794527_.pic_hd.jpg
411639794640_.pic_hd.jpg

• 兼容性：1、在线生成，① 空闲时间预热 ② 访问时生成；2、离线生成

421639794754_.pic_hd.jpg
431639795008_.pic_hd.jpg

• 移动端可做预发布阶段，为JS提供AOT的方案

四、浅谈 web component 实践与应用

• Custom Element、Shadow DOM

五、解读千万级关系网络下的数据探寻可视化技术

441639805937_.pic_hd.jpg

• 海量数据关系处理，使用DAGRE布局+视觉通道映射（颜色）技术绘制节点依赖关系

451639806142_.pic_hd.jpg
461639806199_.pic_hd.jpg

• 海量数据处理方案：1、离线渲染技术，PlanUml及Offline Canvas；2、局部渲染技术，脏矩阵渲染；3、双引擎切换，GPU渲染

471639806365_.pic_hd.jpg

• “毛团”现象处理，图简化技术：1、点聚合，划分粒度，如：下钻访问、交互；2、边剪枝，减少视觉混乱，如：反向删除算法、Prim算法；3、边绑定，减少视觉混乱，如：突出边缘模式；

481639806502_.pic_hd.jpg
491639806589_.pic_hd.jpg
501639806660_.pic_hd.jpg
511639806815_.pic_hd.jpg

• 可视分析，从业务需求角度出发，包括图数据库等的建立

521639806942_.pic_hd.jpg
531639806999_.pic_hd.jpg
541639807082_.pic_hd.jpg

• 可视布局：解决通用布局策略局限性，使用布局融合技术解决：1、子图嵌入（DAGRE+GRID）；2、布局叠加：前置布局+力导布局+节点压实+网路对齐+网格扩容；3、子图融合；4、智能布局；5、渐进布局

551639807226_.pic_hd.jpg
561639807309_.pic_hd.jpg
571639807337_.pic_hd.jpg
581639807349_.pic_hd.jpg
591639807363_.pic_hd.jpg
601639807377_.pic_hd.jpg
611639807399_.pic_hd.jpg
621639807517_.pic_hd.jpg
631639807550_.pic_hd.jpg

• 子图嵌入方案：1、节点分层；2、虚拟分组；3、节点布局；4、分组内嵌

641639807613_.pic_hd.jpg

• 图质量分析：1、分组分析；2、地理空间分析；3、时序分析；4、算法分析

651639807692_.pic_hd.jpg
661639807731_.pic_hd.jpg

• 图产品思路：上游链路分析，下游影响分析

六、向量到墨水：从绘画视角解析三维模型的漫画风格渲染技术

731639809047_.pic_hd.jpg 741639809237_.pic_hd.jpg

• CEL 动漫风格，着色器渲染：1、颜色相接(Color Differential)，由色相、对比度、饱和度插值产生；2、深度断层(Depth Fall)，由深度变化的不连续产生；3、面的压缩(Compression of Surface)，由视线与物体边缘相切程度产生

七、开源表单方案 Formily 的核心设计思路

761639809722_.pic_hd.jpg
811639810191_.pic_hd.jpg
821639810251_.pic_hd.jpg
831639810301_.pic_hd.jpg

• “数据+协议”表单框架：协议层+桥接层+应用层

771639809838_.pic_hd.jpg
781639809916_.pic_hd.jpg
791639809972_.pic_hd.jpg
801639810016_.pic_hd.jpg

• 工具类编辑器海量字段表单渲染方案

841639810414_.pic_hd.jpg
851639810462_.pic_hd.jpg
861639810499_.pic_hd.jpg
871639810553_.pic_hd.jpg

• 扩展方案：1、属性扩展；2、上下文扩展；3、连接器扩展；4、模板扩展

八、协同文档工作机制简介

921639811774_.pic_hd.jpg

• 文档模型 -> 视图模型，无依赖contentEditable

901639811703_.pic_hd.jpg
911639811735_.pic_hd.jpg
WechatIMG94.png

• OT及CRDT协同

九、CRDT 实时协作技术在稿定编辑器中的应用

951639812233_.pic_hd.jpg
961639812382_.pic_hd.jpg

• Event Souring机制：1、rebase机制，如：git操作；2、operation机制，如：OT(Operational Transform)；3、model机制，如：CRDT(Conflict-free Replicated Data Type)

971639812629_.pic_hd.jpg
981639812693_.pic_hd.jpg
991639812798_.pic_hd.jpg
1001639812984_.pic_hd.jpg
1011639813131_.pic_hd.jpg

• YATA算法，Yjs落地

1021639813278_.pic_hd.jpg 1031639813342_.pic_hd.jpg
1041639813436_.pic_hd.jpg
1051639813610_.pic_hd.jpg

• 性能优化

1061639813755_.pic_hd.jpg
1071639813766_.pic_hd.jpg
1081639813828_.pic_hd.jpg

• 测试方案

十、虚拟偶像诞生记 - 数字人行业和技术探究

1091639814991_.pic_hd.jpg
1101639815629_.pic_hd.jpg
1111639815937_.pic_hd.jpg
1121639816463_.pic_hd.jpg

• 虚拟人物构建

1131639816704_.pic_hd.jpg 1141639816795_.pic_hd.jpg

• web3.0困境

1151639816939_.pic_hd.jpg

• 云渲染：Serverless、web 3d+puppeteer、非实时渲染

十一、Web端短视频编辑器的设计与实现 - 像做PPT一样做视频

1161639817777_.pic_hd.jpg
1171639817842_.pic_hd.jpg 1181639817920_.pic_hd.jpg
1191639817971_.pic_hd.jpg

• 编辑器设计：通用编辑器构建，分层构建
• 视频编辑器分层：应用层、引擎层、依赖层

1201639818083_.pic_hd.jpg
1221639818348_.pic_hd.jpg
1231639818403_.pic_hd.jpg
1241639818497_.pic_hd.jpg
1271639818628_.pic_hd.jpg
1281639818772_.pic_hd.jpg
1301639818879_.pic_hd.jpg

• 时钟同步、音视频编辑码
• 编解码方案：1、FFmpeg+wasm；2、WebCodecs API+库（如：mux.js）