簡介： 2021 哪些前端技術值得關注？來聽聽狼叔的分享。

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

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

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

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

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

我個人也走過類似的路，2017年加入阿里，將PHP替換為Node.js，隨后搞了開源項目egg-react-ssr，然后在2019年加入前端委員會，負責Serverless-side render方向。在2020年，轉崗到淘系前端，負責前端智能化相關開發。我其實是非?？春肧erverless的，Serverless這種穩步推進的必然是前端新基建，未來玩2到5年問題不大。對我而言，前端智能化的誘惑更大，能夠站到產研鏈路是思考問題，這才是我夢寐以求的機會。

我之前的想法是搞一次Node Party講講這些2021年前端趨勢預測。在線直播，不知道是否有人感興趣。先把我的這些思考寫出來，希望能夠對大家判斷2021年前端趨勢有所幫助。

http import 會大行其道

其實就是Deno創造的方式，Deno被評為2020最佳開源貢獻也是實至名歸的。

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

把cjs轉esm都交給CDN類的服務來做更合適。事實上，pika.dev/skypack.dev/http://jspm.io 都已經做了這件事兒。

Node.js馬上跟上，相關PR早已在路上，此項必火。

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

邏輯編排，更加面向開發者

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

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

智能UI精細化

首先服務端搜索瓶頸已經到了天花板，端智能和端UI的探索，一定是增量上提升業務指標的。)

• 參見文章《智能UI：面向未來的UI開發技術》

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

智能化 PRD 2 Code（P2C）

站在產研鏈路審視研發效率問題。站在D2C（設計稿轉代碼）之上，引入PD產品經理標注方式提升出碼，進一步做到無人工，真正智能化。(招人做此項目)

下面2020年D2前端大會上ppt分享的一頁，PD標注業務含義講的還是比較清楚的。

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

不會 Python，前端也能搞機器學習

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

參見文章《前端機器學習的利器，更快的 Pipcook 1.2》

一些我關注的開源項目

midway-hooks

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

https://github.com/midwayjs/hooks

imove

邏輯編排工具，開發是有快感的?；诎⒗镩_源的x6和formrender，簡單易用。

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

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

ykfe/ssr

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

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

airpack

阿里內部的支持http import和cjs轉esm的高效構建工具，據說已經在籌備開源工作了?？吹揭粋€性能壓測，airpack大約是webpack5的20倍左右。

不確定的是 react server component

仍需要時間去了解。

Winter 和甄子聊的前端智能化

年度最佳關于前端智能化的視頻。

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

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

總結

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

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

• 智能UI，目前已經能夠看到增量的點。頭條也做了類似的事兒。

• P2C，圍繞業務標注，實現產研提效，已驗證。

• Pipcook會進一步簡化ai開發，只要有數據就能訓練模型，真的是有手就行。

• Design+，設計資產管理。

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

總結一下，筆者認為前端智能化是2021年最有前途的方向。

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

我經歷過的階段：

• 熟悉imgcook，這是d2c領域。覆蓋了 2020 年雙 11 會場 90%+ 的模塊開發，出碼可用率達到 79.26%，且需求吞吐量提升 1.5~2 倍，給前端研發帶來實質性的提效。因為我是雙十一PM，這個我是相當知道。

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

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

• 繼續深化C端解決方案，站在淘系業務和技術都很成熟的前提下，提升業務數據，又能兼顧技術創新，大概不會有比這還膽大包天且令人激動的目標了。

這個團隊是一個復合型團隊。除了有卓風，妙凈等老阿里前端大佬外，還有算法、設計、AI底層、UI等各個方面專家。

這是一個很潮、包容、技術范的前端智能化團隊。歡迎感興趣的同學一起交流前端智能化。

作者：狼叔

原文鏈接?

本文為阿里云原創內容，未經允許不得轉載

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。