上周四(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詭異的實現方案放到今天幾乎再沒有合適的應用場景。但原生技術，尤其是相對底層的技術是永不過時的。