“天下大勢(shì)，浩浩湯湯，順之者昌，逆之者亡。”

以下是對(duì)前端各位大佬2021總結(jié)的一個(gè)匯總總結(jié)。希望可以看到一些前端行業(yè)的動(dòng)向，排布。幫助團(tuán)隊(duì)和自身制定未來(lái)的規(guī)劃。內(nèi)容分為四個(gè)部分：

1. 基礎(chǔ)框架/工程化
2. 語(yǔ)言
3. 行業(yè)趨勢(shì)
4. 底層演進(jìn)

1. 基礎(chǔ)框架/工程化

隨著 jQuery.js 漸漸淡出人們的視野，前端開(kāi)發(fā)框架成為了開(kāi)發(fā)人員必不可少的工具，也成為大家最為關(guān)注的東西。

mv* 框架

• React（Next.js）
• Vue（nuxt.js）
• Svelte
• Angular。

React 即將發(fā)布18版本，vue3 成為vue默認(rèn)版本，Svelte異軍突起。

打包工具

• 傳統(tǒng)：Webpack, Rollup, Parcel, Esbuild

• ESM相關(guān)：Snowpack, Vite；

  ESM的實(shí)現(xiàn)：在開(kāi)發(fā)環(huán)境編譯時(shí)，使用 Server 動(dòng)態(tài)編譯 + 瀏覽器的 ESM，基本上實(shí)現(xiàn)了“開(kāi)發(fā)環(huán)境 0 編譯”的功能。而生產(chǎn)環(huán)境編譯時(shí)，則會(huì)調(diào)用其他編譯工具來(lái)完成（如 Vite 使用 Rollup）。

語(yǔ)法規(guī)范

• Babel
• Prettier
• ESLint

CSS

• Tailwind CSS（原子類）

web3D

• Three.js
• Oasis Engine

跨端

• React Native
• Flutter
• Weex
• uni-app
• taro

桌面端

• Tauri（Webview + Rust/.Net/Go）
• electron（Chromium + Nodejs）

微前端

• qiankun
• single-spa
• micro-app

E2E 測(cè)試

• cypress（node服務(wù)，與程序一起運(yùn)行）
• puppeteer（無(wú)頭瀏覽器）

shell

• zx

以下是stateOfJs對(duì)2016-2021各個(gè)框架的趨勢(shì)統(tǒng)計(jì)：

2. 語(yǔ)言

_數(shù)據(jù)來(lái)源 ↑_^[1]

_騰訊2020研發(fā)大數(shù)據(jù)報(bào)告 ↑_^[2]

_TIOBE 2月編程語(yǔ)言排行榜 ↑_^[3]

阿特伍德定律：任何可以用 JavaScript 來(lái)寫的應(yīng)用，最終都將用 JavaScript 來(lái)寫。

隨著前端應(yīng)用大型化、復(fù)雜化，TypeScript 肯定會(huì)越來(lái)越普及。未來(lái)，TypeScript 是否能得到瀏覽器和 Node.js 原生支持呢？我們一起期待吧。

前端的同學(xué)如果有想學(xué)習(xí)其他語(yǔ)言的，有如下推薦：

• Rust 是 JS 基礎(chǔ)設(shè)施的未來(lái) - Lee Robinson
• 全棧 —— Go
• AI —— Python
• Flutter —— Dart

3. 行業(yè)趨勢(shì)

3.1 前端智能化

• 低代碼（LowCode）

  其實(shí)就是早期的搭建系統(tǒng)、組件平臺(tái)等（宜搭、微搭），這個(gè)概念2014年被著名的研究機(jī)構(gòu)Forrester提出。低代碼平臺(tái)的門檻在逐步降低，從專業(yè)的技術(shù)人員向業(yè)務(wù)人員進(jìn)行轉(zhuǎn)變，中國(guó)低代碼行業(yè)比較分散。 其中，OutSystems、Mendix、微軟Salesforce、ServiceNow 被評(píng)為行業(yè)領(lǐng)導(dǎo)者。

  Appian、Oracle 和 Pega 被評(píng)為挑戰(zhàn)者。

  Creatio、Kintone、Newgen 和 Quickbase 被評(píng)為利基（niche）市場(chǎng)參與者。

  今年沒(méi)有廠商被評(píng)為遠(yuǎn)見(jiàn)者。

  Gartner 預(yù)測(cè)：“到 2023 年，超過(guò) 70% 的企業(yè)將采用低代碼（LCAP）作為他們發(fā)展戰(zhàn)略的關(guān)鍵目標(biāo)之一"。到 2025 年，整體 LCAP（低代碼開(kāi)發(fā)平臺(tái)）市場(chǎng)規(guī)模將達(dá)到 290 億美元，年復(fù)合增長(zhǎng)率超過(guò) 20%；其中，LCAP 的細(xì)分市場(chǎng)預(yù)計(jì)將在 2020——2025 年之間，從 44.5 億美元增長(zhǎng)至 143.8 億美元，復(fù)合年增長(zhǎng)率為 26.4%。

• 代碼自動(dòng)生成

  Sketch2Code，AI 將手繪稿子 轉(zhuǎn)換為 html 代碼。

  imgcook，將Sketch/PSD/圖片 轉(zhuǎn)換為 React、Vue、Flutter、小程序等代碼。

3.2 大前端（泛前端）

從切圖仔、寫 HTML 模板的“石器時(shí)代”，到前后端分離、大前端的“工業(yè)時(shí)代”，再到現(xiàn)在跨端技術(shù)、低代碼的“電氣時(shí)代”。前端研發(fā)的職責(zé)一直在改變，同時(shí)前端研發(fā)需要掌握的技術(shù)也在迭代更新。- 字節(jié)前端

Serverless

Serverless 是一種基于云計(jì)算的簡(jiǎn)化方式，基本可以理解為 FaaS（函數(shù)即服務(wù)）+ BaaS（后端即服務(wù)），在 BaaS 層進(jìn)行存儲(chǔ)與計(jì)算，在 FaaS 層提供云函數(shù)。

在 Serverless 的賦能之下，前端工程師能夠?qū)㈨?yè)面交互、業(yè)務(wù)邏輯、數(shù)據(jù)處理等全部掌控在自己的手中，實(shí)現(xiàn)了真正全棧的可能。

全棧

“全棧開(kāi)發(fā)者”是指“同時(shí)掌握前端、后端以及其他網(wǎng)站開(kāi)發(fā)相關(guān)技能的開(kāi)發(fā)者”。

一個(gè)“全棧開(kāi)發(fā)者”可能會(huì)使用以下技能點(diǎn)：

前端：JavaScript、H5、CSS3、sass、less、React、Vue、webpack、jest。

后端：Nodejs/Deno、Go、Java、Spring、Gin、Kafka、Hadoop。

數(shù)據(jù)庫(kù)：MySQL、mongoDB、redis、clickhouse。

運(yùn)維：網(wǎng)絡(luò)協(xié)議、CDN、Nginx、ZooKeeper、Docker、Kubernetes。

值得注意的是，一個(gè)優(yōu)秀的工程師并不是以“棧”數(shù)取勝，而取決于你解決了什么層次的問(wèn)題。

?

“全棧”或者“專家”僅僅是實(shí)現(xiàn)目標(biāo)的過(guò)程狀態(tài)。吳軍在《硅谷來(lái)信》中，將工程師劃分成五個(gè)等級(jí)：從工程師能力模型來(lái)看，第一級(jí)需要集“天時(shí)地利人和”大成，是工程師的最高榮譽(yù)。普通人或許可以將目標(biāo)聚焦在第二、三級(jí)。優(yōu)秀的工程師并不是以“棧”數(shù)取勝，更重要的是擁有產(chǎn)品觀、全局思維、溝通能力、學(xué)習(xí)能力、解決問(wèn)題能力等。來(lái)源：《來(lái)自未來(lái)，2022 年的前端人都在做什么?》^[4]

?

DevOps

DevOps（Development 和 Operations 的組合詞）是一種重視“軟件開(kāi)發(fā)人員（Dev）”和“IT 運(yùn)維技術(shù)人員（OPS）”之間溝通合作的文化、運(yùn)動(dòng)或慣例。透過(guò)自動(dòng)化“軟件交付”和“架構(gòu)變更”的流程，來(lái)使得構(gòu)建、測(cè)試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。在開(kāi)發(fā)、測(cè)試、部署、運(yùn)維等多個(gè)領(lǐng)域進(jìn)行了共建。

與 Kubernetes 相結(jié)合：Kubernetes 是一種開(kāi)源容器編排系統(tǒng)，容器技術(shù)的日益普及是 DevOps 出現(xiàn)的因素之一。使用 Kubernetes DevOps，軟件開(kāi)發(fā)人員和運(yùn)維團(tuán)隊(duì)可以快速實(shí)時(shí)地相互交換大量的應(yīng)用程序，大大提高了生產(chǎn)力。

微前端

微服務(wù)架構(gòu)：微服務(wù)架構(gòu)可以將一個(gè)應(yīng)用分成若干個(gè)更小的服務(wù)，這讓整個(gè)開(kāi)發(fā)過(guò)程具有很高的敏捷性和可拓展性。

常用的微前端框架包括 qiankun、single-spa、micro-app：

?

微前端我覺(jué)得它其實(shí)沒(méi)有太多的趨勢(shì)。首先微前端就不是一個(gè)大家都要用的。微前端沾了微服務(wù)的光，但是微服務(wù)是所有后端基本上都要往架構(gòu)上遷， 微前端很明顯不是這樣的。它更多的是單頁(yè)應(yīng)用并有多框架隔離的需求，然后做出微前端這樣一個(gè)技術(shù)方案。我覺(jué)得說(shuō)實(shí)話，微前端就不該這么熱，包括很多學(xué)生都會(huì)問(wèn)我微前端，我反問(wèn)你有沒(méi)有看過(guò)微前端解決什么樣的問(wèn)題？如果非要往這上邊靠的話，就相當(dāng)于沒(méi)有困難創(chuàng)造困難也要上，舉個(gè)例子，公司一共有四五個(gè)前端，就非要用微前端架構(gòu)，四五個(gè)人都可以用不同框架，這其實(shí)是沒(méi)必要的。- 程劭非（winter）

?

我比較贊同老師說(shuō)的，我認(rèn)為一切技術(shù)都為于解決某個(gè)問(wèn)題，關(guān)鍵在于我們有沒(méi)有找準(zhǔn)那個(gè)關(guān)鍵的問(wèn)題，是否在解決這個(gè)問(wèn)題。

小程序

根據(jù)winter老師的看法，小程序只是一個(gè)前端的技術(shù)實(shí)現(xiàn)方案，并無(wú)大的難點(diǎn)和技術(shù)創(chuàng)新，更重要的是看商業(yè)模式上的考量。 上圖截選自：阿拉丁《2021 年度小程序互聯(lián)網(wǎng)發(fā)展白皮書》

解決小程序的跨平臺(tái)開(kāi)發(fā)問(wèn)題可以采用框架轉(zhuǎn)換：uni-app（Vue）、taro（React）。

5G時(shí)代

5G 時(shí)代到來(lái)，5G將與超高清視頻、VR、AR、消費(fèi)級(jí)云計(jì)算、智能家居、智慧城市、車聯(lián)網(wǎng)、物聯(lián)網(wǎng)、智能制造等產(chǎn)生深度融合，這些都將為前端技術(shù)的發(fā)展帶來(lái)新的增長(zhǎng)和機(jī)遇。WebGL、WebGPU等技術(shù)也將迎來(lái)一波發(fā)展的機(jī)會(huì)。

• Web 3D

  3D 類的 H5 小游戲、在線看房、電子商務(wù)、在線教育等，對(duì)于技術(shù)而言這無(wú)疑是一片沃土。隨著 5G 技術(shù)發(fā)展，視頻加載速度會(huì)非常快，簡(jiǎn)單的實(shí)時(shí)渲染會(huì)被視頻直接替代。復(fù)雜的可以通過(guò)服務(wù)器渲染，將畫面?zhèn)骰鼐W(wǎng)頁(yè)中，只要傳輸夠快，手機(jī)的性能就不再是問(wèn)題。

  相關(guān)的一些庫(kù)：

  Three.js、Oasis Engine、Babylon.js、PlayCanvas.js

• WebRTC (Web Real-Time Communications)

  傳統(tǒng)的技術(shù)包括：XMLHttpRequest，WebSocket，未來(lái)：WebRTC 會(huì)在點(diǎn)對(duì)點(diǎn)私密傳輸、娛樂(lè)領(lǐng)域，元宇宙領(lǐng)域，低延遲領(lǐng)域大放異彩。

4. 底層演進(jìn)

前端歷年大事件

2021 JavaScript大事件 ↓

「JavaScript」

8.24：TypeScript 新官網(wǎng)上線

12.4：JavaScript 26 歲了

「Node.js」

2.2：npm 7.0 正式可用

3.29：Deno 公司成立

4.21：Node.js 16 發(fā)布

7.20：Node-RED 2.0 發(fā)布，低代碼編程工具

9.20：Node.js 發(fā)布 Corepack，用于管理npm、yarn、pnpm、cnpm

10.19：Node.js 17 發(fā)布

「Vue」

8.3：Vue.js 被選作維基百科的前端框架

8.5：Vue 3.2 發(fā)布

11.24：Pinia 正式成為 vuejs 的一員

「React」

5.28：React 18 alpha 發(fā)布

10.5：React 全新文檔發(fā)布

11.27：Next.js 12 發(fā)布

12.14：Create React App 5.0 發(fā)布

「打包工具」

2021.1.6 Snowpack 3.0 發(fā)布

2021.2.17 Vite 2.0 發(fā)布

2021.10.13 Parcel v2 發(fā)布

「其他」

2021.3.6 jQuery 3.6.0 發(fā)布

2021.3.17 Chrome V8 9.0 發(fā)布

2021.10.7 jQuery Mobile 棄用

2021.11.4 Angular v13 發(fā)布

瀏覽器

Chrome 一家獨(dú)大，IE 瀏覽器將于 2022 年 6 月 15 日正式停用。

HTML6.0

支持原生模式、沒(méi)有 JavaScript 的單頁(yè)應(yīng)用程序、自由調(diào)整圖像大小、專用庫(kù)、微格式、自定義菜單、增強(qiáng)身份驗(yàn)證、集成攝像頭。

WebAssembly

WebAssembly 簡(jiǎn)稱 Wasm，是一種可在 Web 中運(yùn)行的全新語(yǔ)言格式，同時(shí)兼具體積小、性能高、可移植性強(qiáng)等特點(diǎn)，在底層上類似 Web 中的 JavaScript，同時(shí)也是 W3C 承認(rèn)的 Web 中的第 4 門語(yǔ)言。

在前端的游戲、音樂(lè)、視頻等領(lǐng)域大放異彩，目前很多桌面軟件也紛紛通過(guò)編譯成 Wasm 的形式搬進(jìn)了瀏覽器中。

2022 年 Wasm 功能將會(huì)不斷完善，同時(shí)也會(huì)有越來(lái)越多的傳統(tǒng) PC 軟件推出 Web 版本。

_來(lái)源：ELab團(tuán)隊(duì) ↑_^[5]

開(kāi)源

首次被列入十四五規(guī)劃，2021年，中國(guó)企業(yè)積極構(gòu)建開(kāi)源平臺(tái)。根據(jù)GitHub統(tǒng)計(jì)，中國(guó)開(kāi)發(fā)者已成為全球最大規(guī)模的開(kāi)發(fā)者群體。

元宇宙

游戲、VR/AR、區(qū)塊鏈數(shù)字資產(chǎn)等等概念的整合。

web 3.0

web1.0: 單向信息，只讀；web 2.0的標(biāo)志：User Generated Content（用戶生成內(nèi)容，例如微博、Facebook）；web3.0: 人和網(wǎng)絡(luò)以及網(wǎng)絡(luò)與人的溝通。

5. 總結(jié)

在工業(yè)4.0的大背景下，隨著人工智能、云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)、區(qū)塊鏈等互聯(lián)網(wǎng)潮流技術(shù)的不斷推進(jìn)，互聯(lián)網(wǎng)行業(yè)走向工業(yè)化和智能化。全球疫情的常態(tài)化，越來(lái)越多的公司選擇或者不得不居家辦公（WFH），必然給前端行業(yè)帶來(lái)更多的機(jī)會(huì)。

2023 年底全球軟件開(kāi)發(fā)人員達(dá)到 2770萬(wàn)，中國(guó)將占6％至8％，前端預(yù)計(jì)30萬(wàn)左右，而JavaScript 在全球目前約有 1400 萬(wàn)開(kāi)發(fā)者。

2005左右才出現(xiàn)前端的崗位，變化非常快，目前還是處在發(fā)展期（好事兒），只有把握底層變化，不斷思辨和學(xué)習(xí)，才能把焦慮控制在一定范圍內(nèi)。

?

另外說(shuō)到“卷”，還是上進(jìn)心導(dǎo)致的，對(duì)吧？真想躺的話，能躺的辦法還是挺多的。如果想要進(jìn)前端的領(lǐng)域，從學(xué)習(xí)的角度來(lái)講，我推薦 hard way。也就是說(shuō)，我們看起來(lái)最難的那條路反而是最簡(jiǎn)單的，那些看起來(lái)簡(jiǎn)單的路，它有可能反而是更繞。你想往山頂上走，肯定選擇最陡峭的，你想走下坡路，肯定選擇最遠(yuǎn)的那條路。這個(gè)道理是是我想今天傳達(dá)給大家的，原因還是在于看到太多的同學(xué)們想走捷徑，或者說(shuō)想走簡(jiǎn)單的路，結(jié)果反而越走越遠(yuǎn)，最后繞回來(lái)的話反而消耗更大。- 程劭非（winter）

?

最后，小廠前端團(tuán)隊(duì)押寶什么? 押技術(shù)落地，押Vue3.0、TS、Three.js，押年輕人！