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

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

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

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

混合應(yīng)用開發(fā)

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

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

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

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

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

中后臺與工程化

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

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

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

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

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

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

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

圖形學(xué)與音視頻

拜 winter 老師的氣場所賜，這次大會(huì)中的圖形學(xué)話題獲得了不少額外的關(guān)注：

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

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

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

最后我們列出一些不分先后的參會(huì)小心得與評價(jià)吧：

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

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