前端18个月难度翻番？来这里把握大前端技术本质进展丨稀土开发者大会
圖片來源：pexels.com
“別更新了，學(xué)不動(dòng)了”向來是前端開發(fā)群體的切膚之痛：
React 還沒學(xué)明白，Vue 就出來了；
Vue 2.0 還沒上手，3.0 就發(fā)布了；
Node 剛精通，Deno 又 1.0 了；
Flutter 剛流行，Flutter 又被唱衰了；
就更別提原生、跨端、混合開發(fā)的循環(huán)往復(fù)了。
所以前端圈曾經(jīng)有一位技術(shù)專家下過深切的論斷——前端 18 個(gè)月難度翻番。此言道出了前端領(lǐng)域更新?lián)Q代之快背后的前端開發(fā)血淚史。也因此，“別更新了，學(xué)不動(dòng)了”這句話成為了不少前端開發(fā)玩梗的口頭禪。
但從國(guó)內(nèi)前端專家月影的角度看，如果你不盲目地去追求所謂的“時(shí)髦”技術(shù)，不去刻意擔(dān)心自己是否落伍，而是去多觀察這個(gè)行業(yè)，找到技術(shù)發(fā)展內(nèi)在的規(guī)律和脈絡(luò)，那么你就知道該如何前進(jìn)，不會(huì)有任何恐慌。
在任何一個(gè)領(lǐng)域或方向，知識(shí)體系都可以大體上分為基礎(chǔ)知識(shí)和領(lǐng)域知識(shí)，而領(lǐng)域知識(shí)又可以分為通用領(lǐng)域知識(shí)和專用領(lǐng)域知識(shí)。二者的變化是不一樣的，基礎(chǔ)知識(shí)的變化最慢，其次是通用領(lǐng)域知識(shí)，然后是專用領(lǐng)域知識(shí)。深入學(xué)習(xí)基礎(chǔ)知識(shí)，按需學(xué)習(xí)領(lǐng)域知識(shí)，這就是把握技術(shù)本質(zhì)的基本邏輯。
2021 年 10月 27-28 日，由稀土掘金社區(qū)舉辦的首屆稀土開發(fā)者大會(huì)，將體系化地呈現(xiàn)當(dāng)前國(guó)內(nèi)大前端領(lǐng)域的技術(shù)發(fā)展，帶給參會(huì)者對(duì)大前端技術(shù)發(fā)展的本質(zhì)脈絡(luò)。目前大會(huì)設(shè)置了「大前端工程與架構(gòu)」、「大前端性能優(yōu)化」、「大前端技術(shù)探索」三個(gè)專題，邀請(qǐng)了國(guó)內(nèi)一線大廠前端技術(shù)專家分享精彩實(shí)踐經(jīng)驗(yàn)。
大前端工程與架構(gòu)
專題簡(jiǎn)介：
前端工程與架構(gòu)隨著互聯(lián)網(wǎng)的發(fā)展，企業(yè)業(yè)務(wù)的不斷深入與變化，前后端不斷拆分與重組；前端架構(gòu)形態(tài)也不斷調(diào)整，之前火熱的前端中臺(tái)、微前端也不斷更替；現(xiàn)在前端架構(gòu)在企業(yè)發(fā)展現(xiàn)狀如何，我們來一起探索。
出品人：張飛彪 字節(jié)跳動(dòng) 創(chuàng)意生態(tài)技術(shù)負(fù)責(zé)人
現(xiàn)就職于字節(jié)跳動(dòng)上海研發(fā)中心，擔(dān)任創(chuàng)意生態(tài)技術(shù)負(fù)責(zé)人，之前曾負(fù)責(zé)抖音電商上海研發(fā)團(tuán)隊(duì)、抖音音樂項(xiàng)目、小紅書客戶端。畢業(yè)于華東師范大學(xué)數(shù)學(xué)系國(guó)家理科基地班，自學(xué)完計(jì)算機(jī)專業(yè)的所有主干課程，從事移動(dòng)軟件開發(fā)工作十年以上，先后參與過 Windows Mobile、Windows Phone、嵌入式、 Android 以及 iOS 等平臺(tái)的 App 和框架開發(fā)，主導(dǎo)了多款大中型 App 的研發(fā)，也曾作為客戶端架構(gòu)師負(fù)責(zé)過 Android、iOS、Web 三端的基礎(chǔ)架構(gòu)設(shè)計(jì)和演進(jìn)，在移動(dòng)架構(gòu)、跨平臺(tái)開發(fā)等大前端領(lǐng)域具有豐富的研發(fā)和管理經(jīng)驗(yàn)。
議題介紹：
議題一：《支付寶錢包動(dòng)態(tài)化技術(shù)方案的現(xiàn)狀和演進(jìn)》——王佐 螞蟻集團(tuán) 支付寶事業(yè)群小程序技術(shù)部高級(jí)技術(shù)專家
支付寶在 17 年左右啟動(dòng)了錢包下一代動(dòng)態(tài)化技術(shù)方案 Cube。在過去的 4 年中，通過業(yè)務(wù)的打磨，逐漸形成了兩個(gè)技術(shù)產(chǎn)品。一個(gè)是面向移動(dòng)端應(yīng)用開發(fā)的動(dòng)態(tài)卡片技術(shù)棧，在原生的 Native 頁面中嵌入動(dòng)態(tài)卡片；開發(fā)者使用類 Vue 的語法編寫動(dòng)態(tài)卡片的布局和邏輯，發(fā)布即可見，從而提高原生頁面的運(yùn)營(yíng)效率。一個(gè)是面向 IoT 應(yīng)用開發(fā)的小程序技術(shù)棧，向低端設(shè)備上的開發(fā)者提供提供小程序技術(shù)，目前主要應(yīng)用于電視/收銀臺(tái)等場(chǎng)景。
議題二：《美團(tuán)企業(yè)應(yīng)用前端工程化實(shí)踐》——楊林 美團(tuán) 基礎(chǔ)研發(fā)前端技術(shù)專家
在美團(tuán)，支撐業(yè)務(wù)高效運(yùn)轉(zhuǎn)的企業(yè)應(yīng)用是較為復(fù)雜的 ToB 業(yè)務(wù)，包括 HR、財(cái)務(wù)和 ERP 等業(yè)務(wù)，這些領(lǐng)域下有 100+ 系統(tǒng)，幾千個(gè)頁面，特點(diǎn)是系統(tǒng)多，交互復(fù)雜，業(yè)務(wù)迭代快，本次分享介紹我們建設(shè)大型的 ToB 應(yīng)用的過程，如何通過“微前端架構(gòu)+開發(fā)模板化”的工程化方式，支持眾多業(yè)務(wù)線并行需求迭代，協(xié)同幾百人團(tuán)隊(duì)快速交付。
議題三：《簡(jiǎn)潔的藝術(shù) —— astro 帶來的全新體驗(yàn)》——薛英琛 字節(jié)跳動(dòng) 小程序前端開發(fā)工程師
現(xiàn)代前端開發(fā)技術(shù)的演進(jìn)史幾乎就是 JavaScript 的發(fā)展史，我們?cè)絹碓缴偃ブ苯泳帉?HTML/CSS，轉(zhuǎn)而將這項(xiàng)工作交給各類 JavaScript 框架與工具，但是這并不是無痛的抽象，很明顯我們正在為無限的自由買單。Astro 是解決這個(gè)問題的一種選擇。它利用 partial-hydrate 的手段，結(jié)合用戶交互特點(diǎn)，盡量地按需加載，同時(shí)在編譯時(shí)自動(dòng)識(shí)別內(nèi)容去做靜態(tài)化。另外，它也天然支持微前端，結(jié)合一整套 bundleless 開發(fā)鏈路，大幅提升開發(fā)者構(gòu)建復(fù)雜的前端應(yīng)用的開發(fā)體驗(yàn)。
議題四：《貝殼視覺物料生產(chǎn)平臺(tái)的架構(gòu)與實(shí)踐》——閆士博 貝殼找房 資深前端工程師
隨著業(yè)務(wù)發(fā)展，公司的視頻、圖片等各類物料的需求日益增長(zhǎng)，開發(fā)與設(shè)計(jì)的人力捉襟見肘。貝殼視覺物料生產(chǎn)平臺(tái)，是前端技術(shù)創(chuàng)新與架構(gòu)賦能業(yè)務(wù)的典型，通過自動(dòng)識(shí)別各類設(shè)計(jì)稿，加之圖文、視頻、動(dòng)態(tài) GIF 的可視化編輯與數(shù)據(jù)配置，統(tǒng)一視覺物料的生產(chǎn)管理能力，支持各業(yè)務(wù)低成本完成物料相關(guān)需求，并賦予上千運(yùn)營(yíng)人員直接制作視覺物料的能力，大大提高產(chǎn)研效率，為公司的業(yè)務(wù)運(yùn)營(yíng)保駕護(hù)航。
大前端性能優(yōu)化
專題簡(jiǎn)介：
在移動(dòng)互聯(lián)網(wǎng)時(shí)代，由于設(shè)備資源、網(wǎng)絡(luò)等因素，性能優(yōu)化顯得尤為重要，反之，性能不友好的產(chǎn)品，用戶流失率極高。本專場(chǎng)將邀請(qǐng)?jiān)?Web 前端、渲染引擎和特定場(chǎng)景下有速度優(yōu)化經(jīng)驗(yàn)的技術(shù)專家，通過對(duì)性能優(yōu)化優(yōu)化工具及技術(shù)，去分享其在端上的實(shí)踐經(jīng)驗(yàn)。
出品人：梁士興 美團(tuán)買菜終端研發(fā)負(fù)責(zé)人
2009 年畢業(yè)于北京航空航天大學(xué)，2014 年 7 月份加入到美團(tuán)，現(xiàn)任美團(tuán)買菜終端研發(fā)組負(fù)責(zé)人。
多年從事大前端方向的技術(shù)研發(fā)工作，對(duì)應(yīng)用架構(gòu)演變、大前端工程化建設(shè)以及大前端的技術(shù)發(fā)展趨勢(shì)有濃厚的興趣，希望能夠與大家進(jìn)行交流和分享。
議題介紹：
議題一：《手淘跨平臺(tái)引擎架構(gòu)與未來演進(jìn)》——彭濤（龍冥） 阿里巴巴 無線技術(shù)專家
互聯(lián)網(wǎng)業(yè)務(wù)如火如荼的飛速發(fā)展，新的跨平臺(tái)技術(shù)也隨著歷史的浪潮在探索和實(shí)踐中不斷涌現(xiàn)，最成熟的跨平臺(tái)技術(shù)莫過于大家熟知的瀏覽器技術(shù)。標(biāo)準(zhǔn)化以及其強(qiáng)大的生態(tài)，加上硬件的不斷升級(jí)所帶來的性能紅利使它一直占據(jù)著舉足輕重的重要地位，隨著業(yè)務(wù)復(fù)雜度的不斷提升，從后來的 Weex/React Native，到現(xiàn)在如火如荼的 Flutter，也標(biāo)志著新一代跨平臺(tái)架構(gòu)已升級(jí)為自繪渲染，高性能腳本引擎等內(nèi)核技術(shù)深水區(qū)。如何滿足差異化業(yè)務(wù)場(chǎng)景，依托前端成熟的生態(tài)與標(biāo)準(zhǔn)化，減少業(yè)務(wù)的遷移適配成本，通過一套跨端內(nèi)核引擎支持多 App，以至多生態(tài)乃至不同的前端框架，成為了跨平臺(tái)架構(gòu)的新挑戰(zhàn)。本次將分享從手淘幾年來隨著業(yè)務(wù)發(fā)展所帶來架構(gòu)升級(jí)思考，核心性能瓶頸的突破以及對(duì)未來幾年內(nèi)跨平臺(tái)架構(gòu)的探索方向，希望能與您產(chǎn)生技術(shù)上的共鳴與互勉。
議題二：《預(yù)加載技術(shù)在百度 App 上的應(yīng)用》——楊剛 百度 百度 App T7 瀏覽內(nèi)核研發(fā)工程師、整體內(nèi)核技術(shù)負(fù)責(zé)人
隨著移動(dòng)設(shè)備性能的整體提升（CPU、內(nèi)存、網(wǎng)絡(luò)等），越來越多的移動(dòng)應(yīng)用通過預(yù)取技術(shù)來優(yōu)化 H5 相關(guān)業(yè)務(wù)的首屏性能，百度 App 也在很多業(yè)務(wù)場(chǎng)景使用了這一技術(shù)。預(yù)取技術(shù)很誘人，對(duì)打開速度往往可以起到立竿見影的效果，但在移動(dòng)端相比 PC 還是有很多需要注意的事項(xiàng)，比如，由于 32 位運(yùn)行模式的關(guān)系，內(nèi)存仍然是一個(gè)需要高度關(guān)注的一個(gè)點(diǎn)。本次主題將通過對(duì)移動(dòng)端 H5 業(yè)務(wù)速度拆解、常用優(yōu)化手段特別是預(yù)取技術(shù)的原理及優(yōu)缺點(diǎn)入手，梳理預(yù)取技術(shù)的注意事項(xiàng)，以及預(yù)取技術(shù)在百度app的應(yīng)用實(shí)踐過程。
議題三：《前端頁面加載性能優(yōu)化實(shí)踐及運(yùn)維》——王梓童 美團(tuán) 買菜事業(yè)部 iOS 開發(fā)工程師
隨著業(yè)務(wù)不斷地發(fā)展，美團(tuán)開始引入 RN 用于解決對(duì)開發(fā)效率和更新速度的需求，同時(shí)使用 H5 支撐數(shù)量繁多的營(yíng)銷活動(dòng)。RN、H5 在性能上相較 Native 技術(shù)有著天然的劣勢(shì)。如何在享受開發(fā)迭代效率提升的同時(shí)，滿足用戶日益嚴(yán)苛的性能體驗(yàn)要求，成為每個(gè)移動(dòng)開發(fā)者追求的目標(biāo)。為此，作為美團(tuán)的新業(yè)務(wù)團(tuán)隊(duì)，在2021年上半年度對(duì)性能進(jìn)行了專項(xiàng)優(yōu)化；在半年時(shí)間里，將 RN 頁面 1s 內(nèi)渲染出首屏的比例由40%提升至了85%，實(shí)現(xiàn)了頁面秒開甚至近乎直出的性能體驗(yàn)，H5 TP90 首屏?xí)r間由也從 4500ms 降低到了 2000ms。本次分享將深入 RN、H5 的技術(shù)原理，分析優(yōu)化思路，系統(tǒng)性介紹在美團(tuán)有著豐富實(shí)踐的成熟優(yōu)化措施，以及相關(guān)指標(biāo)是如何監(jiān)控運(yùn)維的。相信經(jīng)過本次分享交流，你可以更全面地了解前端性能的優(yōu)化方案，并結(jié)合自己 App 的實(shí)際情況落地。
議題四：《小紅書搭建秒開 H5 的關(guān)鍵技術(shù)設(shè)計(jì)》——楊遠(yuǎn)翔 小紅書 電商技術(shù)部電商大前端負(fù)責(zé)人
首屏性能一直在快迭代 H5 業(yè)務(wù)中被人詬病，尤其是在無法定制首屏優(yōu)化，有豐富內(nèi)容的運(yùn)營(yíng)搭建場(chǎng)景。我們吸取了近幾年業(yè)界公開關(guān)于性能探索中寶貴實(shí)踐經(jīng)驗(yàn)，在搭建業(yè)務(wù)中逐步探索、沉淀出一套基于"真實(shí)用戶體感秒開"的技術(shù)方案。全員參與(前后端、QA、產(chǎn)品視覺)，管"挖"管"埋"。
大前端技術(shù)探索
專題簡(jiǎn)介：
隨著互聯(lián)網(wǎng)不斷發(fā)展，前端技術(shù)也跟上班車；Vue 發(fā)布 3.0 新特性，React 版本也到了 V17；連 Flutter 也開始和 XD 緊密聯(lián)系。本專題將聚焦 2021 新技術(shù)及未來前端領(lǐng)域的新技術(shù)發(fā)展趨勢(shì)。
出品人：李玉北 字節(jié)跳動(dòng) Web Infra 團(tuán)隊(duì)負(fù)責(zé)人
開源愛好者，熱愛 JavaScript 社區(qū)，目前負(fù)責(zé)字節(jié)跳動(dòng) Web Infra 團(tuán)隊(duì) (https://webinfra.org/sg)。團(tuán)隊(duì)的職責(zé)是維護(hù)公司前端的技術(shù)設(shè)施和服務(wù)（例如：Node.js、Serverless、跨端解決方案等等），并同時(shí)打造下一代的 Web 開發(fā)引擎，重塑基于 Web 技術(shù)棧的應(yīng)用的開發(fā)流程。
議題介紹：
議題一：《開發(fā)、維護(hù)與微循環(huán)》——張立理 百度EE 前端架構(gòu)師
在一個(gè)相對(duì)長(zhǎng)期維護(hù)與發(fā)展的應(yīng)用中，開發(fā)者需要更多時(shí)間面對(duì)功能的增量迭代、已有功能的調(diào)整、修復(fù)與優(yōu)化等情況。
傳統(tǒng)的初始腳手架、構(gòu)建工具、代碼生成等雖有助于項(xiàng)目從零到一的快速啟動(dòng)，但在增量迭代中難以發(fā)揮持續(xù)地效益。
項(xiàng)目的長(zhǎng)期持續(xù)開發(fā)是一個(gè)個(gè)人能力、開發(fā)模式、團(tuán)隊(duì)協(xié)作緊密結(jié)合的過程，本次分享將介紹一種基于組件化的開發(fā)形式，力求通過統(tǒng)一的手段進(jìn)行工作的分解，在細(xì)粒度上完成定義、開發(fā)、驗(yàn)證、凍結(jié)的研發(fā)循環(huán)，進(jìn)而保持合適的開發(fā)節(jié)奏、效率、質(zhì)量。
議題二：《從歷史的演進(jìn)來看前端業(yè)務(wù)工程的發(fā)展》——俞天翔 快手 Web開發(fā)探索組前端負(fù)責(zé)人
從“上古時(shí)期”的模板拼裝到“MV*”的大量被使用；從 jQuery 一統(tǒng)天下到 Vue/React 逐步成為全民框架；從 PC 時(shí)代到移動(dòng)時(shí)代，從 2B 到 2C，前端 er 們似乎一直都在探索路上不斷前進(jìn)。在歷史的發(fā)展進(jìn)程中，我們是否能夠積累出屬于我們的工程方案，以應(yīng)對(duì)業(yè)務(wù)的持續(xù)發(fā)展。本次分享將結(jié)合講者在過去工作中的經(jīng)驗(yàn)以及大型活動(dòng)的“慘痛”開發(fā)經(jīng)歷，針對(duì)如何對(duì)工程進(jìn)行設(shè)計(jì)，將工程中變與不變的部分進(jìn)行拆解，將業(yè)務(wù)開發(fā)逐步演變成“填空題”，保證持續(xù)交付和有效積累。
議題三：MWA（現(xiàn)代 Web 應(yīng)用）框架和 Modern JS 工程方案——宋振偉 字節(jié)跳動(dòng) Web Infra研發(fā)工程師
前端開發(fā)和 Web 開發(fā)中出現(xiàn)的范式轉(zhuǎn)移都已經(jīng)累積到接近革命的程度，字節(jié)跳動(dòng) Web Infra 前段時(shí)間介紹了「現(xiàn)代 Web 開發(fā)」范式和 、Modern Web Stack、MWA 這些新一代技術(shù)，這次會(huì)進(jìn)一步基于 Modern.js 開源項(xiàng)目來介紹 MWA 框架、現(xiàn)代 Web 工程方案。
此外，混沌工程、云原生、分布式數(shù)據(jù)庫、低代碼、機(jī)器學(xué)習(xí)、音視頻技術(shù)等專場(chǎng)議題講師已全部上線，目前大會(huì)線上直播免費(fèi)預(yù)約火熱進(jìn)行中，點(diǎn)擊底部 閱讀原文 直達(dá)大會(huì)官網(wǎng)，了解更多專題詳情。
點(diǎn)擊閱讀原文了解更多詳情
總結(jié)
以上是生活随笔為你收集整理的前端18个月难度翻番？来这里把握大前端技术本质进展丨稀土开发者大会的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Golang之channel操作
- 下一篇： Golang之错误处理