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

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

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

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

隨著 jQuery.js 漸漸淡出人們的視野，前端開發(fā)框架成為了開發(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的實現(xiàn)：在開發(fā)環(huán)境編譯時，使用 Server 動態(tài)編譯 + 瀏覽器的 ESM，基本上實現(xiàn)了“開發(fā)環(huán)境 0 編譯”的功能。而生產(chǎn)環(huán)境編譯時，則會調(diào)用其他編譯工具來完成（如 Vite 使用 Rollup）。

語法規(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 測試

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

shell

• zx

以下是stateOfJs對2016-2021各個框架的趨勢統(tǒng)計：

2. 語言

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

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

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

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

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

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

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

3. 行業(yè)趨勢

3.1 前端智能化

• 低代碼（LowCode）

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

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

  Creatio、Kintone、Newgen 和 Quickbase 被評為利基（niche）市場參與者。

  今年沒有廠商被評為遠見者。

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

• 代碼自動生成

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

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

3.2 大前端（泛前端）

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

Serverless

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

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

全棧

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

一個“全棧開發(fā)者”可能會使用以下技能點：

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

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

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

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

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

?

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

?

DevOps

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

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

微前端

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

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

?

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

?

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

小程序

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

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

5G時代

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

• Web 3D

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

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

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

• WebRTC (Web Real-Time Communications)

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

4. 底層演進

前端歷年大事件

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 一家獨大，IE 瀏覽器將于 2022 年 6 月 15 日正式停用。

HTML6.0

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

WebAssembly

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

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

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

_來源：ELab團隊 ↑_^[5]

開源

首次被列入十四五規(guī)劃，2021年，中國企業(yè)積極構(gòu)建開源平臺。根據(jù)GitHub統(tǒng)計，中國開發(fā)者已成為全球最大規(guī)模的開發(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的大背景下，隨著人工智能、云計算、大數(shù)據(jù)、物聯(lián)網(wǎng)、區(qū)塊鏈等互聯(lián)網(wǎng)潮流技術(shù)的不斷推進，互聯(lián)網(wǎng)行業(yè)走向工業(yè)化和智能化。全球疫情的常態(tài)化，越來越多的公司選擇或者不得不居家辦公（WFH），必然給前端行業(yè)帶來更多的機會。

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

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

?

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

?

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