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

7. Node.js 与前端开发实战

7.1 Node.js的应用场景

Node.js的应用场景

1. 前端工程化
2. Web服务端应用
3. Elecron跨端桌面应用

Node.js的应用场景-前端工程化

Node.js的应用场景-Web服务端应用

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

Node.js的应用场景-Electron跨端桌面应用

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

Node.js的应用场景-Node.js在字节

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

7.2 Node.js运行时结构

Node.js运行时结构-V8，libuv

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

Node.js运行时结构-特点

Node.js运行时结构-异步IO

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

Node.js运行时结构-单线程

Node.js运行时结构-跨平台

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

7.3 编写Http Server

编写Http Server-安装Node.js

编写Http Server-Http Server

编写Http Server-Http Client

Client

编写Http Server-Promisify

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

技巧：将callback转换成promise

编写Http Server-静态文件

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

编写Http Server-React SSR

• SSR有什么特点？
• 相比传统的HTML模板引擎：避免重复编写代码
• 相比SPA：首屏渲染更快，SEO友好
• 缺点：通常qps较低，前端代码编写时需要考虑服务端渲染情况

HTML例子

替换成React

编写Http Server-Debug

• V8 Inspector：开箱即用、特性丰富强大、与前端开发一致、跨平台
• node --inspect
• open http://localhost:9229/json

场景：

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

演示

编写Http Server-部署

• 部署要解决的问题

  • 守护进程：当进程退出时，重新拉起
  • 多进程：cluster便捷地利用多进程
  • 记录进程状态，用于诊断

• 容器环境

  • 通常有健康检查的手段，只需考虑多核cpu利用率即可

7.4 延伸话题

延伸话题-Node.js代码

• 快速了解Node.js代码

  • Node.js Core贡献入门

• 好处：

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

• 难点：

  • 花时间

延伸话题-编译Node.js

延伸话题-诊断/追踪

延伸话题-WASM,NAPI