本文參與了 SegmentFault 思否徵文「2021 總結」，歡迎正在閱讀的你也加入。
前言
又到了年底，回顧一下整個2021年的前端歷程，總體來說前端趨向到了一個比較穩定的發展階段，雖然仍然有許多層出不窮的庫及輪子，但整體來看其實今年最突出的前端發展其實可以概括為以下幾個關鍵詞，即：工程基建、低程式碼、多語言、雲+邊+端。從不同大廠對整個前端的劃分視角來看，整體可以分為兩大類，一類是聚焦化，比如區分各個方向，每個方向做到極致；另一類是統籌化，將整個上下游鏈路打通，擴充套件前端的邊界。私以為，這兩種劃分孰優孰劣很難斷定，從巨集觀到微觀，再從微觀到巨集觀，只是思考的方式不同，這裡我將從縱向和橫向兩個方向，換幾個不同的視角來談談我對今年整體的前端發展態勢以及2022年可能會出現的一些趨勢與機遇，以期能給大家提供一些不同的觀察和思考角度。
縱向
如果把現在前端按縱向層次進行劃分，私以為大體可以分為“基礎層、平臺層、業務層”這三個層次，下面將從這三個層次的不同維度進行一些思考和探索
基礎層
毋庸置疑，今年最大的亮點無疑在於多語言的廣泛映入前端視野，下面我將分別陳述下我個人的一些觀點和看法：
Node.js
- Node.js在車聯網等邊緣側領域的應用，Node.js作為前端最為熟悉的語言，在車聯網等IoT領域更便於基於已有的傳統硬體廠商的C++庫的上層實現；
- Node.js更加貼近前端側，不單獨作為BFF來處理，而轉型FFB，更加符合Node.js初始的作用，作為純後端使用，不論是語言本身的限制還是Node.js的執行時表現，都很難與傳統後端語言有更大的競爭空間，Node.js作為前端側的一個基礎層反而更加適合。
Rust
- rust的核心競爭力在於記憶體安全，私以為其在邊緣側配合wasm其實有很大的市場，在前端側做基建個人認為很難體現出其核心價值，而在邊緣側其配合wasm或許真的可以撼動Docker的地位；
- rust作為前端的基建可能有一定的市場，但不足以作為其核心競爭的現實存量，其和go作為前端基建工具孰優孰劣，現在還不明晰，但是在邊緣側我認為其市場是巨大的，可以作為有意向在邊緣側發展的同學作為深入研究的領域。
Deno
- 配合雲端可能有一定的突破點，其網路模組設計相對優秀，有可能會搶奪一部分node.js的空間；
- 不看好整體發展，私以為沒有一個核心取代node.js的理由或者衝動，但仍不失為一個優秀的方案，對網路模組的處理具有一定的借鑑意義。
Wasm
- 核心在於與Rust的配合構建邊緣側的基礎設施，開啟邊緣側市場，長期看好；
- 作為各種其他語言的”膠水“，配合js等在瀏覽器及其他執行時，如：Node.js等(ps:還是要考慮下Deno的感受)，也是有一定的發展想象空間，但個人更看好其在邊緣側的發展。
Go
- 核心在於goroutine，個人認為作為前端基建側，與rust難分高下，但go相對學習起來容易一些；
- 雲側go作為不二首選，必定是go，其生態很完善，想在雲端領域深挖的同學建議一定要學go。
C++
- 前端的老相識，作為v8及chromium初始開發語言，cpp一直都是各大高階語言的基礎老大哥，發展穩定，私以為rust很難撼動其地位，但是二者並存其實並不無可能；
- 傳統老牌硬體廠商，將cpp暴露出給前端側使用，如：v8或者其他引擎，可以大大擴充開發市場，畢竟js相對cpp還是容易。
綜上，總結如下：在端側，Nodejs為主，Deno適當考慮，cpp配合優化；在邊緣側，rust+wasm前景廣闊；在雲側，go不二首選。多語言發展作為前端發展的擴充套件應該確實是未來發展的基調，尤其是在工程化領域，其市場還是有非常廣闊的前景的。
平臺層
在平臺層，依託於基礎層的一些基礎承載，前端大體呈現出以下幾個平臺化的角度，即：Serverless、構建、場景以及框架，下面我將分別闡述下個人的一些理解：
Serverless
- Serverless目前暫時沒有一個明確的定義，但以實踐案例來看，整體可以用 “Baas + Faas” 來定義，在Baas層計算與儲存分離，在Faas層提供”雲+端“的Web Function；
- 基於Rust+Wasm的沙箱化輕量vm，microvm應用於Serverless的沙箱隔離；
- 多形態配合，基於服務的編排而不是基於資源的擴充套件，全棧可觀測、服務可治理、流量可管理。
構建
- 多構建工具叢生，webpack仍為應用打包主流，rollup多用於庫，gulp更適合node側構建；
- 多語言侵入前端構建領域，如：esbuild、vite、swc等。在構建側，語言級別的碾壓不可逆轉，會成為平臺層的主流構建方案，畢竟打包工具不是每個業務開發都需要能從零手寫，因而一個高效能的打包方案一定會有巨大的前端開發市場，剩下的就是本身的語言天賦與編寫者互相協作創造無限可能。
場景
- 不同業務場景選擇不同的渲染方案，SSG、ISR、CSR、SSR、ESR、SPR等；
- 所有場景的選擇本質都是render側重的取捨而已，軟體工程中沒有銀彈，選擇適合本業務場景的渲染方案才是上善之策。
框架
- Meta Framework，框架的框架，不同的端有不同的框架，前端有前端的框架，服務端有服務端的框架；
- 框架演化：純前端+純後端，即：前端側Vue、React、Angular等，後端側Express、Koa等；業務前端+業務後端，即：業務前端Umi、Ice等，業務後端Midway、Egg、Nest等；前端的後端或者後端的前端，如：Next、Nuxt、Remix等。
綜上，總結如下：Serverless釋放大前端能力，多語言構建，多場景選擇，基於框架的框架。從這裡看，基本上從面向服務開發，轉變為面向能力開發，端工程師轉變為應用工程師。
業務層
在業務層，去年大概闡述了一下基本的前端技術深化方向，今年著重談一下幾個方向的交叉領域的一些亮點和感受：
視覺化 + 工程化
上圖所示位置1
- 低程式碼，特別是邏輯編排等，在LCDP中，資料邏輯編排或決策編排的視覺化呈現；
- 狀態視覺化、邏輯視覺化等，所有工程領域中的視覺化呈現，從偏向機器到偏向人的所有鏈路都可以將工程化進行視覺化展示。
視覺化 + 智慧化
上圖所示位置2
- 海量資料的佈局展示，結合ai推理構建可檢視；
- 鏈路診斷路徑及圖模式匹配；
- D2C領域深化，基於開發者思維習慣的模型優化。
工程化 + 中後臺
上圖所示位置3
- 工程鏈路閉環，開發 => 測試 => 構建 => 部署 => 監控；
- 各階段向聚焦，輸出可工程量化的產物，提供中後臺等工程化模板方案，如：開發階段包括：腳手架、公共庫、包管理器、編輯器、構建工具、除錯套件等；測試階段包括：單元測試框架、靜態掃描工具、自動化測試工具、效能測試工具等；構建階段包括：打包指令碼、構建服務等；部署階段包括：釋出平臺、迭代管理平臺等；監控階段包括：埋點平臺、監控平臺等。
中後臺 + 跨端
上圖所示位置4
- 多端框架呈現，多以類Flutter結構呈現，包括統一的小程式底層引擎等；
- 多作業系統的適用，如：鴻蒙作業系統的適配。
綜上，總結如下：工程化引領為主，視覺化提供人性化展示，智慧化提供模型化能力，中後臺+跨端提供面向不同使用者的開發方案。各細分領域從各自縱深，又相互交織在一起，迸發出各種有可能的發展，分久必合，合久必分。
橫向
從橫向角度，我想從面向使用者和麵向開發這兩個維度來談一下作為前端工程師從技術出發所可能涉及的一些業務或者產品形式上的擴充，越偏向UX側則越偏向使用者側，也就更加偏向業務；越偏向DX側則越偏向開發側，也就更加偏向技術。
下面我將以前端技術為錨點向產品側擴充，談一談我對一些領域的看法和思考：
Product
矩陣左上角
文件
- 協同編輯，B端或者單純的文件編輯都會有；
- 海量資料處理，如金融類表格計算等。
設計工具
- 設計圖轉程式碼；
- 設計工具外掛，如：sketch、photoshop外掛等；
- 協同修改、切圖等。
元件庫
- 通用型元件庫，主題、Design Token等；
- 業務型元件庫，業務領域邊界確定；
- 設計語言+互動語言，物料市場。
Star
矩陣右上角
低程式碼
- 通用能力引擎：UI視覺化開發、邏輯視覺化開發、程式碼語言、生產執行、質量保證；
- 面向受眾，偏向開發、偏向使用者；
Tech
矩陣右下角
IDE
- 雲端一體構建，雲ide及端ide；
- 釋出、構建功能確立，ide周邊及體系建設。
devops
- ci鏈路，包括需求關聯、觸發機制、通知、指令碼、故事板等；
- cd鏈路，包括排程、監測、製品庫、釋出機制等。
工具鏈
- 框架執行時，編寫框架外掛等；
- 腳手架構建，包括構建工具選擇等；
- 編譯除錯工具，包括自定義除錯工具包等；
Material
矩陣左下角
監控體系
- 日誌監控，包括日誌分析、過濾等；
- 追蹤鏈路，包括鏈路分析等；
- 度量監測，包括質量分析、健康狀況等。
總結
不要止步於瀏覽器，不要止步於js，有 web runtime 的地方就屬於前端領域
回望2021，展望2022，總結如下：
三時代未曾可至，元宇宙尚需觀望；
雲邊端未來已來，端工程應用將成；
大前端擴充無邊，執行時所至皆為；
瀏覽器不可束約，多語言大勢而行。
好了，2022年到了，祝大家在這個寒冬裡依然能夠堅挺，”道阻且長，行則將至；行而不輟，未來可期”，共勉！