上周四(6.20)GMTC2019大会的第一天，很荣幸作为「UI与图形渲染」专场出品人获得了与图形领域几位技术专家同场交流的机会。
图形技术在前端范畴内是一个相对小众的话题，虽然前端工程师几乎每天都在跟图形打交道(CSS)。CSS能够满足绝大多数的需求，即便偶尔遇到相对复杂的UI(比如描边文字)，稍加使用canvas或SVG便足以应对。大多数前端工程师在日常开发工作中并不会(也没必要)思考每个CSS方块背后的底层技术原理。除了从事于数据可视化、地图、游戏等强依赖图形技术行业的人以外，Canvas/SVG/WebGL及其背后的数学知识对于大多前端工程师而言都比较陌生。所以在一个前端大会上，尤其是在“大前端”以及“全栈”概念越来越普及的时代背景下，一个受众群体非常有限的小众技术专场便显得异常冷门和特立独行。当然，做图形专场的目的并不是为了凸显自身的与众不同，而是因为图形技术对前端工程师至关重要，具体原因稍后再表。
主办方在筹备GMTC2019之初并未设定图形专场，后承蒙主办方首肯采纳本人的建议，将去年的「UI与动画」专场更名为「UI与图形渲染」。其实我之所以极力争取设立图形专场有一点小小的私心，因为我本人从事于地图行业，目前的工作绝大多数是跟WebGL打交道但是水平非常粗浅，所以很想跟此领域的技术专家们请教一些技术问题。然而仍然高估了这个领域的从业者规模，讲题的收集异常艰难。相比去年的「前端工程化」专场，线上提交的讲题数量差了两个量级。幸得几位朋友推荐，请到了阿里的@徐远同和Twitter的@郭桦，才能够凑满名额。
在会议开始之前，我有预想到上座率不会很高，但到场的观众竟然颇多，尤其是第三场更是座无虚席并且门口也挤满了人，确实令人有些意外。四位讲师的分享都颇为精彩，干货满满，我作为主持人并未半分贡献，就充当个记流水账的账房先生吧。
《基于Flutter引擎的TypeScript UI框架在树莓派上的应用》-阿里-@徐远同
这是本场四个讲题中最具技术深度的一个，内容并非是如何整合现有技术进行应用层UI开发，而是剖析渲染引擎的底层原理以及优化策略。每个前端工程师都或多或少地了解浏览器渲染HTML的流程和原理，这个讲题列出的渲染引擎技术与webkit大致类似，即便不是从事渲染引擎开发的普通前端工程师也能够通过此讲题更深入的了解渲染背后的技术细节。
《基于GLES的三维地图渲染技术工程实践》-高德-王前卫
本场演讲开始之前出了一点小事故，ppt没有提前拷贝到工作人员的设备中并且讲台不能直接连接讲师的macbook，所以造成了几分钟的时间延误。在此向当时参会的观众道一声抱歉。
我确信当时在场的观众有很大一部分是从事地图行业的，因为演讲结束之后的现场问答环节观众提出的三个问题都是关于地图的。这个讲题真的是非常硬核的GIS科普课，非此领域的人应该都会听的一头雾水，跟我同行的朋友听完本场之后满头的黑人问号。当然我听的确实津津有味，也了解了一些很有用的地图渲染技巧，比如用简单的纹理坐标扰动便可实现水波纹效果。
《结合React与D3进行数据可视化开发》-Twitter-郭桦
之前有预想这场的观众会很多，但是爆场确实有些意外。跟去年@Sky带来的Twitter前端工程化一样，可能国外大厂的名头有一定的“名人效应”加持，但更重要的是讲题本身的技术深度以及讲师对现场的把控能力。技术深度上，去年@Sky和今年@郭桦的讲题都非常优秀；演讲技巧上，@郭桦是我目前为止认为最好的演讲者，音量适当，不徐不疾，ppt简洁明了，时间掌握非常精准，40分钟的演讲时间刚刚好。并且所讲内容均聚焦于讲题本身，没有掺杂任何自我营销的成分。我比较反感把个人凌驾于讲题之上、语出惊人哗众取宠的“技术网红”，虽然不可否认网红的套路更容易引起关注和话题，但那不是技术从业者应有的态度。
D3.js对于接触过数据可视化的同学想必不会陌生，它更多地被应用于开发SVG charts。我第一份实习工作就是用D3.js做charts，那时候react还没问世，后来接触到react之后发现两者有一些相似之处，比如数据驱动UI，还写过一篇粗浅的文章。所以刚看到这个讲题时有些惊喜，因为终于有人跟我有相同的想法，在react诞生这么多年之后终于将其与D3.js结合并且应用于工业。虽然这个讲题的内容侧重于封装模式并未深入到底层技术，但这种探索和实践非常值得推广和借鉴。
《基于DOM 的可协作幻灯片编辑器架构模式》-石墨文档-刘怡年
可协作云应用非常复杂，可讲的技术点也很多，整体来说@刘怡年的分享还不错，但是仍有一些细节可待改进。我个人有两个建议：第一是ppt中表情包图片不宜过多，当然这也是我的责任，没有把控好ppt终稿的质量；第二是尽量减少一些表面的知识，比如仿射变换这种基础数学对于做图形编程的人来说基本上就是1+1=2，根本不值得单拎出来讲。@刘怡年应该是第一次做公开演讲，希望能够吸取一定的经验吧。
好，流水账就记到这里。总体上这次图形专场比较满意，当然主要得益于四位讲师精彩的分享。现在回到一开始的问题：为什么前端工程师需要具备图形编程能力？
前端似乎一直在试图“抢别人的饭碗”：用Node.js做web server；用RN&Flutter做app。虽然每个技术工种的定义都需要放在特定的时代背景下才有讨论的意义，历史推动人们对前端的重新认知，但是不论前端将来的定位如何，始终不会变的是前端始终聚焦于应用层和表现层，其核心竞争力集中在对交互逻辑和UI的把控，前端架构体系的设计自然也是围绕两者展开。目前来看，Node.js是serverless架构的优秀选型，但支撑大后端还略显吃力。所以即便使用serverless，前端架构的重点仍然是交互逻辑和UI。进一步讲，交互逻辑最终也需要借助UI给予用户反馈，所以UI对前端的重要性不言而喻。掌握一定的图形技术能够帮助开发者在前端架构设计之初进行精准的UI技术选型，哪些用CSS可以实现？哪些用SVG最佳？哪些需要借助Canvas甚至WebGL？这些问题的答案不是选择某一个库或者框架，而是在选择框架之前必须确立的底层技术栈。如果选择了不恰当的底层技术栈，待问题积攒爆发而不得不重构时，其痛苦程度远不是迁移框架能够比拟的。这对于初创团队尤为重要，因为技术选型决定如何打造人才梯队。然而如果对以上这些图形技术只停留在了解的阶段是远远不够的，必须有一定的深入理解和实践才可以精准地选定底层技术栈。比如大家都知道大数据场景下svg由于节点过多而性能上逊于WebGL，但是如果节点数没有接近四位数，那么在现有的浏览器技术背景下为了追求webgl并不明显的性能优势而放弃svg的便捷api、富交互性以及与css的融合性等优势则是得不偿失。
图形技术的最高殿堂必然是游戏，这个观点在跟@徐远同交流中达成了共识。然而游戏是相对独立的领域，跟前端的关联性不大。所以设立图形技术专场的目的并不是吸引更多人加入到图形编程领域，而是希望能够借此机会阐明图形对前端的重要性，即便不是从事图形编程的传统前端工程师也需要关注。甚至更进一步，希望能够引起大家对前端原生技术的重视。这几年各大框架百花齐放，今年Flutter更是一枝独秀，前端工程师们似乎一直被框架牵着鼻子走而一定程度上忽略了原生技术。当然会有人说“流水的框架铁打的思想，用框架是为了学习它的设计理念”，但并非所有的思想都值得借鉴，有些必然会成为时代的弃儿，比如jquery早期版本$(document).ready诡异的实现方案放到今天几乎再没有合适的应用场景。但原生技术，尤其是相对底层的技术是永不过时的。