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

Node.js 的应用场景

前端工程化

首先要提到的是前端工程化的场景。早期 ajax, jquery 比较流行的时候，我们直接在页面中引入需要的 lib 即可。后续随着模块化、transpile 逐渐成熟、需求逐渐增多，对后端能力的需求也逐渐强烈。反过来说，也正是 Node.js 赋予了 js 开发者在浏览器外运行代码的能力，加速催生了这些项目的出现。

应用：

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

Web 服务端应用

第二个常见的场景是使用 Node.js 开发 Web 服务端应用，也就是后端服务。

Node.js 应用特点：

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

Electron 跨端桌面应用

最后再说下 Electron 应用，这里不只是指 electron，还包括 nw.js...; 这个场景在较大的企业里面非常常见。

应用：

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

Node.js 运行时结构

V8, libuv

V8:

V8 引擎就是 JavaScript 解释器，它负责解析和执行 JavaScript 代码。

V8 引擎借鉴了 Java 虚拟机和 C++ 编译器的众多技术，它将 JavaScript 代码直接编译成原生机器码，并且使用了缓存机制来提高性能，这使得 JavaScript 的运行速度可以媲美二进制程序。

libuv:

一个跨平台的、基于事件驱动的异步 I/O 库。但是 libuv 不仅限于 I/O，它还提供了进程管理、线程池、信号处理、定时器等其它功能。

Linux 中一切皆文件，这里的 I/O 不仅仅包括文件读写，还包括数据库读写、网络通信（socket）等。

特点

异步 I/O

demo

setTimeout(() => {
    console.log('B')
})
    console.log('A')

当 Node.js 执行 I/O 操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待：

单线程

demo

function fibonacci(num: number): number {
    if (num === 1 || num === 2) {
      return 1;
    }
    return fibonacci(num - 1) + fibonacci(num - 2);
}

fibonacci(42)
fibonacci(43)

实际：

只有 JS 线程为单线程
实际: JS 线程 + UV 线程池 + V8 任务线程池 + V8 Inspector 线程

优点:

不用考虑多线程状态同步问题，也就不需要锁；
同时还能比较高效地利用系统资源。

缺点:

阻塞会产生更多负面影响
解决办法: 多进程或多线程

跨平台

demo

TS example.ts > socket
    const net = require('net')
    
    const socket = new net.Socket('/tmp/scoket.sock')

大部分功能、api是跨平台的；

Node.js 跨平台 + JS 无需编译环境 (+ Web 跨平台 + 诊断工具跨平台) = 开发成本低 (大部分场景无需担心跨平台问题)，整体学习成本低

编写 Http Server

安装 Node.js

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

NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node nvm install 16

编写 Http Server + Client, 收发 GET, POST 请求

Http Server

demo:

Hello World

const http = require('http')

const port = 3000

const server = http.createServer((req, res) => {
  res.end('hello')
})

server.listen(port, () => {
  console.log(`server listens on: ${port}`)
})

JSON

const http = require('http')

const server = http.createServer((req, res) => {
  const bufs = []
  req.on('data', data => {
    bufs.push(data)
  })
  req.on('end', () => {
    let reqData = {}
    try {
      reqData = JSON.parse(Buffer.concat(bufs).toString())
    } catch (err) {
      // receive invalid json data
    }
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify({
      echo: reqData.msg || 'Hello',
    }))
  })
})

Http Client

demo:

编写静态文件服务器

编写一个简单的静态文件服务：

与高性能、可靠的服务相比，还差什么?

CDN : 缓存 + 加速
分布式储存，容灾

外部服务:

cloudflare，七牛云，阿里云，火山云...

编写 React SSR (server side rendering) 服务

SSR 特点:

相比传统 HTML 模版引擎：避免重复编写代码
相比 SPA (single page application)：首屏渲染更快，SEO友好缺点
缺点：
- 通常 qps 较低，前端代码编写时需要考虑服务端渲染情况

HTML例子: 替换成 React：

SSR 难点：

需要处理打包代码

require('./static/style.css')

需要思考前端代码在服务端运行时的逻辑

async componentDidMount() {
  const res = await fetch('http://my.server.domain')

需要移除对服务端无意义的副作用，或重置环境

适用 inspector 进行调试、诊断

V8 Inspector优势:

开箱即用、特性丰富强大、与前端开发一致、跨平台

开启： node --inspect

指定端口： open http://localhost9229/json

场景:

查看 console.log 内容
breakpoint
高 CPU、死循环: cpuprofile
高内存占用: heapsnapshot
性能分析

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

Node.js 的应用场景

前端工程化

应用：

Web 服务端应用

Node.js 应用特点：

Electron 跨端桌面应用

应用：

Node.js 运行时结构

V8, libuv

V8:

libuv:

特点

异步 I/O

单线程

实际：

优点:

缺点:

跨平台

编写 Http Server

安装 Node.js

编写 Http Server + Client, 收发 GET, POST 请求

Http Server

Hello World

JSON

Http Client

编写静态文件服务器

编写 React SSR (server side rendering) 服务

SSR 特点:

SSR 难点：

适用 inspector 进行调试、诊断

V8 Inspector优势:

场景:

部署简介

部署要解决的问题

容器环境