前端技术未来三年前瞻性思考
大家好，我是若川。今天推薦云謙大佬的一篇好文章，值得收藏。點(diǎn)擊下方卡片關(guān)注我、加個(gè)星標(biāo)，或者查看源碼等系列文章。學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列
習(xí)慣從業(yè)務(wù)場(chǎng)景、用戶體驗(yàn)、研發(fā)速度、維護(hù)成本四個(gè)維度來看框架等前端技術(shù)，大部分的技術(shù)點(diǎn)都能找到合適的位置，解的問題是如何快速上線和維護(hù)滿足業(yè)務(wù)的好用的產(chǎn)品。
業(yè)務(wù)場(chǎng)景
這部分解從框架的角度看業(yè)務(wù)需要。
框架負(fù)責(zé)，
對(duì)接后后端框架
對(duì)接輸出環(huán)節(jié)，包括支付寶容器，pc 和 mobile 瀏覽器，組件研發(fā)等
對(duì)接二方服務(wù)，包括統(tǒng)計(jì)，鑒權(quán)等
未來三年，
更多的業(yè)務(wù)有移動(dòng)辦公需求，小程序會(huì)繼續(xù)加量
更多復(fù)雜場(chǎng)景的出現(xiàn)，包括重型應(yīng)用，應(yīng)用集群等，WebAssembly，微前端，Module Federation 等技術(shù)會(huì)在此發(fā)揮作用
標(biāo)準(zhǔn)應(yīng)用中 NoCode/LowCode 的占比逐漸增大，開發(fā)者逐漸習(xí)慣這種研發(fā)方式，包括云鳳蝶或更垂直的 NoCode 平臺(tái)，imgcook 等
需要對(duì)接的業(yè)務(wù)場(chǎng)景越來越多，框架層需要做取舍、收斂和適時(shí)的減法
用戶體驗(yàn)
什么是默認(rèn)好用？以及如何做到默認(rèn)好用。
要有更好的用戶體驗(yàn)，前端 + 設(shè)計(jì)師需負(fù)責(zé)，
前端尺寸要小，這樣頁(yè)面載入更快
合理的 Code Splitting、Bundle Splitting 和按需加載策略，這樣重要內(nèi)容載入更快
UI 好看，交互流暢且好用
合理的緩存和預(yù)加載策略，這樣頁(yè)面切換更快
之前覺得 5G 來了尺寸肯定不是問題，直到我看到需要下載 60M JS 資源的頁(yè)面，內(nèi)網(wǎng)環(huán)境打開頁(yè)面都要 8s+。現(xiàn)在的圖形庫(kù)、UI 庫(kù)根本不把尺寸當(dāng)回事。
未來三年，如果我們希望有更好的用戶體驗(yàn)，
圖形庫(kù)、UI 庫(kù)自己得做瘦身/按需加載/正確的 tree-shaking/設(shè)計(jì)合理的按需編譯
更多框架層內(nèi)置的性能優(yōu)化方案
框架接管請(qǐng)求層，不止是發(fā)請(qǐng)求，基于路由，提供緩存和預(yù)加載策略
混合研發(fā)如果成為主流，需要解沙箱滿的問題，參考?tech ui 首頁(yè)，換 module federation 或者坐等瀏覽器實(shí)現(xiàn)標(biāo)準(zhǔn)的沙箱環(huán)境
研發(fā)速度
這部分解如何快速完成研發(fā)，并交付上線。
各方配合，不止是框架，
工具提速、框架瘦身、TS 定義等
組件封裝，包含 antd/antv/tech-ui
數(shù)據(jù)準(zhǔn)備，包含 oneapi
交付流暢性，包含 DEMO 中心，MOCK 平臺(tái)，聯(lián)調(diào)最佳實(shí)踐等
輔助工具
未來三年，
編譯速度肯定會(huì)大幅提升，路肯定不止一條；重 CPU 部分會(huì)基于 Rust/Go 實(shí)現(xiàn)但不是整體，整體方案的終態(tài)我更傾向 npm pre-built cdn + bundless 的組合；這不止是框架/工具等事，ui 庫(kù)和工具庫(kù)也許合理規(guī)劃和配置，不然一個(gè)項(xiàng)目用 5 個(gè)圖形庫(kù) + 10 個(gè)依賴 antd 等庫(kù)，10000+ 的文件要編譯，怎么搞也是快不起來
更多垂直領(lǐng)域高級(jí)別的封裝，集成框架/UI/數(shù)據(jù)/數(shù)據(jù)流，快速產(chǎn)出中臺(tái)應(yīng)用，形態(tài)可能是平臺(tái)，也可能是 ProCode；封裝等級(jí)越高，開發(fā)越快，但定制越難，需權(quán)衡
命令行在很多場(chǎng)景下不夠用，借助輔助工具可進(jìn)一步提效；形態(tài)有編輯器插件、Chrome 插件和 In-Context Editing
維護(hù)成本
產(chǎn)品不僅要開發(fā)，還要維護(hù)，何況框架和依賴庫(kù)還在不斷升級(jí)。
成本問題包括，
新人的上手成本
開發(fā)人員迭代的接手成本
技術(shù)棧升級(jí)成本
未來三年，對(duì)于框架而言，
降低技術(shù)棧升級(jí)成本。這需要框架有更好的頂層設(shè)計(jì)，更好的抽象，抹平底層技術(shù)棧，解 3-5 年后依賴的技術(shù)棧變更后遷移成本最小化的問題；功能方面權(quán)衡一方集成/二方提供/三方引入，設(shè)計(jì)上適度集成，適度組合，適度 eject
寫一樣的代碼。持續(xù)打磨最佳實(shí)踐，方案唯一化，一不是絕對(duì)的一，而是特定場(chǎng)景下的一；框架支持多端適配，未來是 PC + 小程序，長(zhǎng)遠(yuǎn)看，多套寫法應(yīng)該走向統(tǒng)一
最近組建了一個(gè)江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進(jìn)群。
·················?若川出品?·················
今日話題
略。歡迎在下方留言~? 歡迎分享、收藏、點(diǎn)贊、在看我的公眾號(hào)文章~
一個(gè)愿景是幫助5年內(nèi)前端人走向前列的公眾號(hào)
可加我個(gè)人微信?ruochuan12，長(zhǎng)期交流學(xué)習(xí)
推薦閱讀
我在阿里招前端，我該怎么幫你？（現(xiàn)在還能加我進(jìn)模擬面試群）
若川知乎問答：2年前端經(jīng)驗(yàn)，做的項(xiàng)目沒什么技術(shù)含量，怎么辦？
點(diǎn)擊上方卡片關(guān)注我、加個(gè)星標(biāo)，或者查看源碼等系列文章。
學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列
總結(jié)
以上是生活随笔為你收集整理的前端技术未来三年前瞻性思考的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3213）：setstate的
- 下一篇： 推荐几个干货超多助你成长的前端大佬