2022 前端技術領域會有哪些新的變化？

?

哈嘍，我是樹醬。今天文章來源：作者Hugo對前端技術領域在2022年的一些感想

?

Monorepo

• Monorepo 成標配，pnpm 會有更廣泛的應用 ?Why should we use pnpm?

• webstorm、vscode 對 monorepo 更好的支持。現(xiàn)在的混合技術棧多少支持有一些問題。

• 
  
• 例如在 webstorm 里，一個目錄的 linter，使用 eslint 還是用 deno 的lint，還是其他的 lint，是比較難配置的。
• 
  
• 例如在 webstorm 里，一個目錄的 ts 語言服務，是用 tsc 還是 deno。
• 
  
• 簡單說以 monorepo 的一個子目錄去選擇對應的環(huán)境配置，是一個需求。

TypeScript

• 越來越多的項目選擇 TypeScript。
• TypeScript 幫助 JavaScript 世界的整體編程能力往前走了一大步，怎么感謝 Anders Hejlsberg 都不過分。他已經(jīng)六十多了，還在寫代碼。

Deno

• Deno 開始在 cli 腳本和serverless 方面展露頭腳。

• Deno 在傳統(tǒng)生產(chǎn)項目上和 Node 仍然不會有太大的沖突。但是 Deno 在用 TS 寫腳本方面，對比 Node.js 是有優(yōu)勢的。這一點優(yōu)勢應該最大化利用。

• 
  
• Deno 的依賴是不會污染 Npm 的，因為本身和 NPM 正交。隨著項目的復雜，沒人希望污染主項目。
• 
  
• 實際上，Deno 非常適合把開發(fā)依賴都控制起來。
• 
  
• Deno 非常適合制作 cli，且用 cli 來抹平 NPM 和 Deno 世界的最后一公里。
• 
  
• 雖然目前 Deno 的 swc 有各種問題，使用 bundle+compile 目前還有很多問題。

Node.js

Node.js 的 TypeScript 世界開始 ESM 化，這個要看 4.6

ESBuild

• esbuild 慢慢生產(chǎn)可用。太快了，這一點對很多項目吸引太大了，下面的那個鏈接里介紹，一個 30 min 的 webpack 用 esbuild 可以分鐘級運行。而且 figma 的 cto（也就是 esbuild 的作者，國內(nèi)還有 cto 寫代碼么？）頭腦非常清醒，esbuild 整個做的技術選擇，以及目前該項目的影響力，對于前端世界的影響有可能持續(xù)加大。

JavaScript 裝飾器

• JavaScript 的裝飾器可能快來了。可能是最特殊的一個 JavaScript 的語法特性。這個對一堆現(xiàn)有的 TypeScript 裝飾器框架都是潛在利空。實際上，現(xiàn)有的 TypeScript 裝飾器框架都和 esbuild 或多或少有沖突。而 esbuild 帶來的諸多好處，對于新項目是否上 TypeScript 臨時的裝飾器，還是等 JavaScript 的裝飾器，提出了一個至少是需要想一想的問題。這個對于 TypeScript 世界的一部分，有可能是核彈級的。有興趣的同學可以去翻翻 esbuild 的 issue，看看為啥 evan 不支持 TypeScript 的 emitDecoratorMetadata。下面的鏈接是目前的進展。

JavaScript 基建

• JS 和 TS 的核心基建 Rust 化，相應的基建可以開始投入生產(chǎn)了。例如 swc、rome、deno。等等。對這塊感興趣的同學可以去看看 deno 的 build 的 issue。我只能說，swc 還有很長的路要走。esbuild 和 swc 的結(jié)果，會極大影響 go 和 rust 在 JS & TS 世界的關系。

• 前端語言的集中化：Rust->Go->TypeScript->JavaScript，這四門語言大概能組成整個 JS 和 TS 世界的 99%？

JavaScript 模塊化 ESM

• ESM 繼續(xù)推進。這一點對于微前端解決方案是極大利好。會有新的微前端解決方案出現(xiàn)，會比 Modern.js 輕很多。會出現(xiàn)類似 Modern.js 的 cli 編譯打包方案。其實建議 Modern.js 把這一塊提出來單獨弄一個項目，這一塊在個人看來是 Modern.js 最 Modern 的地方。

• 個人認為，這個最終方案大概率是：

• 
  
• 對 pnpm 親和
• 
  
• 對 TypeScript 的 Type 親和
• 
  
• 只支持 ESM
• 
  
• 基于 esbuild（也就代表著，幾乎不用 TypeScript 自帶的語法特性）
• 
  
• 有類似 fastify 或者 rollup 的插件系統(tǒng)
• 
  
• 主框架可能是 go 編寫的
• 
  
• 能提供處理依賴 DAG 方面的工具
• 
  
• 提供 cli

CSS

• TailwindCSS 進一步得到應用和流行。年底發(fā)布 3.0, TailwindCSS 的作者很有想法。

Vue

• Vue 3 進一步流行。期望 TS 官方能像對待 React 一樣對待 Vue 3。

Vuex 5

• 大家都在談論，但是我沒找見 Repo

Vite

• Vite 有望成為最好和最快的前端開發(fā)環(huán)境。個人認為，Vite 其實應該集成一些 Deno 的支持。Vite 和 Deno 在一起能做點什么？目前沒想到。

Nuxt

• Nuxt 3.0 正式版發(fā)布。Nuxt 3.0 對于 Vue 的 SSR 世界，應該是質(zhì)的改變的一個版本，這個版本對于 Nuxt 團隊也是非常挑戰(zhàn)的，他們用 TS 完全重寫了 Nuxt

JS & TS 應用工具型 APP

• 工具創(chuàng)業(yè)進一步惡化，各種工具的開源版本雨后春筍般出現(xiàn)。本質(zhì)是工具抽象的普遍普及化，也是前端世界上一階段的積累開花結(jié)果的情況。有意思的是，據(jù)我從 github 的 trending 上來看，這些項目，大部分還都是國人所做，質(zhì)量很高，但是同質(zhì)化很嚴重。

• 技術三大循環(huán)，首先做出來的閉源賺錢->同質(zhì)化嚴重開源賺錢->在多就變成培訓班的講義了。這一速度的周期，目前看，一個階段到另一個階段大約是 2-3 年左右。好消息是，我們學最佳實踐越來越快，壞消息是這一速度在進一步壓縮。

TypeScript 函數(shù)式編程

• 一些開源項目

• 
  
• fp-ts：https://github.com/gcanti/fp-ts
• 
  
• remeda：https://github.com/remeda/remeda

ORM

• prisma 越來越流行
• typeorm 趨于穩(wěn)定（JS 的裝飾器成熟對于 typeorm 可能是利空）

瀏覽器離線存儲解決方案

• 所有的前端離線狀態(tài)存儲，響應式是標配

• 
  
• Dexie: https://github.com/dexie/Dexie.js/releases/tag/v3.2.0
• 
  
• rxdb:https://www.npmjs.com/package/rxdb

Json-schema 進一步應用

• typescript 解決了編譯前的問題。json-shema 解決運行時的問題。
• 已經(jīng)有很多成熟的項目幫助這件事更容易應用
• typebox: https://github.com/sinclairzx81/typebox

Github 前端項目現(xiàn)狀

• 沒事就翻翻 github 的 trending 來看，主要是 JavaScript 和 TypeScript 的項目（沒有數(shù)據(jù)支持，純粹是 Github 推給我的項目和 trending 項目的感受）有以下特點：

• 國內(nèi)的 github 項目大部分屬于整合型業(yè)務項目，業(yè)務框架以及學習資料的項目。

• 國內(nèi)流行的框架，如果 issue 提的很多，中文就特別多，這一點似乎對國外人使用就勸退很厲害。有很多項目能明顯看到，只有國內(nèi)人使用。

• 截止 2021 年底，國內(nèi)在 github 上的 JavaScript 和 TypeScript 的基建項目，數(shù)量相對比較少。

• 題外話，pnpm 的小哥是烏克蘭人，貌似創(chuàng)業(yè)也發(fā)生在烏克蘭（沒確認創(chuàng)業(yè)地點）

• 截止到 2021 年底，我今年受惠最多的我國作者（除了尤大）是egoist

• 我使用了他開發(fā)的 tsup 和 cac，其中 tsup 是一個基于 esbuild 的，針對 TypeScript 的打包器。cac 是一個命令行工具，支持 deno。

• 我使用了他開發(fā)的 eslint-config-alloy

• 我使用了他開發(fā)的一些 vite 的組件，以及學習了一些他寫的文檔。

最后

其實這些變化，單看每個都不復雜，基本上：

• 老的標準慢慢廢棄，選擇新的標準，例如 ESM
• 開始對快有一些追求，例如 esbuild、vite
• 更原子化的抽象，例如 Tailwind CSS
• 更多的類型，更多的約束，例如 TypeScript 的持續(xù)流行
• 潛在的，更多的函數(shù)式。實際上這里面很多項目，去看源代碼基本都是函數(shù)式編程。這一點，其實變成了一種分工分界線，函數(shù)式編程，對于廣大的應用的編程領域來說，還是太難了，但是對于基建和框架范疇，基本都是函數(shù)式編程。在 TypeScript 和 JavaScript 的世界，貌似沒有第二種選擇。當然這一點，本質(zhì)是更抽象和模型與更原子的語義化。（函數(shù)式的一切都是為了 compose，實際上這一點能涵蓋上面那幾點）

?

所有這些變化，都是為了開發(fā)更復雜的應用。

?

你準備好了么？