簡介： 2021 哪些前端技術(shù)值得關(guān)注？來聽聽狼叔的分享。

知乎上，有人提問《2021前端會有什么新的變化？》

狼叔的回答二天超過6.1萬+閱讀量，目前444個贊同，2個專業(yè)徽章，整體上看，這篇回答大家還是相當(dāng)認(rèn)可的。

誠如很多大V所講，確實(shí)是2020年，前端圈帶來具有突破意義的內(nèi)容或框架不多，很多人也不會再有2013年到2017間日日新的框架大戰(zhàn)局面，也不會有Node全棧之爭，也不會因?yàn)镽eact-Native、Weex、Flutter這類跨端而欣喜若狂。

我能看到的是今天前端已趨于穩(wěn)定，在深水區(qū)探索，比如螞蟻金服的x6，在圖形可視化方面做的就是非常好，比如淘寶的midway-faas，在Serverless領(lǐng)域確實(shí)有它獨(dú)特的定位。比如語雀，釘釘文檔，在線Excel等等，也都不是可以輕松可以搞定的。

我很開心的看到，混亂之后，大家都能在深水區(qū)里進(jìn)行探索。2019年阿里經(jīng)濟(jì)體前端委員會四大技術(shù)方向：第一搭建服務(wù)，第二是 Serverless，第三是智能化，第四是 IDE。2020年阿里經(jīng)濟(jì)體前端委員的突破方向是互動技術(shù)、跨端技術(shù)、智能化。而中后臺、數(shù)據(jù)可視化、Node.js（Serverless）、工程體系（安全生產(chǎn)）都變成了基礎(chǔ)技術(shù)方向。這大概是能夠代表前端技術(shù)走向的。

我個人也走過類似的路，2017年加入阿里，將PHP替換為Node.js，隨后搞了開源項(xiàng)目egg-react-ssr，然后在2019年加入前端委員會，負(fù)責(zé)Serverless-side render方向。在2020年，轉(zhuǎn)崗到淘系前端，負(fù)責(zé)前端智能化相關(guān)開發(fā)。我其實(shí)是非常看好Serverless的，Serverless這種穩(wěn)步推進(jìn)的必然是前端新基建，未來玩2到5年問題不大。對我而言，前端智能化的誘惑更大，能夠站到產(chǎn)研鏈路是思考問題，這才是我夢寐以求的機(jī)會。

我之前的想法是搞一次Node Party講講這些2021年前端趨勢預(yù)測。在線直播，不知道是否有人感興趣。先把我的這些思考寫出來，希望能夠?qū)Υ蠹遗袛?021年前端趨勢有所幫助。

http import 會大行其道

其實(shí)就是Deno創(chuàng)造的方式，Deno被評為2020最佳開源貢獻(xiàn)也是實(shí)至名歸的。

import cheerio from "https://dev.jspm.io/npm:cheerio/index.js";

把cjs轉(zhuǎn)esm都交給CDN類的服務(wù)來做更合適。事實(shí)上，pika.dev/skypack.dev/http://jspm.io 都已經(jīng)做了這件事兒。

Node.js馬上跟上，相關(guān)PR早已在路上，此項(xiàng)必火。

參見文章《2021再看Deno（關(guān)于CDN for JavaScript modules的思考）》 https://mp.weixin.qq.com/s/EzmNQ_oqxUuPQFfZYJWDzA

邏輯編排，更加面向開發(fā)者

已收到很多imove類似項(xiàng)目。解決邏輯可變和不直觀的問題。

以函數(shù)為粒度，繼而通過運(yùn)用配置類的操作，將邏輯可視化，配置化。用法極為簡單。參見 https://github.com/imgcook/imove

智能UI精細(xì)化

首先服務(wù)端搜索瓶頸已經(jīng)到了天花板，端智能和端UI的探索，一定是增量上提升業(yè)務(wù)指標(biāo)的。)

• 參見文章《智能UI：面向未來的UI開發(fā)技術(shù)》

• 參見文章《CBU智能UI落地最佳實(shí)踐》

智能化 PRD 2 Code（P2C）

站在產(chǎn)研鏈路審視研發(fā)效率問題。站在D2C（設(shè)計稿轉(zhuǎn)代碼）之上，引入PD產(chǎn)品經(jīng)理標(biāo)注方式提升出碼，進(jìn)一步做到無人工，真正智能化。(招人做此項(xiàng)目)

下面2020年D2前端大會上ppt分享的一頁，PD標(biāo)注業(yè)務(wù)含義講的還是比較清楚的。

參見文章《前端智能化實(shí)踐— P2C 從需求文檔生成代碼 | D2 分享視頻+文章》

不會 Python，前端也能搞機(jī)器學(xué)習(xí)

https://github.com/alibaba/pipcook ，基于pipline思路抽象的AI基礎(chǔ)框架，讓AI落地更簡單。

參見文章《前端機(jī)器學(xué)習(xí)的利器，更快的 Pipcook 1.2》

一些我關(guān)注的開源項(xiàng)目

midway-hooks

最好用最潮的Serverless同構(gòu)框架，沒有之一。開源地址：

https://github.com/midwayjs/hooks

imove

邏輯編排工具，開發(fā)是有快感的。基于阿里開源的x6和formrender，簡單易用。

已開源，https://github.com/imgcook/imove

前面講過過，這里就不在贅述。

ykfe/ssr

基于Serverless的端渲染方案。支持多個Faas環(huán)境。同時支持csr和ssr無縫降級的方案。基于之前成熟的egg-react-ssr，去掉Eggjs，改成midway-faas，天然一套支持跨運(yùn)營商。

已開源，開源地址 https://github.com/ykfe/ssr

airpack

阿里內(nèi)部的支持http import和cjs轉(zhuǎn)esm的高效構(gòu)建工具，據(jù)說已經(jīng)在籌備開源工作了。看到一個性能壓測，airpack大約是webpack5的20倍左右。

不確定的是 react server component

仍需要時間去了解。

Winter 和甄子聊的前端智能化

年度最佳關(guān)于前端智能化的視頻。

• 【W(wǎng)eb前端會客廳】和甄子老師一起聊淘寶前端智能化(上） https://www.bilibili.com/video/BV14k4y117Px

• 【W(wǎng)eb前端會客廳】和甄子老師一起聊淘寶前端智能化(下） https://www.bilibili.com/video/BV1Mv411y7mU

總結(jié)

2020年各大廠應(yīng)該都在困惑，老項(xiàng)目為提升業(yè)務(wù)指標(biāo)發(fā)愁，新項(xiàng)目在為研發(fā)提效發(fā)愁。很多既得利益者，吃著所剩不多的紅利，一方面擔(dān)心被替換，舍不得放棄，一方面又不敢做改變。我的觀點(diǎn)是服務(wù)端算法（包括搜索推薦）今天已經(jīng)觸及了天花板，再提升一個點(diǎn)都會比之前更難。傳統(tǒng)前端基建也面臨一樣的問題，比如node，搭建，ui框架，對于下一代升級想法，大概也是缺少想法和目標(biāo)的。

創(chuàng)新是需要勇氣的，眼界不夠的人不能做到，能力不足的人不能做到。前端和AI結(jié)合的跨技術(shù)融合項(xiàng)目是存在非常大的機(jī)遇和挑戰(zhàn)的。甄子以一人之力，扛起前端智能化大旗是非常不容易的。目前imgcook在設(shè)計稿轉(zhuǎn)代碼領(lǐng)域已經(jīng)取得階段性結(jié)果，但我們還有如下探索。

• 智能UI，目前已經(jīng)能夠看到增量的點(diǎn)。頭條也做了類似的事兒。

• P2C，圍繞業(yè)務(wù)標(biāo)注，實(shí)現(xiàn)產(chǎn)研提效，已驗(yàn)證。

• Pipcook會進(jìn)一步簡化ai開發(fā)，只要有數(shù)據(jù)就能訓(xùn)練模型，真的是有手就行。

• Design+，設(shè)計資產(chǎn)管理。

• 像airpack、http import、imove、midway-hooks、ykfe/ssr這些其實(shí)都會成為前端新基建。

總結(jié)一下，筆者認(rèn)為前端智能化是2021年最有前途的方向。

很多人都以為前端智能化對ai和算法要求極高，其實(shí)這個看法是片面的。在前端智能化團(tuán)隊(duì)里有3種事兒可以做：1）業(yè)務(wù)，2）工程，3）算法。其中工程和業(yè)務(wù)是不需要算法的，對于新人也是會給緩沖期的，可以先做擅長的事兒，同時跟著團(tuán)隊(duì)向ai算法方面學(xué)習(xí)。

我經(jīng)歷過的階段：

• 熟悉imgcook，這是d2c領(lǐng)域。覆蓋了 2020 年雙 11 會場 90%+ 的模塊開發(fā)，出碼可用率達(dá)到 79.26%，且需求吞吐量提升 1.5~2 倍，給前端研發(fā)帶來實(shí)質(zhì)性的提效。因?yàn)槲沂请p十一PM，這個我是相當(dāng)知道。

• 接手P2C，建立pd標(biāo)注體系。這個過程是很困難的，但也是很有成長的。其實(shí)，更多的我是一個產(chǎn)品的角色。站在D2C的肩膀上，站在用戶視角（PD），保證項(xiàng)目方向不歪。對于pd能做什么，該怎么做，如何快速落地業(yè)務(wù)，我是有很多思考和成長的。

• 搞定API，以前都是先選數(shù)據(jù)源然后確定字段，這是很麻煩的，PD是無法接受的，如果api有100個，每個api有10個字段，pd就瘋了。我們的做法是先選字段，然后再確定具體接口，這種逆向思維，在這種項(xiàng)目里是非常適用的。

• 繼續(xù)深化C端解決方案，站在淘系業(yè)務(wù)和技術(shù)都很成熟的前提下，提升業(yè)務(wù)數(shù)據(jù)，又能兼顧技術(shù)創(chuàng)新，大概不會有比這還膽大包天且令人激動的目標(biāo)了。

這個團(tuán)隊(duì)是一個復(fù)合型團(tuán)隊(duì)。除了有卓風(fēng)，妙凈等老阿里前端大佬外，還有算法、設(shè)計、AI底層、UI等各個方面專家。

這是一個很潮、包容、技術(shù)范的前端智能化團(tuán)隊(duì)。歡迎感興趣的同學(xué)一起交流前端智能化。

作者：狼叔

原文鏈接?

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載

?

總結(jié)

以上是生活随笔為你收集整理的2021 年前端趋势预测的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。