大家好，我是若川。持續(xù)組織了6個(gè)月源碼共讀活動(dòng)，感興趣的可以點(diǎn)此加我微信 ruochuan02?參與，每周大家一起學(xué)習(xí)200行左右的源碼，共同進(jìn)步。同時(shí)極力推薦訂閱我寫(xiě)的《學(xué)習(xí)源碼整體架構(gòu)系列》?包含20余篇源碼文章。歷史面試系列

本文是狼叔在 2 月 16 日在掘金直播《學(xué)習(xí)指北：Node.js 2022 全解析》的 Reaction，狼叔的直播干貨很多，本文盡量保證原內(nèi)容的同時(shí)，額外加入了一些相關(guān)資料和鏈接，方便你學(xué)習(xí)。

Node.js 2021

• Node 2021 開(kāi)發(fā)者報(bào)告鏈接^[1]

Node 2021 開(kāi)發(fā)者報(bào)告解析

Node.js 好像不是很火了？其實(shí)不然。

從 Node.js 源碼更新內(nèi)容來(lái)看，Node.js 正在健康平穩(wěn)的發(fā)展、從可用到好用在轉(zhuǎn)變，在易用性上有很大提升。性能的牌打完了，開(kāi)始打“用戶體驗(yàn)”的牌。

核心產(chǎn)出 async_hooks、profiling、tracing、dump debug、report 等。讓開(kāi)發(fā)者能以更低的門檻提升 Node.js 應(yīng)用的開(kāi)發(fā)體驗(yàn)。

1.開(kāi)發(fā)框架變化較大，造輪子變少，TS 變多，使用企業(yè)級(jí)框架變多

Egg.js 在國(guó)內(nèi)使用普及率很高，而 Midway 和 Nest 增長(zhǎng)較快，和 TypeScript 普及有一定關(guān)系。

2.版本更新變化較大，升級(jí)比較積極

去年主要是使用 Node12，2021 年 Node14 占比將近一半，更新還是較快的。

(如果你想優(yōu)化性能，最好的辦法就是升級(jí) Node 版本 ：）)

3.吐糟變多，意味著用的人變多，趨于成熟

“世界上只有兩種語(yǔ)言，一種是沒(méi)有人用的語(yǔ)言，一種是被抱怨的語(yǔ)言?！?/p>

4.出圈：年齡分布較去年比變大，使用工種也變得比較豐富

整個(gè) Node 社區(qū)不再只是圍繞前端工程師去做，后端、全棧工程師、架構(gòu)師甚至運(yùn)維、技術(shù)總監(jiān)都有一定的接觸，在校生和實(shí)習(xí)生也有一定的使用量。

5.使用困惑：性能優(yōu)化，內(nèi)存泄漏以及 npm 依賴

6.未來(lái)：從業(yè)經(jīng)驗(yàn)越高則越關(guān)注性能和 Serverless

• 從業(yè)經(jīng)驗(yàn)越高則越關(guān)注 WebAssembly (WASI) 和 N-API。

• 越年輕的同學(xué)越關(guān)注 Serverless。

好東西里藏著的趨勢(shì)

1.clipanion

• clipanion 倉(cāng)庫(kù)鏈接^[2]

class?FooCommand?extends?Command?{static?paths?=?[[`foo`]];async?execute()?{this.context.stdout.write(`Foo\n`);} }class?BarCommand?extends?Command?{static?paths?=?[[`bar`]];async?execute()?{this.context.stdout.write(`Bar\n`);} }

TS + 面向?qū)ο?+ 模板模式十分優(yōu)雅。

clipanion 是一個(gè)沒(méi)有運(yùn)行時(shí)依賴的類型安全 CLI 庫(kù)。Yarn v2 版本^[3] berry 源碼中用到了它。包括 Node.js 中新增的 Corepack(包管理器的管理器，用來(lái)管理 npm、yarn、pnpm、cnpm等) 也采用了它。

可以看出社區(qū)對(duì)它的看重，雖然它的 Star 數(shù)不高，但還是十分值得學(xué)習(xí)的。

對(duì)比一下常見(jiàn)的 CLI 庫(kù) Commander.js^[4] 和 cac^[5]，它們的寫(xiě)法是函數(shù)式的，通過(guò)定義一個(gè)函數(shù)，使用 option 傳入?yún)?shù)。

看你喜歡哪種寫(xiě)法，它們都是不錯(cuò)的選擇。

//?Commander.js const?{?program?}?=?require('commander');program.option('--first').option('-s,?--separator?<char>');program.parse();const?options?=?program.opts(); const?limit?=?options.first???1?:?undefined; console.log(program.args[0].split(options.separator,?limit));//?examples/basic-usage.js const?cli?=?require('cac')()cli.option('--type?<type>',?'Choose?a?project?type',?{default:?'node', })const?parsed?=?cli.parse()console.log(JSON.stringify(parsed,?null,?2))

2.TS 相關(guān)的 10 個(gè)項(xiàng)目推薦

• CLI 模塊：clipanion^[6]

• 測(cè)試模塊：uvu^[7]

• Web 模塊(express 替代品)：tinyhttp^[8]

• 數(shù)據(jù)庫(kù)模塊：typeorm^[9]

• Web 應(yīng)用：midway^[10]、daruk^[11]、loopback^[12]、nest^[13]、ssr^[14]

• react 全家桶：umi^[15]

2.1 find-my-way

• find-my-way^[16]

const?http?=?require('http') const?router?=?require('find-my-way')()router.on('GET',?'/',?(req,?res,?params)?=>?{res.end('{"message":"hello?world"}') })const?server?=?http.createServer((req,?res)?=>?{router.lookup(req,?res) })server.listen(3000,?err?=>?{if?(err)?throw?errconsole.log('Server?listening?on:?http://localhost:3000') })

受 Go 語(yǔ)言中 echo 框架的路由實(shí)現(xiàn)所啟發(fā)，具體實(shí)現(xiàn)基于基數(shù)樹(shù)^[17]。部分代碼從 trekjs^[18]提取。

性能

基準(zhǔn)測(cè)試 all together 中 find-my-way 是 525,798 ops/sec，koa-router 是 161,220 ops/sec。每秒能夠處理的請(qǐng)求數(shù)差距還是非常明顯的，基數(shù)樹(shù)的這種方式遠(yuǎn)遠(yuǎn)比正則快的多。

=======================find-my-way?benchmark ======================= short?static:?10,102,066?ops/sec static?with?same?radix:?3,887,679?ops/sec dynamic?route:?1,637,929?ops/sec mixed?static?dynamic:?2,289,554?ops/sec long?static:?5,403,719?ops/sec wildcard:?3,037,119?ops/sec all?together:?525,798?ops/sec======================koa-router?benchmark ====================== short?static:?1,004,122?ops/sec static?with?same?radix:?1,029,369?ops/sec dynamic?route:?1,015,635?ops/sec mixed?static?dynamic:?968,784?ops/sec long?static:?1,027,857?ops/sec wildcard:?1,033,432?ops/sec all?together:?161,220?ops/sec

下圖來(lái)自于 Fasify 的基準(zhǔn)測(cè)試^[19]

Fastify 和 Restify 都是基于 find-my-way 實(shí)現(xiàn)的路由，Restify 早期版本基于 express 的路由，Fastify 能處理的每秒請(qǐng)求數(shù)比原生的還高。從數(shù)據(jù)結(jié)構(gòu)角度來(lái)進(jìn)行優(yōu)化是未來(lái)提升性能比較重要的一點(diǎn)。

• Radix Tree 原理^[20]

• path-to-regexp^[21]

2.2 性能優(yōu)化的 4 個(gè)建議

• fast-json-stringify^[22]

2.3 測(cè)試框架演進(jìn)

idea

造輪子：把 junit 的 API 搬進(jìn) TS。

實(shí)現(xiàn)路徑

ts-import vs typescript-require

這二者的性能還是差一些，后面準(zhǔn)備用 Rust 或者 Go 的編譯器重寫(xiě)。

xv

在造輪子的過(guò)程中，發(fā)現(xiàn)了一個(gè)有意思的庫(kù) xv。作者還有 json-server、lowdb 等作品。

源碼只有 40 幾行，無(wú)需定義任何測(cè)試語(yǔ)法。

• https://github.com/typicode/xv^[23]

uvu

uvu^[24] 的源碼值的學(xué)習(xí)。

常見(jiàn)的 Node 測(cè)試框架：

• ava^[25]

• jest^[26]

• mocha^[27]

• tape^[28]

• uvu^[29]

vitest

會(huì)替代掉 jest，也會(huì)越來(lái)越流行。

• vitest^[30]

2.4 easy-monitor

• easy-monitor^[31] 是近年來(lái)性能監(jiān)控的最好方案。

監(jiān)控痛點(diǎn)

一些痛點(diǎn)對(duì)開(kāi)發(fā)者門檻要求比較高，但是 easy-monitor 已經(jīng)幫我們做好了。

性能調(diào)優(yōu)，永不過(guò)時(shí)

基于 addon，沒(méi)有版本依賴。各種內(nèi)存泄漏分析工具與 Coredump 分析工具，絕對(duì)有你的知識(shí)盲點(diǎn)

對(duì)閱讀 node 源碼和深入理解服務(wù)器有非常大的幫助

對(duì)理解 libuv，以及 c++ 也有幫助

源碼基于 egg 和 vue，都是非常成熟的技術(shù)

作者一定要靠譜

完善的應(yīng)用故障定位步驟

2.5 rushstack

Turborepo 對(duì)于 Lerna 是競(jìng)品，而目前還對(duì)標(biāo)不上 rushstack^[32]，rushstack 適用于超大型項(xiàng)目。微軟的全系列產(chǎn)品也都在使用 rushstack 全家桶。在未來(lái)有超大型項(xiàng)目挑戰(zhàn)的時(shí)候 rushstack 是一個(gè)非常好的實(shí)踐借鑒。

總結(jié)

八大類 Web 框架

• Jamstack，下一代 Web 建站技術(shù)棧？^[33]

架構(gòu)演進(jìn)

這一趴主要引用了 Node 地下鐵的一次分享，原文鏈接如下。

• JavaScript 全棧?效研發(fā)在語(yǔ)雀中的實(shí)踐^[34]

前端 3.0

重新思考前后端的關(guān)系

BFF vs FFB

前端代碼里的膠水代碼太多了，本質(zhì)上講，從數(shù)據(jù)庫(kù)到 API 字段，然后到前端渲染，應(yīng)該是一個(gè)非常純凈的過(guò)程。但是由于業(yè)務(wù)發(fā)展或者是各種情況，數(shù)據(jù)庫(kù)里面的字段不能拿出來(lái)直接用，前后端的溝通成本又導(dǎo)致了中間加了額外的各種邏輯。這就導(dǎo)致了前端的復(fù)雜度一直在上升。

• 更多內(nèi)容可以參考狼叔在社區(qū)中的回答^[35]

參考資料

[1]

Node 2021 開(kāi)發(fā)者報(bào)告鏈接: https://nodersurvey.github.io/reporters/

[2]

clipanion 倉(cāng)庫(kù)鏈接: https://github.com/arcanis/clipanion

[3]

Yarn v2 版本: https://github.com/yarnpkg/berry

[4]

Commander.js: https://www.npmjs.com/package/commander

[5]

cac: https://github.com/cacjs/cac

[6]

clipanion: https://github.com/arcanis/clipanion

[7]

uvu: https://github.com/lukeed/uvu

[8]

tinyhttp: https://github.com/tinyhttp/tinyhttp

[9]

typeorm: https://github.com/typeorm/typeorm

[10]

midway: https://github.com/midwayjs/midway

[11]

daruk: https://github.com/darukjs/daruk

[12]

loopback: https://github.com/strongloop/loopback

[13]

nest: https://github.com/nestjs/nest

[14]

ssr: https://github.com/ykfe/ssr

[15]

umi: https://github.com/umijs/umi

[16]

find-my-way: https://github.com/delvedor/find-my-way

[17]

基數(shù)樹(shù): https://en.wikipedia.org/wiki/Radix_tree

[18]

trekjs: https://github.com/trekjs/trek

[19]

Fasify 的基準(zhǔn)測(cè)試: https://github.com/fastify/fastify/blob/main/README.md#benchmarks

[20]

Radix Tree 原理: https://ivanzz1001.github.io/records/post/data-structure/2018/11/18/ds-radix-tree

[21]

path-to-regexp: https://github.com/pillarjs/path-to-regexp

[22]

fast-json-stringify: https://github.com/fastify/fast-json-stringify

[23]

https://github.com/typicode/xv: https://github.com/typicode/xv

[24]

uvu: https://github.com/lukeed/uvu/blob/master/src/index.js

[25]

ava: https://github.com/avajs/ava

[26]

jest: https://github.com/facebook/jest

[27]

mocha: https://github.com/mochajs/mocha

[28]

tape: https://github.com/substack/tape

[29]

uvu: https://github.com/lukeed/uvu

[30]

vitest: https://github.com/vitest-dev/vitest

[31]

easy-monitor: https://github.com/hyj1991/easy-monitor

[32]

rushstack: https://github.com/microsoft/rushstack

[33]

Jamstack，下一代 Web 建站技術(shù)棧？: https://zhuanlan.zhihu.com/p/281085404

[34]

JavaScript 全棧?效研發(fā)在語(yǔ)雀中的實(shí)踐: https://www.yuque.com/summ/colacake/js_fullstack

[35]

更多內(nèi)容可以參考狼叔在社區(qū)中的回答: https://www.zhihu.com/question/493891614/answer/2264072484

·················?若川簡(jiǎn)介?·················

你好，我是若川，畢業(yè)于江西高?！，F(xiàn)在是一名前端開(kāi)發(fā)“工程師”。寫(xiě)有《學(xué)習(xí)源碼整體架構(gòu)系列》20余篇，在知乎、掘金收獲超百萬(wàn)閱讀。
從2014年起，每年都會(huì)寫(xiě)一篇年度總結(jié)，已經(jīng)寫(xiě)了7篇，點(diǎn)擊查看年度總結(jié)。
同時(shí)，最近組織了源碼共讀活動(dòng)，幫助3000+前端人學(xué)會(huì)看源碼。公眾號(hào)愿景：幫助5年內(nèi)前端人走向前列。

識(shí)別上方二維碼加我微信、拉你進(jìn)源碼共讀群

今日話題

略。分享、收藏、點(diǎn)贊、在看我的文章就是對(duì)我最大的支持~

總結(jié)

以上是生活随笔為你收集整理的狼叔直播 Reaction《学习指北：Node.js 2022 全解析》的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。