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

作者：Hugo

鏈接：https://www.zhihu.com/question/493891614/answer/2269197391

  新年快樂，小伙伴們！

Monorepo

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

Why should we use pnpm? www.kochan.io/nodejs/why-should-we-use-pnpm.html

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

• 例如在 webstorm 里，一個(gè)目錄的 linter，使用 eslint 還是用 deno 的lint，還是其他的 lint，是比較難配置的。

• 例如在 webstorm 里，一個(gè)目錄的 ts 語言服務(wù)，是用 tsc 還是 deno。

• 簡單說以 monorepo 的一個(gè)子目錄去選擇對(duì)應(yīng)的環(huán)境配置，是一個(gè)需求。

TypeScript

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

Deno

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

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

• Deno 的依賴是不會(huì)污染 Npm 的，因?yàn)楸旧砗?NPM 正交。隨著項(xiàng)目的復(fù)雜，沒人希望污染主項(xiàng)目。

• 實(shí)際上，Deno 非常適合把開發(fā)依賴都控制起來。

• Deno 非常適合制作 cli，且用 cli 來抹平 NPM 和 Deno 世界的最后一公里。

• 雖然目前 Deno 的 swc 有各種問題，使用 bundle+compile 目前還有很多問題。

cac#with-deno github.com/cacjs/cac#with-deno

• Deno 和 Node.js 世界開始融合。

• 實(shí)際上，現(xiàn)在一大不太好融合的點(diǎn)，反而是 Node.js 的 ESM 問題。理論上 ESM 以后，一份 TypeScript 代碼同時(shí)對(duì) Node.js、deno、browser 變的簡單了。

• 隨著 Deno 1.0 的 API 穩(wěn)定，會(huì)產(chǎn)生一些 Deno 和 Node 的兼容層項(xiàng)目產(chǎn)生。實(shí)際上就是把雙方的 API 做一個(gè)映射。

• 如果有了這個(gè)兼容層，在完全使用 ESM 的情況下，主要的區(qū)別就可以慢慢退化到項(xiàng)目入口的包管理方式

• NPM 是 package.json

• Deno 是 import_map 和手動(dòng)聲明 http_import

• 實(shí)際上，還有一些區(qū)別

• Deno 的 TypeScript 的版本，實(shí)際總比流行版本慢一些，且參數(shù)是主 TypeScript 的參數(shù)的一個(gè)子集，且一些參數(shù)不能更改。

• Deno 試圖把一個(gè)編譯型語言 TypeScript 變成一個(gè)像 JavaScript 一樣的即時(shí)解釋型語言，但是 TypeScript 寫的復(fù)雜了，編譯還是比較慢的。這一塊會(huì)有什么問題，暫時(shí)未知。

Node.js

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

Concerns with TypeScript 4.5's Node 12+ ESM Support #46452 github.com/microsoft/TypeScript/issues/46452

ESBuild

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

Let's Learn esbuild! www.learnwithjason.dev/lets-learn-esbuild

JavaScript 裝飾器

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

Decorators update[2021.7] github.com/tc39/notes/blob/HEAD/meetings/2021-07/july-14.md#decorators-update

JavaScript 基建

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

Hugo：RUST 是 JavaScript 基建的未來165 贊同 · 17 評(píng)論文章

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

JavaScript 模塊化 ESM

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

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

• 對(duì) pnpm 親和

• 對(duì) TypeScript 的 Type 親和

• 只支持 ESM

• 基于 esbuild（也就代表著，幾乎不用 TypeScript 自帶的語法特性）

• 有類似 fastify 或者 rollup 的插件系統(tǒng)

• 主框架可能是 go 編寫的

• 能提供處理依賴 DAG 方面的工具

• 提供 cli

CSS

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

Tailwind CSS v3.0 – Tailwind CSS tailwindcss.com/blog/tailwindcss-v3

Vue

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

Vuex 5

• 大家都在談?wù)摚俏覜]找見 Repo

Vite

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

https://patak.dev/vite/ecosystem.html patak.dev/vite/ecosystem.html

Nuxt

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

https://github.com/nuxt/framework github.com/nuxt/framework

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

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

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

TypeScript 函數(shù)式編程

• 一些有關(guān)的項(xiàng)目

https://github.com/gcanti/fp-ts github.com/gcanti/fp-ts

https://github.com/remeda/remeda github.com/remeda/remeda

ORM

• prisma 越來越流行

prisma www.npmjs.com/package/prisma

• typeorm 趨于穩(wěn)定（JS 的裝飾器成熟對(duì)于 typeorm 可能是利空）

typeorm www.npmjs.com/package/typeorm

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

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

https://github.com/dexie/Dexie.js/releases/tag/v3.2.0 github.com/dexie/Dexie.js/releases/tag/v3.2.0

rxdb www.npmjs.com/package/rxdb

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

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

https://github.com/sinclairzx81/typebox github.com/sinclairzx81/typebox

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

• 沒事就翻翻 github 的 trending 來看，主要是 JavaScript 和 TypeScript 的項(xiàng)目（沒有數(shù)據(jù)支持，純粹是 Github 推給我的項(xiàng)目和 trending 項(xiàng)目的感受）有以下特點(diǎn)：
• 國內(nèi)的 github 項(xiàng)目大部分屬于整合型業(yè)務(wù)項(xiàng)目，業(yè)務(wù)框架以及學(xué)習(xí)資料的項(xiàng)目。
• 國內(nèi)流行的框架，如果 issue 提的很多，中文就特別多，這一點(diǎn)似乎對(duì)國外人使用就勸退很厲害。有很多項(xiàng)目能明顯看到，只有國內(nèi)人使用。
• 截止 2021 年底，國內(nèi)在 github 上的 JavaScript 和 TypeScript 的基建項(xiàng)目，數(shù)量相對(duì)比較少。
• 題外話，pnpm 的小哥是烏克蘭人，貌似創(chuàng)業(yè)也發(fā)生在烏克蘭（沒確認(rèn)創(chuàng)業(yè)地點(diǎn)。）
• 截止到 2021 年底，我今年受惠最多的我國作者（除了尤大）是

GitHub - egoist/egoist: readme for github.com/egoist github.com/egoist/egoist

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

https://github.com/xcatliu github.com/xcatliu

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

https://github.com/antfu github.com/antfu

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

最后

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

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

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

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

往期推薦

大廠面試官：我理想中的前端

基于pnpm + lerna + typescript的最佳項(xiàng)目實(shí)踐 - 理論篇

減少重復(fù)的請(qǐng)求，也許這個(gè)庫能幫到你

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧