Modern Web 學習筆記一 [Website FrontEnd技術2022]

身為半個網頁攻城師的Ray仔發現自己現時還是與各位大神差太遠了，所以是時候總結一下我們係前端上要學習的資料(大部份資料轉由各路大神最後會有source)。以下是我研究整理的2022年前端養成筆記，從做project第一日起，定下全新的2022計劃和目標。

1. 前端按縱向層次：

基礎層

毋庸置疑，今年最大的亮點無疑在於多語言的廣泛映入前端視野，下面我將分別陳述下我個人的一些觀點和看法：

#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結構呈現，包括統一的小程序底層引擎等；

多操作系統的適用，如：鴻蒙操作系統的適配。

#總結如下：工程化引領為主，可視化提供人性化展示，智能化提供模型化能力，中後台+跨端提供面向不同用戶的開發方案。各細分領域從各自縱深，又相互交織在一起，迸發出各種有可能的發展，分久必合，合久必分。

2. 2022 技術要點：

• REST API

  rest是一套規範，restfull是這套規範的具體實現。就像beauty和beautiful的區別。

  使用了rest的接口規範是必須要用那7個表示狀態轉義的操作：get|post|put|delete|patch|head|options等

  傳統的接口設計可能是這樣的：www.imqd.cn/getUser.php?id=1;

  這裡是get或post可能從url中就可以看出來，但是如果是用REST來設計，就會這樣了：www.imqd.cn/user

  然後所有的對user的增刪改查都是通過get|post等來體現而不是url來體現，也就是url沒有動詞，只有名詞 可以在瀏覽器控制台的網絡面板中的狀態就可以知道是哪種操作了 注意：restfull的實現一般是後端來，比如用springMVC框架他們開發好了後寫好API文檔給前端使用。

  簡單來說，之前的API接口的url命名都是混亂的，不知道是什麼請求。 如果加上一些規範，比如下面這種：

  get url 
  post url

• Typescript（TS）

  越來越注重使用者介面，需要能力更強，開發更方便的 framework，因此出現了各種的 JavaScript framework。

  • 網頁端（Web）像是這兩年很夯的 AngularJS、React.js、Vue.js、D3.js...等等。

  • 伺服器端（Server Side）與網路相關應用，也可以使用 JavaScript 來寫，最經點的例子就是 Node.js，而且可以搭配其他 Framework 做到 JavaScript Universal，像是 Universal React 和 Angular Universal。

  • 行動裝置端（大陸稱為移動端），當然也可以使用 JavaScript 來寫 Application，像是 React Native、Cordova、Ionic...等等。

  也因為能使用的平台實在太多了，所以更有「得 JavaScript得天下 」的說法。

  開發應用有大有小，而在開發大型應用的時候，要怎麼「不寫重複的 code」與「方便 debug」是很重要的！

  因此，TypeScript 應運而生！

• ElementUI & Ant-design

  偏向國內平台常用的技術表單，加快構建平台

• jwt（JSON Web Token）

  解決註冊登錄授權問題，一種認證機制，讓後台知道請求是來自於受信的客戶端

• Serverless

  無服務器架構

websocket
使用electron框架来开发一款桌面版软件
.
.
.

3. Vite 成長最快的構建框架

開箱即用的開發服務器 + 打包工具的組合