狼叔直播 Reaction《学习指北：Node.js 2022 全解析》

大家好，我是若川。持续组织了6个月源码共读活动，感兴趣的可以点此加我微信 ruochuan02 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列

本文是狼叔在 2 月 16 日在掘金直播《学习指北：Node.js 2022 全解析》的 Reaction，狼叔的直播干货很多，本文尽量保证原内容的同时，额外加入了一些相关资料和链接，方便你学习。

Node.js 2021

  • Node 2021 开发者报告链接[1]

Node 2021 开发者报告解析

Node.js 好像不是很火了？其实不然。

从 Node.js 源码更新内容来看，Node.js 正在健康平稳的发展、从可用到好用在转变，在易用性上有很大提升。性能的牌打完了，开始打“用户体验”的牌。

核心产出 async_hooks、profiling、tracing、dump debug、report 等。让开发者能以更低的门槛提升 Node.js 应用的开发体验。

1.开发框架变化较大，造轮子变少，TS 变多，使用企业级框架变多

ff258a5a70eb1209b5f2c1d885ffb194.pngc69313d9f46f16951e4cb47cc67de667.png

Egg.js 在国内使用普及率很高，而 Midway 和 Nest 增长较快，和 TypeScript 普及有一定关系。

2.版本更新变化较大，升级比较积极

ffc317ae251fd9271960ecc0d3aac220.png

去年主要是使用 Node12，2021 年 Node14 占比将近一半，更新还是较快的。

(如果你想优化性能，最好的办法就是升级 Node 版本 ：）)

3.吐糟变多，意味着用的人变多，趋于成熟

389b5c10d37c680ec087e8ab47fd9b30.png

“世界上只有两种语言，一种是没有人用的语言，一种是被抱怨的语言。”

4.出圈：年龄分布较去年比变大，使用工种也变得比较丰富

c68fb6b749918974c8d18f21fc1aef4f.png

整个 Node 社区不再只是围绕前端工程师去做，后端、全栈工程师、架构师甚至运维、技术总监都有一定的接触，在校生和实习生也有一定的使用量。

5.使用困惑：性能优化，内存泄漏以及 npm 依赖

34703378a8ed53698ae0689c2769f5e4.png

6.未来：从业经验越高则越关注性能和 Serverless

fef704ccae731ce27e22d849ead0a44e.png

  • 从业经验越高则越关注 WebAssembly (WASI) 和 N-API。

  • 越年轻的同学越关注 Serverless。

好东西里藏着的趋势

1.clipanion

  • clipanion 仓库链接[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 + 面向对象 + 模板模式十分优雅。

clipanion 是一个没有运行时依赖的类型安全 CLI 库。Yarn v2 版本[3] berry 源码中用到了它。包括 Node.js 中新增的 Corepack(包管理器的管理器，用来管理 npm、yarn、pnpm、cnpm等) 也采用了它。

可以看出社区对它的看重，虽然它的 Star 数不高，但还是十分值得学习的。

对比一下常见的 CLI 库 Commander.js[4] 和 cac[5]，它们的写法是函数式的，通过定义一个函数，使用 option 传入参数。

看你喜欢哪种写法，它们都是不错的选择。

// 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 相关的 10 个项目推荐

  • CLI 模块：clipanion[6]

  • 测试模块：uvu[7]

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

  • 数据库模块：typeorm[9]

  • Web 应用：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 语言中 echo 框架的路由实现所启发，具体实现基于基数树[17]。部分代码从 trekjs[18]提取。

性能

基准测试 all together 中 find-my-way 是 525,798 ops/sec，koa-router 是 161,220 ops/sec。每秒能够处理的请求数差距还是非常明显的，基数树的这种方式远远比正则快的多。

=======================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

下图来自于 Fasify 的基准测试[19]

60b32727141b8db53c504785e3513bb2.png

Fastify 和 Restify 都是基于 find-my-way 实现的路由，Restify 早期版本基于 express 的路由，Fastify 能处理的每秒请求数比原生的还高。从数据结构角度来进行优化是未来提升性能比较重要的一点。

  • Radix Tree 原理[20]

  • path-to-regexp[21]

2.2 性能优化的 4 个建议

a10c739469ae495090ed4382dc122830.png

  • fast-json-stringify[22]

2.3 测试框架演进

feefff2d06345e2785cc7767326a10eb.png

idea

造轮子：把 junit 的 API 搬进 TS。

6d7fa16b911b841ccc9a4e19196e2e79.png

实现路径

930242dc3ae2a38bb7ae29d9781e43cc.png

ts-import vs typescript-require

b58f452add833389a16344f359f1f379.png

这二者的性能还是差一些，后面准备用 Rust 或者 Go 的编译器重写。

xv

在造轮子的过程中，发现了一个有意思的库 xv。作者还有 json-server、lowdb 等作品。

源码只有 40 几行，无需定义任何测试语法。

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

uvu

uvu[24] 的源码值的学习。

d19a81c31c6566f0118628f03b9f3e6c.png

常见的 Node 测试框架：

  • ava[25]

  • jest[26]

  • mocha[27]

  • tape[28]

  • uvu[29]

vitest

会替代掉 jest，也会越来越流行。

  • vitest[30]

94b9e9e8db8659130f54bcbc310994dc.png

2.4 easy-monitor

69f7fcdc80f89f289b388021216a2aff.png

  • easy-monitor[31] 是近年来性能监控的最好方案。

监控痛点

7a0929f4618bcea16aa75dd6048851fd.png

一些痛点对开发者门槛要求比较高，但是 easy-monitor 已经帮我们做好了。

  1. 性能调优，永不过时

  2. 基于 addon，没有版本依赖。各种内存泄漏分析工具与 Coredump 分析工具，绝对有你的知识盲点

  3. 对阅读 node 源码和深入理解服务器有非常大的帮助

  4. 对理解 libuv，以及 c++ 也有帮助

  5. 源码基于 egg 和 vue，都是非常成熟的技术

  6. 作者一定要靠谱

完善的应用故障定位步骤

398e846c8c60475620eeaac69c0cc066.png

2.5 rushstack

f9a9a829e24b53e7579fbb5f2816ce3a.png

Turborepo 对于 Lerna 是竞品，而目前还对标不上 rushstack[32]，rushstack 适用于超大型项目。微软的全系列产品也都在使用 rushstack 全家桶。在未来有超大型项目挑战的时候 rushstack 是一个非常好的实践借鉴。

db89bb561b48eeb4f11360caa57f13ac.png9803ef420b8732c44c3fc9667b28c1cb.png

总结

93cb2c480b8ecd5f8561a2a1c7353d8f.png

八大类 Web 框架

00d0eeb985dbe31a6b8f7e20d3bf26a0.png8452e6bc22d72c249d5a13e760d1eb91.png

  • Jamstack，下一代 Web 建站技术栈？[33]

架构演进

这一趴主要引用了 Node 地下铁的一次分享，原文链接如下。

  • JavaScript 全栈⾼效研发在语雀中的实践[34]

前端 3.0

6e30b19a7bddd83206a395305fcbf11f.png

重新思考前后端的关系

BFF vs FFB

前端代码里的胶水代码太多了，本质上讲，从数据库到 API 字段，然后到前端渲染，应该是一个非常纯净的过程。但是由于业务发展或者是各种情况，数据库里面的字段不能拿出来直接用，前后端的沟通成本又导致了中间加了额外的各种逻辑。这就导致了前端的复杂度一直在上升。

  • 更多内容可以参考狼叔在社区中的回答[35]

97a753e56890b019f068cb7c877397e5.png

参考资料

[1]

Node 2021 开发者报告链接: https://nodersurvey.github.io/reporters/

[2]

clipanion 仓库链接: 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]

基数树: https://en.wikipedia.org/wiki/Radix_tree

[18]

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

[19]

Fasify 的基准测试: 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 建站技术栈？: https://zhuanlan.zhihu.com/p/281085404

[34]

JavaScript 全栈⾼效研发在语雀中的实践: https://www.yuque.com/summ/colacake/js_fullstack

[35]

更多内容可以参考狼叔在社区中的回答: https://www.zhihu.com/question/493891614/answer/2264072484

4bee77ca048661a4be7ed10ac27c64a4.gif

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。
同时，最近组织了源码共读活动，帮助3000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。

c33a956690b66b83ea4448808c79c34d.png

识别上方二维码加我微信、拉你进源码共读群

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/274898.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

figma下载_Figma中的高级图像处理

figma下载_Figma中的高级图像处理

figma下载Figma is not exactly suited for image manipulation, and that’s completely fine. While it does provide an ample amount of tools that let you apply some basic changes to your raster images, for anything more complex you need to look someplace else.…
阅读更多...
指针和指针的指针_网络上的iPad指针

指针和指针的指针_网络上的iPad指针

指针和指针的指针a week ago I saw a new IPad Pointer presentation and was very excited about what they did. It was very interesting to see how they design different pointer modes and attention to details. Here is the presentation:一周前&#xff0c;我看到了一…
阅读更多...
Vue 是如何用 Rollup 打包的？

Vue 是如何用 Rollup 打包的？

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列Rollu…
阅读更多...
leetcode 207课程表

leetcode 207课程表

class Solution { public:bool canFinish(int numCourses, vector<vector<int>>& prerequisites) {//验证是否为DAG&#xff0c;每次验证指向的是否已经存在于当前图中//建图vector<int> indegree(numCourses,0);//入度vector<vector<int>> …
阅读更多...
sketch怎么传到ps_2020年从Sketch移植到Figma的详细指南

sketch怎么传到ps_2020年从Sketch移植到Figma的详细指南

sketch怎么传到psAs we’re locked up in our homes due to COVID-19 pandemic, many of us are working remotely and Figma is a go-to tool for designers for the same.由于COVID-19流行病使我们被关在家里&#xff0c;我们中的许多人都在远程工作&#xff0c;而Figma是设计…
阅读更多...
还没搭建过Vue3.x项目？几行代码搞定~

还没搭建过Vue3.x项目？几行代码搞定~

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列相信现…
阅读更多...
一步步创建 边栏 Gadget(二)

一步步创建 边栏 Gadget(二)

相信使用上篇中创建的边栏Gadget之后&#xff0c;大家会很郁闷。难道视频窗口就那么小吗&#xff1f;看起来真费劲。我能通过该Gadget看着一部电视剧。而不能够定制自己需要的或者想要看的电视剧。 在上一篇一步步创建 边栏 Gadget&#xff08;一&#xff09;中&#xff0c;我们…
阅读更多...
tableau 自定义图表_一种新的十六进制美国地图布局的案例-Tableau中的自定义图表

tableau 自定义图表_一种新的十六进制美国地图布局的案例-Tableau中的自定义图表

tableau 自定义图表For whatever reason, 无论出于什么原因 maps are cool. Even though the earth has mostly been the same since those 地图很酷 。 即使自Pangaea days, we humans make and remake maps constantly. It might be that old maps remind us of how things …
阅读更多...
2022，前端工具链十年盘点

2022，前端工具链十年盘点

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列2021 …
阅读更多...
书籍排版学习心得_为什么排版是您可以学习的最佳技能

书籍排版学习心得_为什么排版是您可以学习的最佳技能

书籍排版学习心得重点 (Top highlight)I was introduced to design in a serpentine fashion. I don’t have any formal training. Instead, I’ve learned everything through the Web, books, and by interacting with designers daily.我被介绍为蛇形设计。 我没有任何正规…
阅读更多...
若川的 2021 年度总结，弹指之间

若川的 2021 年度总结，弹指之间

1前言从2014年开始&#xff0c;每一年都会写年度总结&#xff0c;已经坚持了7个年头。7年的光阴就是弹指之间&#xff0c;转瞬即逝。正如孔子所说&#xff1a;逝者如斯夫&#xff0c;不舍昼夜。回顾2014&#xff0c;约定2015&#xff08;QQ空间日志&#xff09;2015年总结&…
阅读更多...
线框图用什么软件_为什么要在线框中着色？

线框图用什么软件_为什么要在线框中着色？

线框图用什么软件I was recently involved in a debate around why some wireframes (which were definitely not UI screens) were not 100% greyscale. This got me thinking — when is it ok to use colour in wireframes, and when is it going to cause you problems fur…
阅读更多...
Linux 内核

Linux 内核

Linux 内核是一个庞大而复杂的操作系统的核心&#xff0c;不过尽管庞大&#xff0c;但是却采用子系统和分层的概念很好地进行了组织。通过本专题&#xff0c;我们可以学习 Linux 的分层架构、内核配置和编译、内核性能调试和 Linux 2.6 中的许多提升功能。Linux 内核组成 Linux…
阅读更多...
给asterisk写app供CLI调用

给asterisk写app供CLI调用

环境&#xff1a;CentOS6.2 Asterisk 1.8.7.1 一、添加源文件 复制app_verbose.c为app_testApp.c 复制app_verbose.exports为app_testApp.exports 主要是修改一些标识&#xff0c;编译不会出错就行&#xff0c;这里列出我进行的主要修改。 1、添加头文件 #include "aster…
阅读更多...
前端，校招，面淘宝，指南

前端，校招，面淘宝，指南

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列虽然是…
阅读更多...
qq空间网页设计_网页设计中负空间的有效利用

qq空间网页设计_网页设计中负空间的有效利用

qq空间网页设计Written by Alan Smith由艾伦史密斯 ( Alan Smith)撰写 Negative space is a key design element that you may come across in the fields of art, architecture, interior design, landscaping and web design. Rather than serving as awkward, empty areas …
阅读更多...
Git 和 GitHub 教程——版本控制入门

Git 和 GitHub 教程——版本控制入门

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列Learn…
阅读更多...
matlab中的:的优先级_内容早期设计：内容优先

matlab中的:的优先级_内容早期设计：内容优先

matlab中的:的优先级By Simone Ehrlich, Content Strategy Manager由 西蒙埃利希 &#xff0c;内容策略经理 Words are cheap. Cheaper than wires; cheaper than mocks. That doesn’t mean words aren’t important, just less expensive to produce as a design asset. So …
阅读更多...
我真的哭了,哭过后呢(-)

我真的哭了,哭过后呢(-)

这些是山区的孩子们&#xff01; 这是他们的教室。这个也算是&#xff01;如此的师资力量自己解决吃饭问题冬天到了&#xff0c;一起烤烤火与泥土污水一起还好&#xff0c;最大的数字只是10老师抱着孩子来给我们上课了不知道山那边会是什么呢&#xff1f;又一双充满了渴望的大眼…
阅读更多...
脑裂问题解决方案_从解决方案到问题

脑裂问题解决方案_从解决方案到问题

脑裂问题解决方案Once upon a time a couple of years ago, one of my mentors (and favourite people in the world) repeatedly drilled the idea above into my brain. Her advice for Product people was to “fall in love with the problem, not the solution”. At the …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023