# 002-为什么选择React+Node.js技术栈

| 属性 | 说明 |
|-------|------|
| **状态** | 已接受 |
| **创建日期** | 2024-05-18 |
| **作者** | 你的名字 |

## 背景

我们需要选择一个合适的全栈技术栈来构建ITOps Agent Platform。这个项目需要：

- 现代、美观的用户界面
- 实时WebSocket通信（任务进度推送）
- 快速迭代和原型验证
- 相对容易招聘的人才
- 良好的开发体验

## 选项

我们评估了以下几个技术栈组合：

### 选项1: React + Node.js（Express）

**优点：**
- 前后端统一语言（TypeScript），上下文切换成本低
- React生态成熟，组件库丰富
- Node.js异步模型适合I/O密集型任务（如SSH连接、LLM调用）
- 热重载、快速反馈循环，开发体验好
- 部署简单（尤其是Docker容器化）
- Socket.io完美支持实时通信

**缺点：**
- Node.js不适合CPU密集型任务（但我们的场景主要是I/O密集）
- 后端性能不如Go/Rust（但对于我们的场景足够）
- 内存占用相对较高

### 选项2: Vue3 + Python（FastAPI）

**优点：**
- Vue学习曲线低，上手快
- Python在AI领域有优势（LLM集成方便）
- FastAPI性能优秀，类型提示好

**缺点：**
- 前后端语言分离，上下文切换成本高
- Python异步编程相对复杂
- 对于全栈开发来说不如统一语言方便

### 选项3: Go + 前端（任意框架）

**优点：**
- Go性能优秀，部署简单
- 编译型语言，运行速度快
- 并发模型优秀

**缺点：**
- 前端还得选一个框架，技术栈分裂
- Go的Web生态相对不如Node.js成熟
- 开发速度可能不如Node.js快（快速原型阶段）

## 决策

我们选择React + TypeScript（前端）+ Node.js + Express + TypeScript（后端）作为我们的技术栈。

## 理由

### 1. 单一语言（TypeScript）的优势

- **上下文切换成本低**：前后端都用TypeScript，开发者可以无缝切换
- **类型共享**：可以在前后端共享类型定义（如API数据结构）
- **工具链统一**：ESLint、Prettier等可以一套配置通用
- **招聘方便**：全栈TypeScript工程师相对容易招聘

### 2. 适合我们的场景

我们的工作负载主要是I/O密集型：

- SSH连接和命令执行
- LLM API调用
- 数据库操作
- WebSocket通信

Node.js的异步I/O模型非常适合这些场景。

### 3. 开发速度和快速迭代

这个项目是在空窗期进行的快速原型验证，我们需要：

- 快速验证想法
- 快速调整和迭代
- 不希望在构建配置上浪费太多时间

Vite + React + Express的组合完美满足了这些需求。

### 4. 生态成熟度

- React生态有大量优秀的组件库（我们用了Tailwind CSS + shadcn/ui风格）
- React Flow（@xyflow/react）完美支持我们需要的工作流可视化
- Socket.io成熟稳定，完全支持我们的实时通信需求
- Express中间件生态丰富，容易扩展功能

## 后果

### 正面后果

- 开发效率高，快速验证想法
- 前后端统一语言，降低维护成本
- 社区生态好，遇到问题容易找到解决方案
- Docker部署方便

### 负面后果

- 对于超高性能要求的场景可能不够（但我们的场景不需要）
- Node.js的并发模型需要正确理解，避免回调地狱（我们用async/await解决）
- 内存占用相对较高（但对于现代服务器来说不是问题）

## 其他考虑

### 为什么是Express，不是NestJS？

我们考虑过NestJS，但最终选择了Express，原因：

- Express更简单、更灵活
- 我们的项目规模不需要NestJS的复杂性
- Express学习成本更低
- 保留未来迁移到NestJS的可能性（Express可以作为底层）

### 为什么是React，不是Vue？

这是一个个人偏好+生态考虑：

- React Flow（工作流组件）的生态比Vue类似组件成熟
- React生态在企业级工具中更常见
- 团队（就我一人）更熟悉React

## 总结

React + Node.js + TypeScript是最适合我们项目当前阶段的技术栈：快速、灵活、生态好，完全满足我们的需求。
