day7 Node.js 前端开发实战｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第7天 01.Node.j

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

01.Node.js的应用场景

前端工程化

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

web服务端应用

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

Electron 跨端桌面应用

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

Node.js在字节

BFF应用、SSR应用，举例: Modern.js
服务端应用，举例:头条搜索，西瓜视频，懂车帝
Electron应用:飞连，飞书
每年新增1000+ Node.js应用

02. Node.js运行时结构

V8，libuv

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

特点

1.异步I/O

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

2.单线程:worker_ thread 可以起独立线程，但每个线程的模型没有太大变化

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

3.跨平台

const net=require('net')
const socket=new net.Socket('/tmp/scoket.sock')

单线程

JS单线程
- 实际:JS线程+uv线程池+V8任务线程池+V8Inspector线
优点:不用考虑多线程状态同步问题，也就不需要锁;同时还能比较高效地利用系统资源;
缺点:阻塞会产生更多负面影响
- 解决办法:多进程或多线程
跨平台(大部分功能、api)
Node.js跨平台+ JS无需编译环境(+ Web跨平台+诊断工具跨平
- =开发成本低(大部分场景无需担心跨平台问题)，整体学习成本低

03.编写Http Server

安装Node.js

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

NVM_NODEJS_ORG_MIRROR=hpmmirror.com/mirrors/nod… nvm install 16

Http Server

Hello World

const http = require('http')
const port = 3000
const server = http.createServer((req, res) => {
6   res.end( 'hello')
7 })
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) {
        res.end('invalid json')
    }
        res.setHeader( 'Content-Type'，' application/json'}
        res.end(JSON.stringify({
            echo: reqData.msg || 'Hello', 
    }))
    })
})
const port =3000
server.listen(port, () => {
    console.log(`server listens on:${port}` )
})

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)

编写Http Server——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') })

编写Http Server——静态文件

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

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

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

编写Http Server——React SSR

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

Html例子：

const http.require('http )
const port = 3000
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：

const http.require('http')
const React = require('react')
const ReactDOMServer =require( 'react-dom/ server' )
function App() {
    return React.createElement('h1', {
        children: 'Hello , 
    })
}
const port = 3000
const server = http.createServer((req, res)=>{
res.setHeader( ' Content-Type', ' text/html')
res.end{`
    <DOCTYPE htmL>
    <html>
        <head>
        <title>My App</title>
        </head>
    <body>
    <div 1d="main">
        ${ReactDoMServer.renderToString(
            React.createE Lement (App)
       })
    </body>
    </html>
    `}
})
server.listen(port, () => {
    console.log( `server listens on: ${port} `)
})

SSR难点: 1.需要处理打包代码

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

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

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

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

编写Http Server——Debug

V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台
- node --inspect
- open http://localhost:9229/json
场景:
- 查看console.log内容
- breakpoint
- 高CPU、死循环: cpuprofile
- 高内存占用: heapsnapshot
- 性能分析

编写Http Server——部署

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

04.延伸代码

Node.js 贡献代码

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

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

诊断/追踪

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

day7 Node.js 前端开发实战｜ 青训营笔记