前端18個月難度翻番？來這里把握大前端技術(shù)本質(zhì)進(jìn)展丨稀土開發(fā)者大會

“別更新了，學(xué)不動了”向來是前端開發(fā)群體的切膚之痛：

• React 還沒學(xué)明白，Vue 就出來了；

• Vue 2.0 還沒上手，3.0 就發(fā)布了；

• Node 剛精通，Deno 又 1.0 了；

• Flutter 剛流行，Flutter 又被唱衰了；

• 就更別提原生、跨端、混合開發(fā)的循環(huán)往復(fù)了。

所以前端圈曾經(jīng)有一位技術(shù)專家下過深切的論斷——前端 18 個月難度翻番。此言道出了前端領(lǐng)域更新換代之快背后的前端開發(fā)血淚史。也因此，“別更新了，學(xué)不動了”這句話成為了不少前端開發(fā)玩梗的口頭禪。

但從國內(nèi)前端專家月影的角度看，如果你不盲目地去追求所謂的“時髦”技術(shù)，不去刻意擔(dān)心自己是否落伍，而是去多觀察這個行業(yè)，找到技術(shù)發(fā)展內(nèi)在的規(guī)律和脈絡(luò)，那么你就知道該如何前進(jìn)，不會有任何恐慌。

在任何一個領(lǐng)域或方向，知識體系都可以大體上分為基礎(chǔ)知識和領(lǐng)域知識，而領(lǐng)域知識又可以分為通用領(lǐng)域知識和專用領(lǐng)域知識。二者的變化是不一樣的，基礎(chǔ)知識的變化最慢，其次是通用領(lǐng)域知識，然后是專用領(lǐng)域知識。深入學(xué)習(xí)基礎(chǔ)知識，按需學(xué)習(xí)領(lǐng)域知識，這就是把握技術(shù)本質(zhì)的基本邏輯。

2021 年 10月 27-28 日，由稀土掘金社區(qū)舉辦的首屆稀土開發(fā)者大會，將體系化地呈現(xiàn)當(dāng)前國內(nèi)大前端領(lǐng)域的技術(shù)發(fā)展，帶給參會者對大前端技術(shù)發(fā)展的本質(zhì)脈絡(luò)。目前大會設(shè)置了「大前端工程與架構(gòu)」、「大前端性能優(yōu)化」、「大前端技術(shù)探索」三個專題，邀請了國內(nèi)一線大廠前端技術(shù)專家分享精彩實踐經(jīng)驗。

大前端工程與架構(gòu)

專題簡介：

前端工程與架構(gòu)隨著互聯(lián)網(wǎng)的發(fā)展，企業(yè)業(yè)務(wù)的不斷深入與變化，前后端不斷拆分與重組；前端架構(gòu)形態(tài)也不斷調(diào)整，之前火熱的前端中臺、微前端也不斷更替；現(xiàn)在前端架構(gòu)在企業(yè)發(fā)展現(xiàn)狀如何，我們來一起探索。

出品人：張飛彪字節(jié)跳動創(chuàng)意生態(tài)技術(shù)負(fù)責(zé)人

現(xiàn)就職于字節(jié)跳動上海研發(fā)中心，擔(dān)任創(chuàng)意生態(tài)技術(shù)負(fù)責(zé)人，之前曾負(fù)責(zé)抖音電商上海研發(fā)團(tuán)隊、抖音音樂項目、小紅書客戶端。畢業(yè)于華東師范大學(xué)數(shù)學(xué)系國家理科基地班，自學(xué)完計算機(jī)專業(yè)的所有主干課程，從事移動軟件開發(fā)工作十年以上，先后參與過 Windows Mobile、Windows Phone、嵌入式、 Android 以及 iOS 等平臺的 App 和框架開發(fā)，主導(dǎo)了多款大中型 App 的研發(fā)，也曾作為客戶端架構(gòu)師負(fù)責(zé)過 Android、iOS、Web 三端的基礎(chǔ)架構(gòu)設(shè)計和演進(jìn)，在移動架構(gòu)、跨平臺開發(fā)等大前端領(lǐng)域具有豐富的研發(fā)和管理經(jīng)驗。

議題介紹：

議題一：《支付寶錢包動態(tài)化技術(shù)方案的現(xiàn)狀和演進(jìn)》——王佐螞蟻集團(tuán)支付寶事業(yè)群小程序技術(shù)部高級技術(shù)專家

支付寶在 17 年左右啟動了錢包下一代動態(tài)化技術(shù)方案Cube。在過去的 4 年中，通過業(yè)務(wù)的打磨，逐漸形成了兩個技術(shù)產(chǎn)品。一個是面向移動端應(yīng)用開發(fā)的動態(tài)卡片技術(shù)棧，在原生的 Native 頁面中嵌入動態(tài)卡片；開發(fā)者使用類 Vue 的語法編寫動態(tài)卡片的布局和邏輯，發(fā)布即可見，從而提高原生頁面的運(yùn)營效率。一個是面向 IoT 應(yīng)用開發(fā)的小程序技術(shù)棧，向低端設(shè)備上的開發(fā)者提供提供小程序技術(shù)，目前主要應(yīng)用于電視/收銀臺等場景。

議題二：《美團(tuán)企業(yè)應(yīng)用前端工程化實踐》——楊林美團(tuán)基礎(chǔ)研發(fā)前端技術(shù)專家

在美團(tuán)，支撐業(yè)務(wù)高效運(yùn)轉(zhuǎn)的企業(yè)應(yīng)用是較為復(fù)雜的ToB 業(yè)務(wù)，包括 HR、財務(wù)和 ERP 等業(yè)務(wù)，這些領(lǐng)域下有100+ 系統(tǒng)，幾千個頁面，特點是系統(tǒng)多，交互復(fù)雜，業(yè)務(wù)迭代快，本次分享介紹我們建設(shè)大型的ToB 應(yīng)用的過程，如何通過“微前端架構(gòu)+開發(fā)模板化”的工程化方式，支持眾多業(yè)務(wù)線并行需求迭代，協(xié)同幾百人團(tuán)隊快速交付。

議題三：《簡潔的藝術(shù) —— astro 帶來的全新體驗》——薛英琛字節(jié)跳動小程序前端開發(fā)工程師

現(xiàn)代前端開發(fā)技術(shù)的演進(jìn)史幾乎就是 JavaScript 的發(fā)展史，我們越來越少去直接編寫 HTML/CSS，轉(zhuǎn)而將這項工作交給各類 JavaScript 框架與工具，但是這并不是無痛的抽象，很明顯我們正在為無限的自由買單。 Astro 是解決這個問題的一種選擇。它利用 partial-hydrate 的手段，結(jié)合用戶交互特點，盡量地按需加載，同時在編譯時自動識別內(nèi)容去做靜態(tài)化。另外，它也天然支持微前端，結(jié)合一整套 bundleless 開發(fā)鏈路，大幅提升開發(fā)者構(gòu)建復(fù)雜的前端應(yīng)用的開發(fā)體驗。

議題四：《貝殼視覺物料生產(chǎn)平臺的架構(gòu)與實踐》——閆士博貝殼找房資深前端工程師

隨著業(yè)務(wù)發(fā)展，公司的視頻、圖片等各類物料的需求日益增長，開發(fā)與設(shè)計的人力捉襟見肘。貝殼視覺物料生產(chǎn)平臺，是前端技術(shù)創(chuàng)新與架構(gòu)賦能業(yè)務(wù)的典型，通過自動識別各類設(shè)計稿，加之圖文、視頻、動態(tài) GIF 的可視化編輯與數(shù)據(jù)配置，統(tǒng)一視覺物料的生產(chǎn)管理能力，支持各業(yè)務(wù)低成本完成物料相關(guān)需求，并賦予上千運(yùn)營人員直接制作視覺物料的能力，大大提高產(chǎn)研效率，為公司的業(yè)務(wù)運(yùn)營保駕護(hù)航。

大前端性能優(yōu)化

專題簡介：

在移動互聯(lián)網(wǎng)時代，由于設(shè)備資源、網(wǎng)絡(luò)等因素，性能優(yōu)化顯得尤為重要，反之，性能不友好的產(chǎn)品，用戶流失率極高。本專場將邀請在 Web 前端、渲染引擎和特定場景下有速度優(yōu)化經(jīng)驗的技術(shù)專家，通過對性能優(yōu)化優(yōu)化工具及技術(shù)，去分享其在端上的實踐經(jīng)驗。

出品人：梁士興美團(tuán)買菜終端研發(fā)負(fù)責(zé)人

2009 年畢業(yè)于北京航空航天大學(xué)，2014 年 7 月份加入到美團(tuán)，現(xiàn)任美團(tuán)買菜終端研發(fā)組負(fù)責(zé)人。

多年從事大前端方向的技術(shù)研發(fā)工作，對應(yīng)用架構(gòu)演變、大前端工程化建設(shè)以及大前端的技術(shù)發(fā)展趨勢有濃厚的興趣，希望能夠與大家進(jìn)行交流和分享。

議題介紹：

議題一：《手淘跨平臺引擎架構(gòu)與未來演進(jìn)》——彭濤（龍冥）阿里巴巴無線技術(shù)專家

互聯(lián)網(wǎng)業(yè)務(wù)如火如荼的飛速發(fā)展，新的跨平臺技術(shù)也隨著歷史的浪潮在探索和實踐中不斷涌現(xiàn)，最成熟的跨平臺技術(shù)莫過于大家熟知的瀏覽器技術(shù)。標(biāo)準(zhǔn)化以及其強(qiáng)大的生態(tài)，加上硬件的不斷升級所帶來的性能紅利使它一直占據(jù)著舉足輕重的重要地位，隨著業(yè)務(wù)復(fù)雜度的不斷提升，從后來的 Weex/React Native，到現(xiàn)在如火如荼的 Flutter，也標(biāo)志著新一代跨平臺架構(gòu)已升級為自繪渲染，高性能腳本引擎等內(nèi)核技術(shù)深水區(qū)。如何滿足差異化業(yè)務(wù)場景，依托前端成熟的生態(tài)與標(biāo)準(zhǔn)化，減少業(yè)務(wù)的遷移適配成本，通過一套跨端內(nèi)核引擎支持多App，以至多生態(tài)乃至不同的前端框架，成為了跨平臺架構(gòu)的新挑戰(zhàn)。本次將分享從手淘幾年來隨著業(yè)務(wù)發(fā)展所帶來架構(gòu)升級思考，核心性能瓶頸的突破以及對未來幾年內(nèi)跨平臺架構(gòu)的探索方向，希望能與您產(chǎn)生技術(shù)上的共鳴與互勉。

議題二：《預(yù)加載技術(shù)在百度 App 上的應(yīng)用》——楊剛百度百度 App T7 瀏覽內(nèi)核研發(fā)工程師、整體內(nèi)核技術(shù)負(fù)責(zé)人

隨著移動設(shè)備性能的整體提升（CPU、內(nèi)存、網(wǎng)絡(luò)等），越來越多的移動應(yīng)用通過預(yù)取技術(shù)來優(yōu)化 H5 相關(guān)業(yè)務(wù)的首屏性能，百度 App 也在很多業(yè)務(wù)場景使用了這一技術(shù)。預(yù)取技術(shù)很誘人，對打開速度往往可以起到立竿見影的效果，但在移動端相比 PC 還是有很多需要注意的事項，比如，由于 32 位運(yùn)行模式的關(guān)系，內(nèi)存仍然是一個需要高度關(guān)注的一個點。本次主題將通過對移動端H5 業(yè)務(wù)速度拆解、常用優(yōu)化手段特別是預(yù)取技術(shù)的原理及優(yōu)缺點入手，梳理預(yù)取技術(shù)的注意事項，以及預(yù)取技術(shù)在百度app的應(yīng)用實踐過程。

議題三：《前端頁面加載性能優(yōu)化實踐及運(yùn)維》——王梓童美團(tuán)買菜事業(yè)部 iOS 開發(fā)工程師

隨著業(yè)務(wù)不斷地發(fā)展，美團(tuán)開始引入 RN 用于解決對開發(fā)效率和更新速度的需求，同時使用H5 支撐數(shù)量繁多的營銷活動。RN、H5 在性能上相較 Native 技術(shù)有著天然的劣勢。如何在享受開發(fā)迭代效率提升的同時，滿足用戶日益嚴(yán)苛的性能體驗要求，成為每個移動開發(fā)者追求的目標(biāo)。為此，作為美團(tuán)的新業(yè)務(wù)團(tuán)隊，在2021年上半年度對性能進(jìn)行了專項優(yōu)化；在半年時間里，將RN 頁面 1s 內(nèi)渲染出首屏的比例由40%提升至了85%，實現(xiàn)了頁面秒開甚至近乎直出的性能體驗，H5 TP90 首屏時間由也從 4500ms 降低到了 2000ms。本次分享將深入 RN、H5 的技術(shù)原理，分析優(yōu)化思路，系統(tǒng)性介紹在美團(tuán)有著豐富實踐的成熟優(yōu)化措施，以及相關(guān)指標(biāo)是如何監(jiān)控運(yùn)維的。相信經(jīng)過本次分享交流，你可以更全面地了解前端性能的優(yōu)化方案，并結(jié)合自己 App 的實際情況落地。

議題四：《小紅書搭建秒開 H5 的關(guān)鍵技術(shù)設(shè)計》——楊遠(yuǎn)翔小紅書電商技術(shù)部電商大前端負(fù)責(zé)人

首屏性能一直在快迭代H5 業(yè)務(wù)中被人詬病，尤其是在無法定制首屏優(yōu)化，有豐富內(nèi)容的運(yùn)營搭建場景。我們吸取了近幾年業(yè)界公開關(guān)于性能探索中寶貴實踐經(jīng)驗，在搭建業(yè)務(wù)中逐步探索、沉淀出一套基于"真實用戶體感秒開"的技術(shù)方案。全員參與(前后端、QA、產(chǎn)品視覺)，管"挖"管"埋"。

大前端技術(shù)探索

專題簡介：

隨著互聯(lián)網(wǎng)不斷發(fā)展，前端技術(shù)也跟上班車；Vue發(fā)布 3.0 新特性，React 版本也到了 V17；連 Flutter 也開始和 XD 緊密聯(lián)系。本專題將聚焦 2021 新技術(shù)及未來前端領(lǐng)域的新技術(shù)發(fā)展趨勢。

出品人：李玉北字節(jié)跳動 Web Infra 團(tuán)隊負(fù)責(zé)人

開源愛好者，熱愛 JavaScript 社區(qū)，目前負(fù)責(zé)字節(jié)跳動 Web Infra 團(tuán)隊 (https://webinfra.org/sg)。團(tuán)隊的職責(zé)是維護(hù)公司前端的技術(shù)設(shè)施和服務(wù)（例如：Node.js、Serverless、跨端解決方案等等），并同時打造下一代的 Web 開發(fā)引擎，重塑基于 Web 技術(shù)棧的應(yīng)用的開發(fā)流程。

議題介紹：

議題一：《開發(fā)、維護(hù)與微循環(huán)》——張立理百度EE 前端架構(gòu)師

在一個相對長期維護(hù)與發(fā)展的應(yīng)用中，開發(fā)者需要更多時間面對功能的增量迭代、已有功能的調(diào)整、修復(fù)與優(yōu)化等情況。

傳統(tǒng)的初始腳手架、構(gòu)建工具、代碼生成等雖有助于項目從零到一的快速啟動，但在增量迭代中難以發(fā)揮持續(xù)地效益。

項目的長期持續(xù)開發(fā)是一個個人能力、開發(fā)模式、團(tuán)隊協(xié)作緊密結(jié)合的過程，本次分享將介紹一種基于組件化的開發(fā)形式，力求通過統(tǒng)一的手段進(jìn)行工作的分解，在細(xì)粒度上完成定義、開發(fā)、驗證、凍結(jié)的研發(fā)循環(huán)，進(jìn)而保持合適的開發(fā)節(jié)奏、效率、質(zhì)量。

議題二：《從歷史的演進(jìn)來看前端業(yè)務(wù)工程的發(fā)展》——俞天翔快手 Web開發(fā)探索組前端負(fù)責(zé)人

從“上古時期”的模板拼裝到“MV*”的大量被使用；從 jQuery 一統(tǒng)天下到Vue/React 逐步成為全民框架；從 PC 時代到移動時代，從 2B 到 2C，前端 er 們似乎一直都在探索路上不斷前進(jìn)。在歷史的發(fā)展進(jìn)程中，我們是否能夠積累出屬于我們的工程方案，以應(yīng)對業(yè)務(wù)的持續(xù)發(fā)展。本次分享將結(jié)合講者在過去工作中的經(jīng)驗以及大型活動的“慘痛”開發(fā)經(jīng)歷，針對如何對工程進(jìn)行設(shè)計，將工程中變與不變的部分進(jìn)行拆解，將業(yè)務(wù)開發(fā)逐步演變成“填空題”，保證持續(xù)交付和有效積累。

議題三：MWA（現(xiàn)代 Web 應(yīng)用）框架和 Modern JS 工程方案——宋振偉字節(jié)跳動 Web Infra研發(fā)工程師

前端開發(fā)和 Web 開發(fā)中出現(xiàn)的范式轉(zhuǎn)移都已經(jīng)累積到接近革命的程度，字節(jié)跳動 Web Infra 前段時間介紹了「現(xiàn)代Web 開發(fā)」范式和、Modern Web Stack、MWA 這些新一代技術(shù)，這次會進(jìn)一步基于 Modern.js 開源項目來介紹 MWA 框架、現(xiàn)代Web 工程方案。

此外，混沌工程、云原生、分布式數(shù)據(jù)庫、低代碼、機(jī)器學(xué)習(xí)、音視頻技術(shù)等專場議題講師已全部上線，目前大會線上直播免費(fèi)預(yù)約火熱進(jìn)行中，點擊底部閱讀原文直達(dá)大會官網(wǎng)，了解更多專題詳情。