“天下大勢，浩浩湯湯，順之者昌，逆之者亡?！?br>

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

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

1. 基礎框架/工程化

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

mv* 框架

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

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

打包工具

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

• ESM相關：Snowpack, Vite；

  ESM的實現：在開發(fā)環(huán)境編譯時，使用 Server 動態(tài)編譯 + 瀏覽器的 ESM，基本上實現了“開發(fā)環(huán)境 0 編譯”的功能。而生產環(huán)境編譯時，則會調用其他編譯工具來完成（如 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服務，與程序一起運行）
• puppeteer（無頭瀏覽器）

shell

• zx

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

2. 語言

_數據來源 ↑_^[1]

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

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

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

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

前端的同學如果有想學習其他語言的，有如下推薦：

• Rust 是 JS 基礎設施的未來 - Lee Robinson
• 全棧 —— Go
• AI —— Python
• Flutter —— Dart

3. 行業(yè)趨勢

3.1 前端智能化

• 低代碼（LowCode）

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

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

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

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

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

• 代碼自動生成

  Sketch2Code，AI 將手繪稿子 轉換為 html 代碼。

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

3.2 大前端（泛前端）

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

Serverless

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

在 Serverless 的賦能之下，前端工程師能夠將頁面交互、業(yè)務邏輯、數據處理等全部掌控在自己的手中，實現了真正全棧的可能。

全棧

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

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

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

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

數據庫：MySQL、mongoDB、redis、clickhouse。

運維：網絡協議、CDN、Nginx、ZooKeeper、Docker、Kubernetes。

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

?

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

?

DevOps

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

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

微前端

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

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

?

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

?

我比較贊同老師說的，我認為一切技術都為于解決某個問題，關鍵在于我們有沒有找準那個關鍵的問題，是否在解決這個問題。

小程序

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

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

5G時代

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

• Web 3D

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

  相關的一些庫：

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

• WebRTC (Web Real-Time Communications)

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

4. 底層演進

前端歷年大事件

2021 JavaScript大事件 ↓

「JavaScript」

8.24：TypeScript 新官網上線

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 的單頁應用程序、自由調整圖像大小、專用庫、微格式、自定義菜單、增強身份驗證、集成攝像頭。

WebAssembly

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

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

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

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

開源

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

元宇宙

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

web 3.0

web1.0: 單向信息，只讀；web 2.0的標志：User Generated Content（用戶生成內容，例如微博、Facebook）；web3.0: 人和網絡以及網絡與人的溝通。

5. 總結

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

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

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

?

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

?

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