全栈开发

前端三件套

网页开发的三大基石

HTML

内容与结构

骨架

divspanforminput

CSS

呈现与样式

外观

colorflexgridanimation

JavaScript

行为与交互

灵魂

事件DOM操作网络请求

前端框架演进

从 jquery 到现代框架

原生时代1990s

直接用代码操控页面元素，一切从零开始

HTMLCSSJavaScript

jquery 时代2006-2015

简化页面操控，跨浏览器兼容

jqueryBootstrap

MVVM 时代2010-2015

数据驱动视图，双向绑定

Angular.js

组件化时代2013-至今

声明式、组件化，框架自动更新页面

VueReactAngular

新时代2020-至今

编译时优化，更少运行时开销

SvelteSolid

框架的本质：解决 "数据变化后如何高效更新 UI" 的问题。现代框架让你只需关注 "数据是什么"，框架自动处理 "数据变化后 UI 怎么变"。

全栈领域

全栈知识地图—— 点击卡片查看各方向学习路线

前端基础

用户界面、交互体验、浏览器端的一切

HTML5CSS3JavaScriptTypeScriptES6Sass/LessPostCSSTailwind CSSUnocssCSS-in-JS

前端框架

构建用户界面的主流框架与库

ReactVueAngularSvelteSolid.jsQwikPreactEmber.js

前端工程化

构建、测试、规范、自动化——让代码从源码到上线

npm/pnpmVite/WebpackESM/CommonJSAMD/CMD/UMDVitestCI/CDESLint/PrettierMonorepo/Polyrepo

后端开发

服务端业务逻辑、API 设计与数据处理

Node.jsJavaGoPythonRustPHP

后端开发框架

各语言最流行的后端框架（每语言两个）

Node.js: Express / FastifyJava: Spring Boot / QuarkusGo: Gin / FiberPython: Django / FastAPIRust: Actix Web / AxumPHP: Laravel / Symfony

数据库与存储

数据的建模、持久化、缓存与文件存储

OracleMySQLSQL ServerPostgreSQLMongoDBRedisElasticsearchSQLiteMariaDBCassandra

跨端开发

一套技术栈，覆盖 Web、小程序、移动端、桌面端

小程序/Uni-appReact NativeFlutterElectron/TauriPWASwiftUI/Compose

全栈框架

前后端一体，SSR/SSG/API 一把梭

Next.js/ReactNuxt.js/VueRemix/ReactSvelteKit/SvelteAstroNest.js/Node.js

部署与运维

让应用稳定、安全、高性能地跑在线上

DockerNginxShellLinuxKubernetes云服务器Sentry/监控

服务器

国内主流云服务器提供商

阿里云华为云腾讯云天翼云移动云百度智能云京东云金山云

AI 编程助手

AI 编程助手与大模型应用开发

CursorClaude CodeGitHub CopilotQWenDeepSeekOpenAIPrompt Engineering

算法

数据结构与算法——程序员的底层内功

数组/链表栈/队列/堆哈希表树/图排序/二分查找贪心递归/回溯动态规划BFS/DFS双指针/滑动窗口

学习路径：① 前端基础 + 一个主流框架 → 能写页面 ② 补工程化（构建/测试/规范）→ 能交付 ③ 后端语言 + 框架 + 数据库 → 能写接口 ④ 全栈框架串联前后端 → 独立做项目 ⑤ 跨端 + 部署 + 服务器 → 能上线 ⑥ AI 编程助手贯穿全程 → 提效。

语言选择指南

根据目标选语言

前端

网页、小程序、H5

推荐：JavaScriptTypeScript

后端

API 服务、业务系统

推荐：Node.jsGoJavaPython

移动端

iOS / Android 应用

推荐：SwiftKotlinFlutter

AI / 数据科学

机器学习、数据分析

推荐：Python

系统编程

操作系统、嵌入式

推荐：CC++Rust

快速原型

脚本、自动化、小工具

推荐：PythonShell

💡 选择原则

没有"最好的语言"，只有"最适合场景的语言"，建议如下

1. 先学一门，学深：建立编程思维
2. 再学第二门，对比：理解语言设计差异
3. 按需学习：根据项目需求选择

全栈工程师

全栈工程师 = 能独立完成前端 + 后端开发的工程师 = 前后端通吃

全栈技能树前后端通吃的核心能力

前端能力

HTML/CSS

JavaScript

框架使用

响应式设计

全栈核心

HTTP 协议

Git 协作

调试能力

系统设计

后端能力

API 设计

数据库操作

业务逻辑

服务器部署

全栈不等于全部精通：核心是打通前后端，能独立完成一个完整功能，不需要在每个领域都达到专家级别。

1️⃣ 全栈的优势

优势	说明
独立交付项目	从需求分析到部署上线，一个人搞定全流程
沟通成本低	不需要前后端来回扯皮，减少信息折损和排期等待
问题定位快	出 Bug 能从浏览器→网络→服务→数据库全链路排查
技术视野广	理解整个系统如何运作，做技术选型时能站在全局视角决策
学习迁移快	掌握全链路后，学任何新技术都能快速理解它在链路上的位置
创业/副业友好	快速验证想法，MVP 开发，降低早期人力成本

✅ 全栈成长建议

第 1 阶段：建立根据地
└── 选一个方向深入（建议从前端或后端开始）
└── 达到能独立完成项目的水平

第 2 阶段：横向扩展
└── 学习另一个方向的基础
└── 能完成简单的全栈项目

第 3 阶段：融会贯通
└── 理解前后端如何协作
└── 能设计完整的技术架构

第 4 阶段：持续精进
└── 在某个领域保持深度
└── 其他领域保持"能用"水平

AI 算法工程师

AI 算法工程师 —— 让机器学会思考

AI 工程师 vs 传统开发

1️⃣ AI 工程师 vs 传统开发

AI 工程师 vs 传统工程师工作方式的差异

传统工程师

1理解需求

2查阅文档学习语法

3手写代码实现

4调试修复 Bug

5优化代码性能

6编写测试用例

编码时间占比60-70%

思考时间占比30-40%

VS

AI 工程师

1理解需求

2用自然语言描述给 AI

3审核 AI 生成的代码

4判断是否符合预期

5调整需求重新生成

6整合到项目中

编码时间占比20-30%

思考时间占比70-80%

能力重心转移

↓语法记忆重要性下降

↑需求描述能力重要性上升

↓手写代码速度重要性下降

↑代码审核能力重要性上升

↓查文档能力重要性下降

↑架构设计能力重要性上升

↓调试技巧重要性下降

↑问题定位能力重要性上升

AI 时代的核心竞争力：不是"会写代码"，而是"会描述需求、会判断对错、会设计方案"。AI 是你的编程助手，但决策者永远是你。

2️⃣ 对比

维度	传统开发	AI 算法工程师
核心任务	实现确定性的业务逻辑	训练模型、优化算法
思维方式	"如果 A 则执行 B"	"让机器从数据中学习规律"
代码产出	功能模块、系统	模型、训练脚本
调试方式	断点、日志	看指标、调超参
成功标准	功能正确、无 bug	准确率、召回率达标

AI 工程师的技能树

AI 工程师（2025）
  │
  ├── 基础能力
  │   ├── Python（主力语言）
  │   ├── 数据处理（Pandas, NumPy）
  │   └── 基本数学直觉（线性代数、概率统计）
  │
  ├── 大模型应用（最热门方向）
  │   ├── Prompt Engineering（提示词工程）
  │   ├── RAG（检索增强生成）
  │   ├── AI Agent（智能体，让 AI 自主完成任务）
  │   ├── Function Calling / MCP（让 AI 调用外部工具）
  │   └── 微调与部署（LoRA, vLLM）
  │
  ├── 生成式 AI（GenAI）
  │   ├── 文本生成（GPT, Claude, Gemini）
  │   ├── 图像生成（Stable Diffusion, Midjourney, FLUX）
  │   ├── 视频生成（Sora, Kling）
  │   └── 多模态（文本 + 图像 + 音频）
  │
  └── 传统机器学习（仍然重要）
      ├── 监督学习（分类、回归）
      ├── 深度学习框架（PyTorch）
      └── 模型评估与优化

Vibe Coding 时代的 AI 工程师

AI 辅助开发对 AI 工程师的影响

变化	说明
代码生成	AI 能生成训练脚本、数据处理代码
论文阅读	AI 能帮你总结论文要点
实验记录	AI 能帮你整理实验结果
不变的是	对问题的理解、对结果的判断、对方向的把握

从入门到精通

成长路线图

工程师成长路径从入门到精通的技能演进

🌱入门期0-1 年

学习基础语法和工具，能完成简单任务

核心技能：

一门语言基础Git 使用调试技巧阅读文档

典型产出：能独立完成小功能、修复简单 Bug

🌿成长期1-2 年

熟悉常用框架和最佳实践，能独立负责模块

核心技能：

框架熟练代码规范单元测试API 设计

典型产出：独立负责一个功能模块，代码质量稳定

🌳进阶期2-3 年

深入某个领域，开始有技术选型能力

核心技能：

领域深入性能优化架构设计技术选型

典型产出：主导技术方案设计，解决复杂问题

🌲成熟期3-5 年

全栈能力或领域专家，能带领小团队

核心技能：

全栈能力团队协作技术分享项目管理

典型产出：负责核心系统，指导新人成长

🏔️专家期5 年+

技术决策者，有行业影响力

核心技能：

技术战略团队建设行业洞察创新引领

典型产出：技术方向决策，培养技术团队

成长关键点：前 1-2 年打基础，建立独立完成任务的能力；2-3 年选方向，建立深度；3-5 年横向扩展，培养架构思维；5 年+ 技术决策与团队影响力。

各阶段能力要求

阶段	时间	核心能力	典型产出
入门	0-1 年	掌握一门语言 + 基础工具	能完成简单功能模块
进阶	1-2 年	熟悉一个技术栈 + 工程化	能独立完成中型项目
高级	2-3 年	深入一个领域 + 架构能力	能设计系统方案
资深	3-5 年	技术深度 + 业务理解 + 团队协作	能主导大型项目

Vibe Coding 时代的学习策略

Vibe Coding 学习策略AI 时代怎么学更高效

1

先理解，再让 AI 写

不要一上来就让 AI 写代码。先理解问题是什么，想清楚解决方案，再用 AI 加速实现。

2

把 AI 当编程伙伴

遇到不懂的概念，问 AI 解释。遇到复杂问题，和 AI 讨论方案。AI 是你的知识渊博的同事。

3

学会审核 AI 的输出

AI 生成的代码不一定对。你需要有能力判断：逻辑对不对？有没有安全隐患？性能如何？

4

建立自己的知识体系

AI 能帮你查漏补缺，但核心知识框架要自己建立。知道"有什么"，才能问出"怎么用"。

5

在实践中学习

做真实的项目，解决真实的问题。AI 帮你扫清语法障碍，你专注于解决业务问题。

核心原则：AI 是你的编程助手，但决策者永远是你。学会提问、学会判断、学会整合，比学会写代码更重要。

💡 核心建议

1. 基础比工具重要：语言特性、数据结构、算法思维是根基
2. 实践比理论重要：做项目是最好的学习方式
3. 思考比记忆重要：理解"为什么"比记住"怎么做"更有价值
4. AI 是工具不是拐杖：用 AI 加速学习，不要用 AI 替代思考

Vibe Coding 时代的核心竞争力

1️⃣ 全局认知

• 1. 领域划分：前端、后端、移动端、AI、运维、数据 —— 各有侧重
• 2. 技术选型：没有最好的技术，只有最适合场景的技术
• 3. 成长路径：先深后广，建立根据地再横向扩展
• 4. AI 时代：AI 能帮你写代码，但不能替你思考

2️⃣ Vibe Coding 时代的三层能力

┌─────────────────────────────────────────┐
│  第 3 层：判断力（AI 替代不了）           │
│  - 知道什么是对的                        │
│  - 知道什么是好的                        │
│  - 知道该往哪个方向走                    │
├─────────────────────────────────────────┤
│  第 2 层：架构思维（AI 辅助）             │
│  - 系统设计能力                          │
│  - 模块划分能力                          │
│  - 技术选型能力                          │
├─────────────────────────────────────────┤
│  第 1 层：代码实现（AI 擅长）             │
│  - 语法编写                              │
│  - API 调用                             │
│  - 常见模式实现                          │
└─────────────────────────────────────────┘

参考资料

• JavaScript 明星项目
• Vibe Coding 时代下的全栈开发
• Best of JS: ⭐ 这里汇集了构建出色 Web 应用程序所需的最佳组件。JavaScript 的精华！
• JavaScript 名人堂: 一些 JavaScript 社区中最杰出的开发者、作家和演讲者。
• Site Generators: Jamstack 网站的静态站点生成器列表