2020年開(kāi)啟了下一個(gè)10年，站在這個(gè)起點(diǎn)展望前端的未來(lái)，必會(huì)面臨巨大的變化和挑戰(zhàn)。說(shuō)實(shí)話，展望接下來(lái)的十年會(huì)發(fā)生什么?十年對(duì)于互聯(lián)網(wǎng)，對(duì)于前端來(lái)說(shuō)太長(zhǎng)了，很難想象十年后會(huì)是什么一個(gè)場(chǎng)景，但這路上有些事情在我們看來(lái)正在發(fā)生。

[[316406]]

TypeScript 是當(dāng)下的政治正確但前端終將語(yǔ)言無(wú)關(guān)

毫無(wú)疑問(wèn) TypeScript 將成為很長(zhǎng)一段時(shí)間的主流，大型前端開(kāi)源項(xiàng)目大都已經(jīng)或正在全面擁抱 TypeScript，他能讓我們擁有很多面向?qū)ο笳Z(yǔ)言、強(qiáng)類型語(yǔ)言才具備的先進(jìn)特性，能幫助我們提升代碼質(zhì)量，降低團(tuán)隊(duì)協(xié)作上的成本和風(fēng)險(xiǎn)，如果我們的項(xiàng)目還未轉(zhuǎn)過(guò)來(lái)，是時(shí)候動(dòng)手了。

但一個(gè)開(kāi)源項(xiàng)目的質(zhì)量跟語(yǔ)言本身并無(wú)直接關(guān)系，更別說(shuō) TypeScript 本身依舊還只是帶「靜態(tài)類型檢查」的「弱類型」語(yǔ)言，OO并不是必須的，用原生 JS 也一樣能寫出優(yōu)雅的封裝與繼承，更讓人期待的是WebAssembly(https://www.zhihu.com/question/362893829) 的潛力被真正開(kāi)發(fā)出來(lái)后，前端終將語(yǔ)言無(wú)關(guān)，前端在研發(fā)的是人機(jī)交互界面上的產(chǎn)物。

瀏覽器技術(shù)和云計(jì)算的進(jìn)化將加速前端構(gòu)建和資源加載的變革

Webpack 5 正式版發(fā)布，通過(guò)物理緩存大幅提升構(gòu)建性能，在短期內(nèi)還會(huì)是主流構(gòu)建工具;但隨著 ES Modules 成為主流，CJS 淡出，ESM CDN 大范圍使用后構(gòu)建工具將轉(zhuǎn)向 Bundless，Webpack 不可避免也會(huì)逐漸退出歷史舞臺(tái)。特別是當(dāng) HTTP/2 到來(lái)，支持請(qǐng)求與響應(yīng)的多路復(fù)用來(lái)，HTTP 首部字段被大大壓縮，傳輸效率會(huì)得到極大的提升，屆時(shí)我們將不再需要對(duì)資源文件進(jìn)行合并操作，構(gòu)建工具也會(huì)隨之加速進(jìn)化。

C/S 到 B/S 再到 C/S

歷史總在不斷重復(fù)輪回中循環(huán)上升，互聯(lián)網(wǎng)，特別是云的出現(xiàn)讓軟件從 C/S 走向了 B/S，甚至如 WebAssembly 技術(shù)的出現(xiàn)，我們能更低成本的將原先的客戶端軟件移植到瀏覽器上去，一切看上去都是朝著 B/S 發(fā)展。然而我們也要看到另外一個(gè)趨勢(shì)，自成生態(tài)的巨型應(yīng)用如微信、支付寶、Facebook 等正在收斂瀏覽器上軟件至他們的客戶端上，背后的典型技術(shù)是小程序、PWA，我們甚至已經(jīng)看到了出現(xiàn)在 PC 客戶端上小程序。而借助如 Electron 這類項(xiàng)目，很多 B/S 模式的軟件服務(wù)在推出自己的客戶端以謀求用戶更專注的使用體驗(yàn)，特別是很多傳統(tǒng)以 C/S 模式提供服務(wù)的軟件推出客戶端會(huì)更貼合用戶的心智。這是我們看到的歷史輪回，但接下來(lái)的這段 C/S 歷程跟過(guò)去的 C/S 所用到的技術(shù)已經(jīng)完全不一樣了，不管是小程序、PWA還是Service Worker、Electron、這 Client 端上開(kāi)源項(xiàng)目會(huì)迎來(lái)一個(gè)春天。

新興交互場(chǎng)景將喚起 Micro UI

Micro Frontends (https://micro-frontends.org/) 正風(fēng)生水起，然而它不過(guò)是已經(jīng)風(fēng)靡多年但仍備受爭(zhēng)議的Microservice Architecture(https://microservices.io/) 在前端的應(yīng)用，可以幫我們更好地去解決復(fù)雜應(yīng)用的開(kāi)發(fā)和維護(hù)問(wèn)題。在人機(jī)交互，用戶如何在一個(gè)復(fù)雜的產(chǎn)品中找到此時(shí)此刻最需要的一個(gè) UI，仍然是一個(gè)未被很好地解決的問(wèn)題。用戶常常迷失在一個(gè)個(gè)大型 APP 復(fù)雜的 UI 中，然而很多時(shí)候我們只是需要一個(gè)能高效完成某項(xiàng)工作的 UI，姑且稱為 Micro UI 吧。在銀河帝國(guó)等科幻小說(shuō)及科幻電影中，常常能看到一種叫“信息窗”的黑科技，這樣的每個(gè)信息窗就是一個(gè) Micro UI。隨著 AI、AR、VR 、IOT 持續(xù)推進(jìn)話，設(shè)備將越來(lái)越懂人，信息和數(shù)據(jù)的呈現(xiàn)也將越來(lái)越生動(dòng)化，這些在科幻中才出現(xiàn)的東西在未來(lái) 10 年一定有一些會(huì)變成現(xiàn)實(shí) ，這種 UI 的開(kāi)發(fā)方式也將為前端的開(kāi)發(fā)方式帶來(lái)質(zhì)的變化。

RPA & Marchine Driven UI

在 AI 和 IOT 時(shí)代，如果你然堅(jiān)持認(rèn)為應(yīng)用一定是一個(gè)需要由專業(yè)人士設(shè)計(jì)開(kāi)發(fā)，并且由用戶通過(guò)手機(jī)主動(dòng)使用 Web 產(chǎn)品的話，那么你將有較大概率過(guò)未來(lái)。

RPA 這個(gè)遠(yuǎn)古時(shí)代活躍在游戲外掛的古老的技術(shù)在 AI、標(biāo)準(zhǔn)化產(chǎn)品飛速發(fā)展的正在煥發(fā)著升級(jí)，UiPath(https://www.uipath.com/)、Zapier(https://zapier.com/)、Microsoft Power Platform(https://flow.microsoft.com/zh-cn/) 、UI Bot(https://www.uibot.com.cn/) 等工具正在改變很多行業(yè)的工作方式，而以 Google Assistant 為代表的智能助理正在改變?nèi)藗兪褂秒娔X的方式。作為前端，我們要考慮是：UI 不僅是被人消費(fèi)的，還可以被機(jī)器消費(fèi)，甚至只需要描述你的意圖，這些非常需要一種高效的方式讓你的應(yīng)用可以被機(jī)器人來(lái)驅(qū)動(dòng)。甚至應(yīng)用已經(jīng)不再是一個(gè)當(dāng)下我們能看到的，而是一個(gè)個(gè)機(jī)器人了，而我們提供的則是：RPA 機(jī)器人制作工具、可以被 RPA 來(lái)驅(qū)動(dòng)的標(biāo)準(zhǔn) UI。如何設(shè)計(jì)與實(shí)現(xiàn)可以被機(jī)器人、人同時(shí)使用的 UI 是我們面臨的一大挑戰(zhàn)。

圖形技術(shù)依舊會(huì)是界面上的熱點(diǎn)

盡管腦機(jī)交互已經(jīng)在實(shí)驗(yàn)室里孵化，但未來(lái)十年眼睛依舊還是人類獲取外界信息最主要的通道，圖形化可以比文字快十倍甚至萬(wàn)倍的速度清晰有效地傳達(dá)信息，這是人類經(jīng)歷漫長(zhǎng)進(jìn)化習(xí)得的強(qiáng)大視覺(jué)化思考本能。在數(shù)據(jù)愈加豐富、使用場(chǎng)景愈加多樣的下一個(gè)十年，如何高效的從數(shù)據(jù)中獲得洞察依舊會(huì)有強(qiáng)烈的訴求，前端這個(gè)最接近數(shù)據(jù)可視化能力模型要求的工種依舊會(huì)是這個(gè)領(lǐng)域的主力。而另一方面，未來(lái)會(huì)出現(xiàn)新的「屏」，不管是 IOT 下的實(shí)屏還是 VR、AR 下的虛屏，當(dāng)下已經(jīng)相當(dāng)完備和標(biāo)準(zhǔn)化的繪圖 API 最有機(jī)會(huì)被新「屏」優(yōu)先支持和采用，在這基礎(chǔ)上利用圖形技術(shù)實(shí)現(xiàn)一套新的 UI 基礎(chǔ)設(shè)施甚至語(yǔ)言都是有可能的。

前端智能化

前端近年來(lái)一直嘗試提升效率，可視化研發(fā)、搭建體系、工程&工具、端多解決方案等等都是為了解決效率，但天花板已然出現(xiàn)，下一步必然會(huì)引入智能化能力，在原來(lái)的技術(shù)體系&產(chǎn)品上，注入自然語(yǔ)言識(shí)別、圖像識(shí)別的能力，使得效能的發(fā)生一系列質(zhì)的變化，來(lái)突破這個(gè)天花板。更大層面上，運(yùn)用智能化能力來(lái)解決工作中的問(wèn)題，會(huì)逐步成為前端的必備能力和思考方式。

就算不想去蹭人工智能的熱，事實(shí)上是你不得不接受并開(kāi)始學(xué)習(xí)人工智能，大量簡(jiǎn)單如千人千面的Banner、營(yíng)銷活動(dòng)頁(yè)已經(jīng)純粹通過(guò)人工智能自動(dòng)化生產(chǎn)，并不需要前端去參與研發(fā)，復(fù)雜如中后臺(tái)的表單、表格、圖表展現(xiàn)也已經(jīng)可以通過(guò)提供接口智能推導(dǎo)出最佳的頁(yè)面實(shí)現(xiàn)，只需要一行代碼輸入數(shù)據(jù)就能出可視化圖表，甚至從設(shè)計(jì)稿直接生成頁(yè)面也將變成現(xiàn)實(shí)。前端智能化的項(xiàng)目將會(huì)越來(lái)越多，任何時(shí)候開(kāi)始都不晚，但不開(kāi)始就晚了。

端到端的研發(fā)

隨著云原生和業(yè)務(wù)平臺(tái)能力逐步完備，前端運(yùn)用Serverless能力來(lái)完成端到端的研發(fā)工作會(huì)逐步成為一種趨勢(shì)，在這個(gè)趨勢(shì)的背后，會(huì)面臨兩個(gè)挑戰(zhàn)，一方面是需要將現(xiàn)有的工具和平臺(tái)延展到Serverless上，在支持Serverless的同時(shí)，必須將端到端一體化的來(lái)看待，包括：研發(fā)工具、監(jiān)控體系、質(zhì)量體系等等;另一方面對(duì)人員自身能力和意識(shí)有了新的要求。前端這個(gè)崗位的職能邊界和能力范圍的會(huì)發(fā)現(xiàn)變化。

基于前端智能化與端到端的研發(fā)方向上，是未來(lái)前端開(kāi)源上的最具吸引力的項(xiàng)目;而在整體的層面上，前端具備吸引力的項(xiàng)目會(huì)有兩個(gè)方面的特征：

1. 在現(xiàn)有相關(guān)體系上提出新的理念和思想;隨著框架、構(gòu)建庫(kù)等基礎(chǔ)設(shè)施收斂，類似的重復(fù)性的開(kāi)源項(xiàng)目會(huì)減少，但創(chuàng)新并不會(huì)停止，等到更多關(guān)注和認(rèn)可的一定是能力在基礎(chǔ)設(shè)施上提出新的理念和思想的項(xiàng)目。
2. 在現(xiàn)有相關(guān)體系上與其他領(lǐng)域產(chǎn)生鏈接;有些技術(shù)未必是剛剛出現(xiàn)，但今天重新受到前端業(yè)內(nèi)的關(guān)注，比如WebAssembly，因?yàn)榇蠹野l(fā)現(xiàn)了新的運(yùn)用場(chǎng)景。未來(lái)將現(xiàn)有前端技術(shù)與其他技術(shù)領(lǐng)域相結(jié)合的項(xiàng)目和設(shè)計(jì)，會(huì)受到開(kāi)源社區(qū)的更多關(guān)注。