Node.js 与前端开发实战| 青训营笔记

120 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第11天

01. Node.js 的应用场景(why)

image.png

  • 首先要提到的是前端工程化的场景。早期 ajax, jquery 比较流行的时候,我们直接在页面中引入需要的 lib 即可。后续随着模块化、transpile 逐渐成熟、需求逐渐增多,对后端能力的需求也逐渐强烈。反过来说,也正是 Node.js 赋予了 js 开发者在浏览器外运行代码的能力,加速催生了这些项目的出现。
  • 第二个常见的场景是使用 Node.js 开发 Web 服务端应用,也就是后端服务。这里我们特别提一下 vercel 这家公司,
  • 最后要再说下 Electron 应用,这里不只是指 electron,还包括 nw.js.. ; 这个场景在较大的企业里面非常常见。

前端工程化

  • Bundle: webpack, vite, esbuild, parcel
  • Uglify: uglifyjs
  • Transpile: bablejs, typescript
  • 其他语言加入竞争: esbuild, parcel, prisma
  • 现状: 难以替代

服务端应用

  • 学习曲线平缓,开发效率较高
  • 运行效率接近常见的编程语言
  • 社区生态丰富及工具链成熟(npm, V8 inspector)
  • 与前端结合的场景会有优势(SSR)
  • 现状:竞争激烈,Node.js 有自己独特的优势

Electron 跨端桌面应用

  • 商业应用:vscode, slack, discord, zoom
  • 大型公司内的效率工具
  • 现状:大部分场景再选型时,都值得考虑

Node.js 在字节

02. Node.js 运行时结构(what)

image.png

V8, libuv

  • V8:JavaScript Runtime, 诊断调试工具(inspector)
  • libuv: eventloop(事件循环),syscall(系统调用)
  • 举例:用 node-fetch 发起请求时..

特点

image.png

异步IO

image.png

单线程

image.png

跨平台

image.png

03. 编写 Http Server

image.png

安装 Node.js

  • Mac, Linux 推荐使用 nvm 。多版本管理
  • Windows 推荐 nvm4w 或是官方安装包
  • 安装慢,安装失败的情况,设置安装源

[NUM_NODEJS_ORG_MIRROR]npmmirror.com/mirrors/nod… nvm install 16

编写 Http Server - Http Server

image.png

编写 Http Server - Http Client

image.png

编写 Http Server - Promisify

image.png

编写 Http Server - 静态文件

image.png

编写 Http Server - React SSR

image.png

image.png

编写 Http Server - Debug

image.png

image.png

  1. console log 和 breakpoint
  2. cpuprofile
  3. heapsnapshot

编写 Http Server - 部署

image.png

04. 延伸话题

Node.js 贡献代码

  • 快速了解 Node.js 代码Node.js Core 贡献入门

  • 好处:

    • 从使用者的角色逐步理解底层细节,可以解决更复杂的问题
    • 自我证明,有助于职业发展;
    • 解决社区问题,促进社区发展;
  • 难点:

    • 花时间

编译 Node.js

  • 为什么要学习编译 Node.js

    • 认知:黑盒到白盒,发生问题时能有迹可循
    • 贡献代码的第一步
  • 如何编译:

诊断 / 追踪

  • 诊断是一个低频、重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考

  • 技术咨询行业中的热门角色

  • 难点:

    • 需要了解 Node.js 底层,需要了解操作系统以及各种工具
    • 需要经验

image.png

WASM,NAPI

  • Node.js (因为 V8 )是执行 WASM 代码的天然容器,和浏览器 WASM 是同时运行时,同时 Node.js 支持 WASI。
  • NAPI 执行 C 接口的代码(C/C++/Rust...),同时能保留原生代码的性能。
  • 不同编程语言间通信的一种方案。