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

[[316406]]

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

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

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

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

Webpack 5 正式版發(fā)布，通過物理緩存大幅提升構(gòu)建性能，在短期內(nèi)還會是主流構(gòu)建工具;但隨著 ES Modules 成為主流，CJS 淡出，ESM CDN 大范圍使用后構(gòu)建工具將轉(zhuǎn)向 Bundless，Webpack 不可避免也會逐漸退出歷史舞臺。特別是當(dāng) HTTP/2 到來，支持請求與響應(yīng)的多路復(fù)用來，HTTP 首部字段被大大壓縮，傳輸效率會得到極大的提升，屆時我們將不再需要對資源文件進(jìn)行合并操作，構(gòu)建工具也會隨之加速進(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ā)展。然而我們也要看到另外一個趨勢，自成生態(tài)的巨型應(yīng)用如微信、支付寶、Facebook 等正在收斂瀏覽器上軟件至他們的客戶端上，背后的典型技術(shù)是小程序、PWA，我們甚至已經(jīng)看到了出現(xiàn)在 PC 客戶端上小程序。而借助如 Electron 這類項目，很多 B/S 模式的軟件服務(wù)在推出自己的客戶端以謀求用戶更專注的使用體驗，特別是很多傳統(tǒng)以 C/S 模式提供服務(wù)的軟件推出客戶端會更貼合用戶的心智。這是我們看到的歷史輪回，但接下來的這段 C/S 歷程跟過去的 C/S 所用到的技術(shù)已經(jīng)完全不一樣了，不管是小程序、PWA還是Service Worker、Electron、這 Client 端上開源項目會迎來一個春天。

新興交互場景將喚起 Micro UI

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

RPA & Marchine Driven UI

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

RPA 這個遠(yuǎn)古時代活躍在游戲外掛的古老的技術(shù)在 AI、標(biāo)準(zhǔn)化產(chǎn)品飛速發(fā)展的正在煥發(fā)著升級，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ī)器人來驅(qū)動。甚至應(yīng)用已經(jīng)不再是一個當(dāng)下我們能看到的，而是一個個機(jī)器人了，而我們提供的則是：RPA 機(jī)器人制作工具、可以被 RPA 來驅(qū)動的標(biāo)準(zhǔn) UI。如何設(shè)計與實現(xiàn)可以被機(jī)器人、人同時使用的 UI 是我們面臨的一大挑戰(zhàn)。

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

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

前端智能化

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

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

端到端的研發(fā)

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

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

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