Web 应用架构与工程生态
能力候选与组合条件
按 32 个能力方向比较候选和实际采用条件，保留前端、服务、文档、实时与 AI 的边界。
比较口径
候选由 2026-10-02 归档研究提供，按任务覆盖、整合成本、运行条件、维护与授权比较。本页不复用当时“最推荐”作为全场景排行，也不复用未经本次取得的版本和价目。候选存在于材料中不代表本项目已安装、试用或选定。
表中每个方向对应独立任务。共用 schema、身份、数据与交付规则可以集中维护，用户界面、数据库记录和公开响应仍有不同职责。能力越多不会自动使架构更完整，实际需求决定引入范围。
前端的 17 个方向
| 方向 | 归档候选 | 条件化选择及主要代价 |
|---|---|---|
| F1 表单 | React Hook Form、TanStack Form、Conform、Formik | 普通 React 表单可考察 RHF；渐进增强和服务器提交考察 Conform；联动与类型需求对照 Form。客户端解析与服务端授权分别保留 |
| F2 表格 | TanStack Table、AG Grid、MUI DataGrid、Glide | 自有呈现与 headless 逻辑可考察 TanStack；重内置功能看 AG Grid/MUI；canvas 模型需核对可访问、打印和自动化；商业功能按当前许可 |
| F3 图表 | Recharts、ECharts、visx、Chart.js | React 常规图可考察 Recharts；复杂交互看 ECharts；自建视觉看 visx。性能按真实点数、更新和设备测量 |
| F4 富文本 | Tiptap、Lexical、Slate、Plate、ProseMirror | schema、扩展、转换及协同接口决定采用；编辑器开源核心与商业服务区分，JSON 树仍需内容边界 |
| F5 代码编辑 | CodeMirror、Monaco、Ace | 文档内嵌与可组合编辑可考察 CodeMirror；类 IDE 功能看 Monaco；体积、worker、语言资源和宿主条件核对 |
| F6 动效 | Motion、GSAP、CSS/WAAPI、Lottie、Rive | 按声明式运动、时间线、资产或交互状态选择；运动偏好和资源释放保留，设计工具授权另核对 |
| F7 拖拽 | dnd-kit、React DnD、原生拖放 | 可排序 React 交互考察 dnd-kit；输入类型、跨列表、键盘替代和保存语义决定复杂度 |
| F8 虚拟化 | TanStack Virtual、react-window、Virtuoso | 自定义布局看 headless，自带组合看较完整方案；动态测量、焦点、查找及打印需要补齐 |
| F9 文件媒体 | react-dropzone、Uppy、tus、video.js、hls.js | 选择、传输、续传和播放分工。大文件和弱网采用按恢复要求决定，归档阈值无普适保证 |
| F10 HTTP | fetch、axios、ky、ofetch | 按进度、流、错误与宿主集成选择。查询缓存另由相应层管理，避免多层重试相乘 |
| F11 国际化 | i18next、next-intl、Lingui、Paraglide | 多宿主与资源方式、RSC 接线、编译或运行成本决定采用；服务器实例与初始语言需隔离 |
| F12 日期时间 | 原生 Date/Intl、date-fns、Day.js、Luxon、Temporal 相关实现 | 时刻、日历日期和业务时区先定义；实际平台能力及所用插件按版本确认 |
| F13 工具函数 | 原生能力、es-toolkit、Lodash 等 | 比较确实缺失的语义、体积和现有资产；相等、拷贝、防抖按实际对象判断 |
| F14 金额 | 最小单位整数、decimal.js、big.js、Dinero.js | 固定单位或十进制表示按规则选择；舍入、货币和传输必须一致，不能用浮点 epsilon 补完整保证 |
| F15 状态机 | React 状态/reducer、Zustand、XState、Jotai | 按状态来源与转移复杂度选择；图状态、进度、重试具有独立语义时考察显式状态机 |
| F16 Markdown | react-markdown、Shiki、remark/rehype、MDX | 纯文档与可执行组件分开；HTML、URL、插件和可信源码边界决定安全及构建责任 |
| F17 离线 | 查询持久化、store persist、idb/Dexie、Service Worker | 缓存恢复与待同步操作不同；schema、配额、驱逐和冲突分别处理 |
这些候选需要按当前官方文档确认具体 API。例如 shadcn 的 Data Table 指南提供组合方法，不能据名称推断一个已经包含全部能力的成品表格。shadcn Data Table
服务的 10 个方向
| 方向 | 归档候选 | 条件化选择及主要代价 |
|---|---|---|
| B1 队列调度 | BullMQ、pg-boss、Graphile Worker、croner、框架 schedule | 后台任务选持久执行，进程内定时选本地时序；数据库提交与入队需共同事务或 outbox。jobId 的去重期限随保留策略 |
| B2 缓存 | cache-manager/Keyv、node-redis、ioredis、本地 LRU | 按 KV、原子操作和多实例共享需要选择；键、TTL、miss、序列化和失效故障按版本及业务条件 |
| B3 安全 | 框架能力、argon2、jose、CSP/净化和限流工具 | 使用可信身份和效果强制；库只提供部分机制，输入形式、对象授权和解释器风险各自检查 |
| B4 邮件 | react-email、MJML、模板引擎、Nodemailer、邮件 API | 模板与发送分开；SMTP/API 按平台与恢复需求选择，提交成功与到达不同 |
| B5 文件图片 | S3 SDK、sharp、本地或兼容对象存储 | 按对象操作、权限、尺寸与平台选择；元数据与字节没有普通共同事务，需恢复与对账 |
| B6 Office/PDF | ExcelJS、Papa Parse、pdf-lib、react-pdf、浏览器打印、提取工具 | 生成、解析、浏览和提取分开；字体、布局、公式、格式忠实度及外部资源决定成本 |
| B7 搜索向量 | PostgreSQL 全文/pgvector、Meilisearch、其他搜索引擎 | 按词法、过滤、排序、向量和运维选择；索引新鲜度与权限传播需要显式条件 |
| B8 支付 | Stripe、支付宝及 MoR 候选 | 市场准入与合同先核对；可信通知/查询、验签、准确金额和持久幂等建立业务完成，费用本页未确认 |
| B9 授权 | 简单规则、CASL、Casbin、OpenFGA、外部 PDP | 所有权可用明确查询条件；属性策略看 CASL 等；关系链与独立策略服务需要更多运行与一致性责任 |
| B10 消息服务 | Nest transport、NATS/JetStream、RabbitMQ、Kafka、gRPC/Connect | 请求、临时通知与持久事件分开；保存/确认/重投按协议和配置；消费者效果幂等不能只靠事件去重记录 |
通用的 5 个方向
| 方向 | 归档候选 | 条件化选择及主要代价 |
|---|---|---|
| G1 AI 接入 | 原始 SDK、AI SDK、LangChain.js 等 | 简单调用保持接口清楚；结构化流、工具和工作流按需求选择。模型任务质量另需评测，成本按当时计价 |
| G2 实时 | WebSocket、SSE、Socket.IO、托管消息服务 | 单向推送和双向通信分开；重连、版本、认证和多实例广播都要明确，socket 连接不代表状态已同步 |
| G3 协同 | Yjs、Automerge、Hocuspocus、托管协同 | 按合并规则、持久存储、权限和离线要求选择；presence 与永久文档状态分开 |
| G4 地图 | Leaflet、MapLibre GL、服务商地图 | 按瓦片/矢量、坐标、图层和设备选择；SDK 授权与底图/API 授权分别确认 |
| G5 测试数据 | Faker、属性生成、固定 fixture、Testcontainers | 生成数据需可复核种子与规则；真实依赖容器需就绪、隔离和版本，替身覆盖范围明确 |
审校改变了哪些采用判断
原手册把“官方 API”“团队约定”和“可直接复制”同时放入条款，部分保证超出证据。本页采用如下限定：
- Express/Multer 上传与 Fastify 需要分别接线，上传迁移包含适配器、插件、流和限制。
- 同一 Redis key 尚存在的队列去重不能推出长期业务效果幂等。
- DB 提交后裸入队留下未保存发布意图的失败间隙；同存储事务或 outbox 保留这份意图。
- 已合法 JSON 编辑树仍需要限制 URL、扩展属性及 HTML 输出；对象形状没有保证所有解释器安全。
- 缓存多 store、Query 卸载取消、Turborepo 任务顺序与类型剥离均按实际接口解释，名称不能代替行为。
startsWith域名白名单与浮点金额补丁无法承担所声称保证，改用实际解析与准确表示。
上述修正来自真实接口、条件推演和正文检查，没有声称本次运行所有候选库。能力选择仍需在目标版本下取得其决定性证据。
最后更新于