学习路线：从浏览器到 Agent 系统
这套路线写给已经做过真实前端项目，希望继续补齐工程基础、后端能力和 Agent 开发方法的开发者。它不按技术热度排列，也不要求把每个框架都学到同样深。路线只追踪一件事：一项用户操作如何从浏览器出发，经过源码、构建产物、运行时、后端状态和模型工具，最终得到可解释、可恢复的结果。
学完后，你应该具备什么能力
完成六个阶段后，你应当能够：
- 从页面现象出发，沿 DOM、样式、事件、网络、缓存和资源版本定位第一个错误事实。
- 解释框架在状态更新、服务端渲染、缓存和写入上的责任，不用框架名称代替架构判断。
- 从源码入口追到构建产物，验证模块解析、代码拆分、资源路径、Source Map 和发布顺序。
- 判断一段程序对运行时、权限、文件系统、网络和生命周期有哪些真实要求。
- 设计带契约、认证授权、幂等、事务、后台任务和观测能力的后端服务。
- 把模型接入检索与工具时，建立输入输出校验、权限边界、评测、追踪和人工审批。
路线的最终产物不是一份工具清单，而是一套可以迁移的排查与设计方法。遇到新框架、新运行时或新模型时，你仍能把它还原成输入、输出、状态、权限、成本和恢复路径。
开始前的基础
建议先具备常规前端开发经验，能独立完成页面、状态管理、接口联调和一次生产发布；熟悉现代 JavaScript、Promise、ES Modules、Git 与基本 TypeScript。后端和大模型经验不是前置条件，相关概念会在进入对应阶段时补齐。
如果 Web 基础已经比较扎实，可以从当前工作问题进入路线。不过，每个阶段的“总结”页仍值得保留，它负责把本阶段交给下一阶段。
六个阶段的主线
拖动画布移动，使用工具栏缩放或全屏查看。
| 阶段 | 核心问题 | 学习大纲 | 阶段交付 |
|---|---|---|---|
| Web 基础 | 浏览器如何把响应变成可操作页面 | HTML、CSS、JavaScript、TypeScript、Browser/Web APIs | 一个可访问、可搜索、能处理失败的静态知识浏览器 |
| 前端框架 | 状态、渲染和服务端职责如何组织 | React、Vue、Angular、Svelte、Next.js、Nuxt、SvelteKit、Astro | 用统一任务比较八种更新与交付模型 |
| 构建工具 | 源码如何成为可加载资源 | Babel、SWC、esbuild、webpack、Rspack、Vite、Rollup、Rolldown | 可检查模块图、chunk、资源路径和 Source Map 的产物 |
| JavaScript 运行时 | 产物进入宿主后如何执行 | Node.js、Deno、Bun、Edge Runtime | 一份带模块、权限、资源和生命周期条件的运行时决策 |
| 全栈后端 | 请求如何变成可信、持久的状态变化 | Node.js、Python、Go、Java、Rust 与统一 API 契约 | 可验证错误、并发、恢复和部署边界的服务方案 |
| Agent Developer | 模型如何安全地使用外部事实与工具 | LLM、结构化输出、RAG、Tool Calling、MCP、A2A、SDK、评测与安全 | 一个可评测、可追踪、可中断和可恢复的 Agent 应用 |
阶段之间怎样交接
从 Web 基础到前端框架
Web 基础先确定不可跳过的浏览器事实：语义、焦点、层叠、任务队列、请求取消、运行时数据验证、缓存和存储。框架阶段接过这些事实，安排组件边界、状态所有权、服务端读取与客户端接管。若一个问题还说不清是 DOM、HTTP 还是异步时序造成的，先不要急着增加框架抽象。
交接时至少保留一个能直接运行的页面，并记录它在无 JavaScript、慢网、空结果、请求失败、键盘操作和窄屏下的表现。
从前端框架到构建工具
框架源码最终会变成 HTML、JavaScript、CSS、Worker 和服务端入口。构建阶段不再争论组件写法，而是追踪这些入口怎样被解析、转换、分块和发布。框架阶段留下的路由、动态导入、服务端/客户端边界和缓存策略，正是构建阶段需要验证的输入。
交接物应包含源码入口、公开路径、目标浏览器或运行时、关键动态资源，以及一次完整的生产构建结果。
从构建工具到 JavaScript 运行时
构建器可以生成 ESM、CommonJS、浏览器资源或服务端 bundle，却不能保证目标宿主拥有相同的模块规则、文件系统、网络 API、原生扩展和进程生命周期。运行时阶段负责检查这些假设是否成立。
进入这一阶段时，带上真实产物和部署目标。只比较空脚本的启动时间，无法回答应用能否正确运行。
从运行时到全栈后端
后端框架建立在运行时提供的调度、网络、文件、权限和退出机制上。运行时选定后，后端阶段继续处理 API 契约、身份、事务、幂等、并发、任务和可观测性。这里的重点从“代码能否执行”转向“状态变化是否可信”。
交接时写清模块格式、权限、连接与线程模型、资源上限、关闭顺序和部署约束。后端设计不能默默假设进程永久存活或本地磁盘可写。
从全栈后端到 Agent Developer
Agent 使用的检索和工具，本质上是新的服务调用者。后端阶段已经确定的 Schema、授权、幂等、错误码、审计和任务状态，应直接成为 Agent 工具契约。模型不能绕过这些边界，也不应该直接承担事务与权限判断。
进入 Agent 阶段前，至少准备一个稳定的只读查询接口和一套离线测试数据。写操作等到审批、重试和恢复语义明确后再开放。
用同一个示例贯穿路线
仓库里的贯穿项目是“开发者知识与 Agent 助手”。它从技术目录页面开始，逐步增加框架实现、构建产物、运行时条件、后端 API 和 Agent 查询能力。共享数据位于 examples/contracts，各阶段不重复发明领域模型。
| 阅读位置 | 对应示例 | 建议先看的核心源码 |
|---|---|---|
| Web 基础 | 原生 Web 切片 | src/app.ts |
| 前端框架 | 八个框架切片 | 每篇文档“运行效果”右上角的“查看源码” |
| 构建工具 | 构建工具切片 | src/main.ts 与 scripts/build-all.mjs |
| JavaScript 运行时 | 文档中的最小运行样例 | 先追踪构建产物的模块与宿主假设，独立切片尚未建立 |
| 全栈后端 | 后端统一契约 | 当前为验收约定，语言实现按相同 OpenAPI 补入 |
| Agent Developer | Agent 助手约定 | 当前为能力与离线测试边界，后续复用同一查询契约 |
在线文档中的示例预览、独立运行页和核心源码使用同一个示例名称关联。预览加载失败时不会再显示文档站的 404 页，而会给出源码入口和明确错误提示。仓库级索引见 examples/README.md。
三种推荐读法
完整进阶适合希望系统转向全栈和 Agent 工程的读者，按六个阶段顺序推进。每个阶段先读导读，再选择专文，最后用 comparison 与 summary 完成比较和交接。
故障驱动适合正在解决线上问题的读者。页面语义、布局、请求与缓存从 Web 基础进入；状态更新、SSR 和水合进入前端框架；资源 404、chunk、HMR 与 Source Map 进入构建工具；进程退出、权限和宿主兼容进入运行时；事务、重复提交和任务恢复进入后端；检索质量、工具调用和提示注入进入 Agent 阶段。问题解决后，再回到前一阶段补上依赖。
选型驱动适合技术评审。先固定用户任务、部署环境、团队经验和不可妥协的约束，再阅读对应阶段的 comparison。任何结论都应注明版本、输入、测试环境、失败条件和回退办法。
每个阶段如何验收
不要用“文章读完了”作为完成标准。更可靠的验收方式是留下四类证据：
- 一张从用户操作到系统结果的路径图，能指出每一层的负责人。
- 一个可运行或可复现的最小示例，覆盖正常路径和至少一种失败路径。
- 一份带条件的技术判断，说明为什么选、何时失效、如何回退。
- 一段交接说明，写清下一阶段收到的源码、产物、契约、权限和运行条件。
走完整条路线后，尝试从“旧标签在新版本发布后打开详情时资源 404”或“Agent 重试导致同一写操作执行两次”这样的症状出发，画出完整调用链并找到第一个错误边界。如果只能说“框架有问题”或“模型不稳定”，说明对应阶段还没有真正完成。