5G时代即将来临，IoT是5G时代一个重要的场景之一。应该以什么姿态和角色去迎接新的技术变革，是每个端开发需要思考的问题。

淘宝技术是新零售的践行者之一。我们曾在线下零售，工厂制造中尝试过包括WebView、Hybrid、纯Native在内的多种技术方案，以求在渲染性能、动态性和开发效率中取得平衡，但效果差强人意。因此，淘宝渲染技术团队在Flutter的Native引擎基础上，建立了一套基于TypeScript的，拥有2D/WebGL/WebGPU能力的可编程自定义的UI渲染管线。

本次分享将会以渲染技术团队在IoT零售中的实践作为起点，详细介绍新的UI渲染管线的原理和实现，包括自定义渲染管线关键实施步骤、引擎中实现的核心技术、跨平台移植的一些细节等内容。希望对关注渲染技术的端侧与会者带来思路上的拓展和帮助。

演讲提纲：

1. IoT时代前端面临的问题

       5G时代概述

       嵌入式设备的开发现状，以及正在发生的变化

       面临的问题

        （1）开发成本和效率问题

        （2）技术引发的动态性问题

        （3）WebView方案因性能带来的成本和体验问题

2. 炙手可热的Flutter

（1）简介

（2）原理简介

（3）生态问题

3. "G"项目介绍

（1）目标定位：使用TypeScript，且拥有Canvas/WebGL/WebGPU能力，可高度定制渲染管线，拥有完整工具链的跨端跨平台高性能渲染解决方案

（2）技术特点：Flutter引擎+TypeScript+GCanvas

（3）框架简介

（4）渲染管线整体流程概述(TypeScript的部分是自定义渲染管线，其余部分归为引擎)

4. 自定义渲染管线详解

（1）树的创建

（2）布局和测量运算

（3）绘制

（4）渲染

（5）视图缓存

（6）输入输出

（7）状态更新

5. 引擎详解

（1）跨平台概述

（2）线程模型

（3）Skia能力概述

6. 工具链简介

（1）如何实现全链路Debugger

7. GCanvas和2D/WebGL/WebGPU能力

8. 展望和总结

（1）TypeScript Runtime

（2）CSS怎么支持

 

听众收益：

1.可以了解IoT时代端侧开发面临的具体问题

2.可以了解浏览器以及Flutter在内的类W3C渲染体系的完整工作链路和原理

3.为业内提供解决IoT渲染问题的新思路

高德地图已经成为国民APP，在这些年业务高速发展过程中，高德地图渲染技术团队在对产品不断的创新改进中积累了丰富的实践经验，将在本次活动上为大家分享。主要分享以下三个方面的内容：

1. 终端地图渲染的困难与挑战
介绍从手机硬件、车机硬件的发展，纯软件到硬件加速，在不同硬件平台上地图渲染所面临的困难与挑战

2. 三维地图渲染技术的优化与创新
（1）跨平台地图APP的架构设计与思路
（2）海量地图数据的处理、压缩与分层
（3）基于OPENGL的性能调优方法实践

3. 快速迭代的工程体系建设
（1）性能分析工具体系建设与实践
（2）调试工具实践

4. 总结与展望
未来Metal及Vulcan图形渲染技术的影响

听众收益：

1. 目前主流的渲染技术在国民级APP的技术应用和架构演进思路
2. 渲染技术在产品的优化和性能调优实践
3. 性能分析工具体系建设与实践等等

听懂我的演讲，需要具备这些知识储备：

对图形渲染有一定技术积累和实践经验

随着大数据的崛起以及数据可视化的普及，越来越多的公司开始注重应用数据可视化来辅助商业决策。D3.js作为前端可视化引擎的鼻祖之一，提供了丰富的可视化工具库以及极强的灵活性，是许多数据可视化工程师开发高度定制可视化产品时的首选。本次演讲将从Twitter的数据可视化工具开发团队的实践经验出发，分享结合React与D3进行数据可视化开发的方式与优势。

1. D3与数据可视化

（1）数据可视化的基本原则

（2）D3基础概念

（3）D3作为可视化工具的优势与缺陷

2. 数据可视化在Twitter的应用

（1）应用场景

（2）基于网页的大数据可视化所面临的挑战

3. 结合React与D3进行可视化开发

   (1) 使用React-d3kit实现D3代码复用

   (2) 利用Redux与Epics协调D3组件与数据流

4. 前端科技之外的挑战

   (1) 互动实时可视化与数据存储方案

   (2) 可视化设计的敏捷开发

5. 展望与总结

听众收益：

1. 了解基于网页的数据可视化在Twitter商业决策上的应用
2. 了解结合React与D3进行数据可视化开发的方法与优势
3. 了解在线互动大数据可视化所面临的技术挑战

编辑器实现是前端开发中场景比较特殊，且颇有难度的一个方向。而幻灯片作为集文本编辑与图形处理功能的编辑器，在技术思路和实现方法方面也会遇到很多独特的挑战。石墨幻灯片团队在开发中面临了包括文本编辑、处理图形渲染与操作和数据管理等一系列问题，并在寻求解决方案的过程中积累了一些有趣的经验教训，希望能给对编辑器方向感兴趣的前端开发者提供思路与灵感。

 

演讲提纲：

1. 实现准备

（1）可协作编辑器的功能与技术挑战

        定义编辑器的功能与目标

        编辑器实现思路与常规前端实现思路的区别

（2）DOM 方案在幻灯片编辑器方向上的优势

        SVG、Canvas 和 HTML DOM 架构的比较

        DOM 架构方案在文本编辑与图形渲染操作方面的优缺点

2.实现过程

（1）文本渲染与编辑问题

        文本渲染和编辑的挑战

        浏览器方案

        基于 SVG 或 Canvas 的渲染方案

（2）处理图形渲染与变幻

         由面到点的图形渲染问题解决思路

         从实例谈矩阵在图形渲染和变幻处理中的应用

（3）数据管理与可协作实现

（4）图形渲染变幻相关功能的测试方案

        基于数据的测试方案

        基于 DOM 的测试方案

3.展望总结

（1）从架构层面看图形渲染与操作功能的取舍与平衡

（2）编辑器可能的终点展望

      浏览器标准层面的编辑器

 

听众收益：

1.了解编辑器 DOM、SVG 和 Canvas 架构的特点与优缺点

2.了解编辑器处理文本与图形问题的思路和算法

3.了解可协作编辑器从调研、实现到测试，不同于常规前端项目的思路和问题解决方案