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

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

前端工程化
Web 服务端应用
Electron跨端桌面应用

前端工程化

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

Web服务端应用

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

Electron跨端桌面应用

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

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

V8, libuv

V8: JavaScript Runtime,诊断调试工具(inspector)
libuv: eventloop(事件循环),syscall (系统调用)

特点

异步I/O
单线程
跨平台

异步I/O

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

单线程

实际：JS线程 + uv线程池 + V8任务线程池 + V8 Inspector线程
优点：不用考虑多线程状态同步问题，也就不需要锁;同时还能比较高效地利用系统资源;
缺点：阻塞会产生更多负面影响
- 解决办法:多进程或多线程

跨平台

跨平台(大部分功能、api)
Nodejs 跨平台 + JS无需编译环境(+Web跨平台＋诊断工具跨平台)
- =开发成本低(大部分场景无需担心跨平台问题),整体学习成本低

3.编写Http Server (how)

安装Node.js

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

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

Http Server

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 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 ll 'Hello' ,
        }))
    })
})

HTTP Client

Client

const http = require('http')

const body = JSON.stringify({ msg: 'hello from my client')

const req = http.request( 'http://127.0.0.1:3000', {
    method : 'POST' ,
    headers: {
        'Content-Type': "application/json',
        'Content-Length': body.length,
    },
}, (res) => {
    const bufs = []
    res.on('data', data => {
        bufs.push(data)
    })
    res.on('end', () => {
        const receive =  JSON.parse(Buffer.concat(bufs).toString())
        console.log('receive:', receive)
    })
})

req.end(body)

Promisify

用Promise + async await 重写这两个例子(why)

技巧:将callback 转换成 promise

function wait(t) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, t)
    })
}

wait(1000).then(() => { console.log('get called') })

编写静态文件服务器

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

const http = require('http')
const fs = require('fs')
const path = require( 'path')
const url = require('url')

const port = 3000

const server = http.createserver((req, res) => {
    9const info = url.parse(req.url)
    const file = fs.createReadStream(path.resolve(__dirname, '.' + info.pathname))
    file.pipe(res)
})

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

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

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

外部服务:cloudflare,七牛云,阿里云，火山云...

编写 React SSR服务

SSR(server side rendering)有什么特点?

相比传统 HTML 模版引擎:避免重复编写代码
相比SPA (single page application):首屏渲染更快,SEO友好

缺点: 通常qps较低，前端代码编写时需要考虑服务端渲染情况

HTML例子

const http=require('http')

const port = 3008

const server = http.createServer{(req, res) => {
    res.setHeader(content-Type','text/html')
    res.end(`
        <DOCTYPE htmL>
        <html>
            <head>
                <title>My App</title>
            </head>
            <body>
                <h1>MY App</h1>
            </body>
        </html>
    `)
})

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

替换成 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
- 性能分析

部署简介

部署要解决的问题
- 守护进程:当进程退出时,重新拉起
- 多进程:cluster便捷地利用多进程
- 记录进程状态，用于诊断
容器环境
- 通常有健康检查的手段,只需考虑多核cpu利用率即可

4.延伸话题

Node.js 贡献代码

快速了解 Node.js 代码
- Node.js Core 贡献入门:github.com/joyeecheung…
好处:
- 从使用者的角色逐步理解底层细节,可以解决更复杂的问题;
- 自我证明,有助于职业发展;
- 解决社区问题，促进社区发展;
难点:
- 花时间

编译Node.js

为什么要学习编译Node.js
- 认知:黑盒到白盒,发生问题时能有迹可循贡献代码的第一步
如何编译
- 参考:Maintaining the build files
- ./configure && make install
- 演示:给net模块添加自定义属性

诊断/追踪

诊断是一个低频、重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考。
技术咨询行业中的热门角色。
难点:
- 需要了解 Node.js底层,需要了解操作系统以及各种工具需要经验

WASM, NAPI

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

Node.js与开发 | 青训营笔记