2022 前端技術(shù)領(lǐng)域會(huì)有哪些新的變化？

?

哈嘍，我是樹(shù)醬。今天文章來(lái)源：作者Hugo對(duì)前端技術(shù)領(lǐng)域在2022年的一些感想

?

Monorepo

• Monorepo 成標(biāo)配，pnpm 會(huì)有更廣泛的應(yīng)用 ?Why should we use pnpm?

• webstorm、vscode 對(duì) monorepo 更好的支持?，F(xiàn)在的混合技術(shù)棧多少支持有一些問(wèn)題。

• 
  
• 例如在 webstorm 里，一個(gè)目錄的 linter，使用 eslint 還是用 deno 的lint，還是其他的 lint，是比較難配置的。
• 
  
• 例如在 webstorm 里，一個(gè)目錄的 ts 語(yǔ)言服務(wù)，是用 tsc 還是 deno。
• 
  
• 簡(jiǎn)單說(shuō)以 monorepo 的一個(gè)子目錄去選擇對(duì)應(yīng)的環(huán)境配置，是一個(gè)需求。

TypeScript

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

Deno

• Deno 開(kāi)始在 cli 腳本和serverless 方面展露頭腳。

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

• 
  
• Deno 的依賴(lài)是不會(huì)污染 Npm 的，因?yàn)楸旧砗?NPM 正交。隨著項(xiàng)目的復(fù)雜，沒(méi)人希望污染主項(xiàng)目。
• 
  
• 實(shí)際上，Deno 非常適合把開(kāi)發(fā)依賴(lài)都控制起來(lái)。
• 
  
• Deno 非常適合制作 cli，且用 cli 來(lái)抹平 NPM 和 Deno 世界的最后一公里。
• 
  
• 雖然目前 Deno 的 swc 有各種問(wèn)題，使用 bundle+compile 目前還有很多問(wèn)題。

Node.js

Node.js 的 TypeScript 世界開(kāi)始 ESM 化，這個(gè)要看 4.6

ESBuild

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

JavaScript 裝飾器

• JavaScript 的裝飾器可能快來(lái)了?？赡苁亲钐厥獾囊粋€(gè) JavaScript 的語(yǔ)法特性。這個(gè)對(duì)一堆現(xiàn)有的 TypeScript 裝飾器框架都是潛在利空。實(shí)際上，現(xiàn)有的 TypeScript 裝飾器框架都和 esbuild 或多或少有沖突。而 esbuild 帶來(lái)的諸多好處，對(duì)于新項(xiàng)目是否上 TypeScript 臨時(shí)的裝飾器，還是等 JavaScript 的裝飾器，提出了一個(gè)至少是需要想一想的問(wèn)題。這個(gè)對(duì)于 TypeScript 世界的一部分，有可能是核彈級(jí)的。有興趣的同學(xué)可以去翻翻 esbuild 的 issue，看看為啥 evan 不支持 TypeScript 的 emitDecoratorMetadata。下面的鏈接是目前的進(jìn)展。

JavaScript 基建

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

• 前端語(yǔ)言的集中化：Rust->Go->TypeScript->JavaScript，這四門(mén)語(yǔ)言大概能組成整個(gè) JS 和 TS 世界的 99%？

JavaScript 模塊化 ESM

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

• 個(gè)人認(rèn)為，這個(gè)最終方案大概率是：

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

CSS

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

Vue

• Vue 3 進(jìn)一步流行。期望 TS 官方能像對(duì)待 React 一樣對(duì)待 Vue 3。

Vuex 5

• 大家都在談?wù)摚俏覜](méi)找見(jiàn) Repo

Vite

• Vite 有望成為最好和最快的前端開(kāi)發(fā)環(huán)境。個(gè)人認(rèn)為，Vite 其實(shí)應(yīng)該集成一些 Deno 的支持。Vite 和 Deno 在一起能做點(diǎn)什么？目前沒(méi)想到。

Nuxt

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

JS & TS 應(yīng)用工具型 APP

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

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

TypeScript 函數(shù)式編程

• 一些開(kāi)源項(xiàng)目

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

ORM

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

瀏覽器離線(xiàn)存儲(chǔ)解決方案

• 所有的前端離線(xiàn)狀態(tài)存儲(chǔ)，響應(yīng)式是標(biāo)配

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

Json-schema 進(jìn)一步應(yīng)用

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

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

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

• 國(guó)內(nèi)的 github 項(xiàng)目大部分屬于整合型業(yè)務(wù)項(xiàng)目，業(yè)務(wù)框架以及學(xué)習(xí)資料的項(xiàng)目。

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

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

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

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

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

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

• 我使用了他開(kāi)發(fā)的一些 vite 的組件，以及學(xué)習(xí)了一些他寫(xiě)的文檔。

最后

其實(shí)這些變化，單看每個(gè)都不復(fù)雜，基本上：

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

?

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

?

你準(zhǔn)備好了么？