剛剛在北京落下帷幕的 GMTC 2024 應該算是近期國內(nèi)前端圈子里最高規(guī)格（門票最貴）的活動之一了。愛掏網(wǎng) - it200.com那么這兩天的分享有什么值得一提的地方呢？下面是一份小小的總結。愛掏網(wǎng) - it200.com

我們周三晚上從廈門出發(fā)飛抵北京，在鳥巢邊上的會場里參與了周四和周五為期兩天的密集技術分享。愛掏網(wǎng) - it200.com除了第一天早上所有參會者都在同一個會場以外，各個細分主題下的內(nèi)容都是并行地在不同地分會場內(nèi)講解的。愛掏網(wǎng) - it200.com因此，一個人顯然無法聽完所有的主題的，我們也對想聽的主題做了一些取舍。愛掏網(wǎng) - it200.com

我們此行最后選擇的主題還是偏向 Web 前端，覆蓋了混合應用、圖形學應用、Node 和音視頻應用等主題。愛掏網(wǎng) - it200.com雖然我們來了兩個同學，最后參與的主題實際上也只覆蓋了全部主題的 70% 左右。愛掏網(wǎng) - it200.com下面我們嘗試從這些主題中抽取一些亮點和大家分享 XD

實際上 GMTC 本身的名稱縮寫和「前端」并沒有直接的關系，而是一個面向移動端技術的會議。愛掏網(wǎng) - it200.com但在現(xiàn)在「大前端」的浪潮下，這次會議的議題已經(jīng)在相當大程度上偏向了 Web 前端 / 全棧開發(fā)者。愛掏網(wǎng) - it200.com我們在現(xiàn)場感受到反響較好的一些分享主題，其內(nèi)容取向也能印證這一點：

混合應用開發(fā)

雖然大會中也有不少 RN / HTML5 混合應用的高質量分享，但要說這個話題里現(xiàn)場氣氛最熱烈的分享主題，應該非 Flutter 莫屬了。愛掏網(wǎng) - it200.com與其它分享中常見的「內(nèi)部框架定制」和「業(yè)務系統(tǒng)演進」主題不同，Google Flutter 團隊的于瀟老師分享了他們所實現(xiàn)的這樣一套能帶來全新開發(fā)體驗的開源框架。愛掏網(wǎng) - it200.com這個分享顯然是經(jīng)過精心準備的，有著良好的節(jié)奏和精美的互動 Demo，也收獲了現(xiàn)場的一波波掌聲~

Flutter 所對標的應當是 React Native 和 Weex 這樣的混合開發(fā)方案，但不同的是，F(xiàn)lutter 不僅采用了 Dart 這樣來自 Google 的編程語言，底層還從 RN 這樣橋接原生 UI 組件的方案換成了基于 OpenGL / Vulkan 這樣的圖形庫，保證了跨平臺的穩(wěn)定性。愛掏網(wǎng) - it200.com現(xiàn)場的演示中帶來的驚艷之處有這么幾個：

• Dart 語言機制提升了開發(fā)體驗。愛掏網(wǎng) - it200.com如調(diào)試期 JIT + 運行期 AOT 的性能優(yōu)化、Tree Shaking 的包體積優(yōu)化等。愛掏網(wǎng) - it200.com并且在 Demo 中，基于 Dart 的 Hot Reload 能夠保留錯誤狀態(tài)，而非像 Web 與 RN 那樣在出錯時只能刷新重置。愛掏網(wǎng) - it200.com對難以重入的頁面狀態(tài)，這能極大地提升調(diào)試效率。愛掏網(wǎng) - it200.com
• Flutter 不依賴原生組件，可以在命令行中方便地運行 Headless 的測試。愛掏網(wǎng) - it200.com
• Flutter 使用 Dart 重寫了從底層的繪圖、動畫、手勢到頂層 UI 組件的一整套技術棧，并且實現(xiàn)了充分的組件化。愛掏網(wǎng) - it200.com這樣一來許多需要強控制力的效果就能直接在 Dart 生態(tài)下實現(xiàn)，而非 RN 那樣動輒需要依賴原生庫。愛掏網(wǎng) - it200.com

至于遷移到 Flutter 的成本，主要的顧慮集中在 Dart 的學習曲線和與 Native 項目的集成上。愛掏網(wǎng) - it200.com這兩者實際上在當天下午閑魚的 Flutter 實踐分享中都有提到。愛掏網(wǎng) - it200.com對于前者，我們得到的回復是 Dart 實際上很接近 JS 和 Java，它的組件也很接近 React，因此學習曲線并不會十分陡峭。愛掏網(wǎng) - it200.com而對于 Native 項目集成，從閑魚團隊的分享上確實看到了還有不少現(xiàn)階段暫時只能 workaround 的坑，但從 Flutter 團隊的支持力度下來看，應當是可以期待持續(xù)的改進優(yōu)化的。愛掏網(wǎng) - it200.com

下面這張圖里你能看到閑魚團隊分享 Flutter 實踐時，在第一排吃瓜慶祝的兩位 Flutter 團隊老板，自己親手做的東西得到了廣泛的關注，想必很高興吧 XD

中后臺與工程化

既然是「大前端」，那么 Node 全棧及其對應的 NPM 生態(tài)就是個不可或缺的話題。愛掏網(wǎng) - it200.com我們也在業(yè)務中使用了 Node，因此對這個話題我們還是比較關注的。愛掏網(wǎng) - it200.com

不過要評價起這次 GMTC 上 Node 與工程化相關的分享的話，個人理解應該更接近「穩(wěn)定」吧。愛掏網(wǎng) - it200.com這次大會上這方面的多數(shù)分享，并非像 Flutter 這樣「從 0 到 1」的新工具發(fā)布，而是主要集中在「從 100 到 1000」這樣基于前端技術保證業(yè)務演進的總結上。愛掏網(wǎng) - it200.com當然了在純粹的工具方面，這次的議題里也不是一片空白。愛掏網(wǎng) - it200.com比如來自 Apollo 團隊的老板就詳細介紹了 GraphQL 和 Apollo 全家桶。愛掏網(wǎng) - it200.com對于 REST 缺乏可擴展性的問題，GraphQL 的按需獲取機制更加易用；對于嵌套的復雜數(shù)據(jù)，我們無需多次調(diào)?即可按需獲取，從而減少?絡開銷；在緩存和預讀取等通用的優(yōu)化層面，GraphQL 層也可以實現(xiàn)不少對業(yè)務透明的優(yōu)化。愛掏網(wǎng) - it200.com

雖然 GraphQL 這樣下一代 API Gateway 的方案呼聲一直很大，但不可否認的是它在國內(nèi)還沒有達到 Vue 這樣「飛入尋常百姓家」的普及程度。愛掏網(wǎng) - it200.com在技術選型時，遷移到 GraphQL 的成本和收益始終是值得仔細權衡的。愛掏網(wǎng) - it200.com在這方面 Apollo 平臺下以 apollo-client 為代表的一系列 GraphQL 工具是很值得推薦的：如果我們能夠在不對后端服務做出侵入性改動的前提下，將 Redux / Saga 或 Vuex / MobX 的一系列膠水代碼用簡潔的聲明式 GraphQL Query 取代，是不是能夠解決一部分數(shù)據(jù)對接的痛點呢？在其他國內(nèi)團隊的分享中，也提到了將后端繁多的接口服務統(tǒng)一為「對應用透明的 API 層」的探索，比如阿里的 Node 團隊就提出了 BFF(Backend For Frontend) 的概念，讓微服務架構有了更多的發(fā)揮空間。愛掏網(wǎng) - it200.com借助于 BFF 的輕便性，我們甚至可以為每個業(yè)務開發(fā)一個 API Gateway。愛掏網(wǎng) - it200.com期待他們更多的成果呀。愛掏網(wǎng) - it200.com

在一些中后臺的系統(tǒng)的積累和工程化上，這次大會上還是看到了不少的實踐分享。愛掏網(wǎng) - it200.com幾個大廠對業(yè)務的監(jiān)控、異常排查、報警、問題定位、日志等系統(tǒng)已經(jīng)逐一落地，前后端分離與 SSR 的開發(fā)模式也已經(jīng)相當成熟。愛掏網(wǎng) - it200.com可能正是因為成熟度已經(jīng)較高的原因，這個領域的分享較少涉及到具體的代碼層面，而是一些「道」的高層次總結。愛掏網(wǎng) - it200.com當然了，也有些主題是非常接近于商業(yè)廣告的，這里就不細說啦。愛掏網(wǎng) - it200.com最后放張 Twitter 的工程化分享現(xiàn)場圖，供各位了解一下「道」的氛圍：

性能優(yōu)化與監(jiān)控

這個議題下基本上就是大廠同學們秀肌肉的地方了：對于各種國民級應用的核心業(yè)務，它們背后的持續(xù)打磨優(yōu)化和大量的支撐系統(tǒng)，是沒有處理過這個量級問題的同學所難以想象的。愛掏網(wǎng) - it200.com我們可能常常認為，只要應用了常見在面試題中出現(xiàn)的那幾種「前端性能優(yōu)化方式」，就已經(jīng)做到了性能優(yōu)化。愛掏網(wǎng) - it200.com但在這些分享中，我們對于自以為的「已優(yōu)化過」有了重新的審視，也了解了更多考慮性能問題的維度。愛掏網(wǎng) - it200.com

以愛奇藝團隊的分享為例，一般對于客戶端而言，除了崩潰率之外開發(fā)同學最關心的可能就是流暢度和首屏啟動速度，分享中的實踐在此拋棄了我們慣用的打點記時方式，轉而以錄屏的方式讓測試更準確也更接近實際。愛掏網(wǎng) - it200.com再比如電量的消耗一般不是應用開發(fā)者所操心的，但真實世界中，流暢度往往直接和電量的消耗負相關。愛掏網(wǎng) - it200.com分享中引入的 PowerMonitor 不僅能夠檢測能耗，更能夠據(jù)此量化地判斷出優(yōu)化前后對流暢程度的提升。愛掏網(wǎng) - it200.com對于我們熟悉的 WebView，它在應用中幾乎始終是慢的代名詞。愛掏網(wǎng) - it200.com這里我們在分享中看到了通過「離線化 + 異步化 + 緩存化」的一套方案，大大提升了 WebView 初始化的速度，這方面分享團隊所開源的 liteapp 項目值得關注。愛掏網(wǎng) - it200.com我們原本以為時下大熱的 AI 潮流和傳統(tǒng)的應用開發(fā)沒有特別大的關系，但出乎意料的是分享中我們看到了 AI 技術在自動提升視頻清晰度上的應用，不得不佩服技術團隊跟進落地新技術的實力。愛掏網(wǎng) - it200.com最后在安卓機型碎片化的問題上，我們也確認了「沒有捷徑可走」的結論，目前最有效的方式仍然是采購各種機型，在各個機型下進行完備的測試。愛掏網(wǎng) - it200.com

圖形學與音視頻

拜 winter 老師的氣場所賜，這次大會中的圖形學話題獲得了不少額外的關注：

雖然是個細到了數(shù)學公式和代碼細節(jié)的分享，但分享過程比想象的要有趣得多，不愧是計算機之子啊 XD。愛掏網(wǎng) - it200.com事實上我們現(xiàn)在自研的編輯器基礎庫中也已經(jīng)遇到了一些 DOM 和 Canvas 的表達力瓶頸，而這些瓶頸應當是可以通過更加底層的 Shader 開發(fā)來克服的。愛掏網(wǎng) - it200.com在一定層面上，我們可以認為這些基礎從來就不會過時。愛掏網(wǎng) - it200.com不過 winter 老師前面非常細粒度的分享最后似乎還是為了介紹 GCanvas 和 G3D這兩個輪子（在去年的 D2 上我其實已經(jīng)聽過了一遍安利啦），要是有什么新進展的消息就更好啦。愛掏網(wǎng) - it200.com

相比之下，和圖形學同樣處于較為底層的音視頻開發(fā)領域，受到的關注就要少那么一些。愛掏網(wǎng) - it200.com印象中音視頻分會場的主持人還有「在座各位想必都身價不菲」這么一說。愛掏網(wǎng) - it200.com這個領域確實有些曲高和寡，如騰訊微視的分享就提到了多 pass 渲染、雙邊濾波等圖形學經(jīng)典技術。愛掏網(wǎng) - it200.com這部分內(nèi)容已經(jīng)屬于典型的客戶端開發(fā)范疇了，短期內(nèi)前端同學對音視頻的掌控力可能還是會限制在瀏覽器環(huán)境的這一套已有體系上，難以有較大的突破。愛掏網(wǎng) - it200.com

好消息是，大會中已經(jīng)有了國內(nèi)的 WASM 分享，基于 WASM 的一些視頻特效應用在 Web 前端也已經(jīng)有了實驗性的落地。愛掏網(wǎng) - it200.com這部分內(nèi)容由于我們之前也摸過，因此也和主講的老師做了一些交流：現(xiàn)階段 WASM 確實有調(diào)試和構建上的難度和瓶頸，但好在從宏觀趨勢上來看自去年下半年起社區(qū)熱度已經(jīng)有了顯著增加，也希望它能夠早日落地到我們的業(yè)務中去創(chuàng)造價值吧~

最后我們列出一些不分先后的參會小心得與評價吧：

• 從 2024 年的深 JS 大會到今年的 GMTC，能明顯感覺到 JS 端的發(fā)力，這在 Node.js 上很有體現(xiàn)：從最開始介紹 koa 這樣的 web 服務框架，到現(xiàn)在阿里的 Pandora.js 這樣的一個可管理、可度量、可追蹤的 Node.js 應用管理器，我們能感受到的是一個生態(tài)的進化。愛掏網(wǎng) - it200.com在 2024 年 Node.js 剛剛起步，大家都在熱衷于實現(xiàn)一個后端的 "jQuery" 來 hold 住基本的業(yè)務需求。愛掏網(wǎng) - it200.com而到了現(xiàn)在，大家所追求的是要構建一個生態(tài)，畢竟后端服務需要有完善的一套基礎設施才能長久穩(wěn)定地運行。愛掏網(wǎng) - it200.com當然了由于 Node.js 本身的限制，前端同學較難深入到更低的 DB 乃至 OS 等層面去打磨生態(tài)，也可以說前端同學在后端領域確實還不夠深入。愛掏網(wǎng) - it200.com但這不代表我們沒有在思考，沒有想如何做到更好。愛掏網(wǎng) - it200.com
• 國內(nèi)技術分享者的節(jié)奏把控普遍還有不少的優(yōu)化空間，很多分享還是很容易使得現(xiàn)場氣氛沉悶下來，也確實會有些「新瓶裝舊酒」的內(nèi)容有些老調(diào)重彈的感覺。愛掏網(wǎng) - it200.com國外講師普遍明顯要更老司機一些（可能與國內(nèi)技術崗日常交流偏少有關系）。愛掏網(wǎng) - it200.com
• 國內(nèi)對前端工程的關注點仍然主要放在對業(yè)務應用的支撐上。愛掏網(wǎng) - it200.com對于比較「低層面」的編程語言、VM、游戲引擎等的基礎，除了商業(yè)產(chǎn)品外，開源出來的東西仍然還不是特別豐富。愛掏網(wǎng) - it200.com
• 對于現(xiàn)代規(guī)模不斷增長的項目，想要做好已經(jīng)不是單槍匹馬或是有一技之長就能夠 hold 得住的了。愛掏網(wǎng) - it200.com對更長的業(yè)務鏈路，我們需要一個能夠統(tǒng)籌全局且快速組合各類能力的組織，才能控制得住鏈路上各個節(jié)點的復雜度。愛掏網(wǎng) - it200.com
• 除了基本的工具選型外，Code Review / Case Study 等技術團隊的制度也能很大程度地影響團隊的工程質量甚至氛圍，這方面國內(nèi)還有很長的路要走。愛掏網(wǎng) - it200.com
• 不論客戶端與 Web 前端關系如何發(fā)展，它們背后的計算機基礎都是相對穩(wěn)定的。愛掏網(wǎng) - it200.com伴隨著我們對性能的「壓榨」，圖形學一類的基礎可能會更加重要。愛掏網(wǎng) - it200.com
• GMTC 相比 D2，商業(yè)化氣息明顯更濃了。愛掏網(wǎng) - it200.com不過不管商業(yè)氣息重不重，希望大家都能悶聲發(fā)大財，這才是墜吼的 :-)

原文發(fā)布時間為：2024年06月27日