sanbuphy
3af119a598
- 新增 Vibe Coding 全栈相关演示组件 (DeveloperSkillShift, FrontendTriad, BackendCore 等) - 新增 RAG 相关组件 (RAGPipeline, ChunkingStrategy, Retrieval 等) - 新增 Embedding & Vector 相关组件 (EmbeddingConcept, VectorSimilarity 等) - 新增 AI Native App 设计组件 (AINativeArch, PromptDesign 等) - 新增 Infrastructure as Code 组件 (IaCConcept, TerraformWorkflow 等) - 新增 DNS & HTTPS 演示组件 (DnsResolution, HttpsHandshake 等) - 新增 Model Finetuning 组件 (FinetuningPipeline 等) - 更新多个章节的 markdown 内容，集成交互式演示
414 lines
14 KiB
Markdown
414 lines
14 KiB
Markdown
# Vibe Coding 时代下的全栈开发
|
||
|
||
::: tip 前言
|
||
**什么是 Vibe Coding？** 简单说，就是"用自然语言写代码"——你用中文或英文描述想要什么，AI 帮你生成代码。这彻底改变了软件开发的游戏规则。
|
||
|
||
但这里有个关键问题：**AI 能帮你写代码，但 AI 不能替你思考。** 你仍然需要知道"要写什么"、"为什么这么写"、"怎么判断对错"。这正是本章要帮你建立的基础认知框架。
|
||
:::
|
||
|
||
**这篇文章会带你学什么？**
|
||
|
||
学完这章后，你将获得：
|
||
|
||
- **领域全景认知**：知道前端、后端、AI 算法等方向分别做什么
|
||
- **技术选型能力**：面对"学什么语言/框架"时，能做出理性判断
|
||
- **成长路径清晰**：了解从零基础到 3-5 年经验工程师的技能演进
|
||
- **Vibe Coding 思维**：理解在 AI 辅助时代，哪些能力变得更重要
|
||
|
||
| 章节 | 内容 | 核心概念 |
|
||
|-----|------|---------|
|
||
| **第 1 章** | 计算机领域全景 | 前端、后端、移动端、AI、运维 |
|
||
| **第 2 章** | 什么是前端 | 用户能感知的界面层 |
|
||
| **第 3 章** | 什么是后端 | 幕后的服务器逻辑 |
|
||
| **第 4 章** | 编程语言图谱 | 与计算机沟通的工具 |
|
||
| **第 5 章** | 全栈工程师 | 前后端通吃的多面手 |
|
||
| **第 6 章** | AI 算法工程师 | 让机器学会思考 |
|
||
| **第 7 章** | 成长路径 | 从入门到精通的路线图 |
|
||
|
||
---
|
||
|
||
## 0. Vibe Coding：软件开发的新范式
|
||
|
||
### 0.1 什么是 Vibe Coding？
|
||
|
||
想象一下以前的软件开发：
|
||
|
||
```
|
||
传统开发流程：
|
||
你 → 学习语法 → 写代码 → 调试 → 查文档 → 修改 → 运行
|
||
↑___________________反复循环___________________↓
|
||
```
|
||
|
||
现在有了 AI 辅助：
|
||
|
||
```
|
||
Vibe Coding 流程：
|
||
你 → 用自然语言描述需求 → AI 生成代码 → 你审核修改 → 运行
|
||
↑____________快速迭代____________↓
|
||
```
|
||
|
||
**核心变化**：从"怎么写代码"变成"怎么描述需求"。
|
||
|
||
### 0.2 Vibe Coding 时代，什么能力更重要？
|
||
|
||
<DeveloperSkillShiftDemo />
|
||
|
||
::: tip 💡 关键洞察
|
||
AI 能帮你写代码，但以下能力 AI 替代不了：
|
||
- **判断力**：知道 AI 生成的代码对不对、好不好
|
||
- **架构思维**：知道系统该怎么设计、模块该怎么划分
|
||
- **领域知识**：理解业务逻辑，知道"要做什么"
|
||
- **调试能力**：出问题时知道从哪里排查
|
||
:::
|
||
|
||
---
|
||
|
||
## 1. 计算机领域全景图
|
||
|
||
在深入各个方向之前，先建立一个全局认知。
|
||
|
||
<ComputerFieldMapDemo />
|
||
|
||
### 1.1 用"餐厅"比喻理解各领域
|
||
|
||
把一个软件系统想象成一家**餐厅**：
|
||
|
||
| 领域 | 餐厅角色 | 做什么 | 产出物 |
|
||
|-----|---------|--------|--------|
|
||
| **前端** | 装修 + 菜单 + 服务员 | 用户能看到、能交互的一切 | 网页、小程序、App 界面 |
|
||
| **后端** | 厨房 + 仓库 | 处理业务逻辑、存储数据 | API、数据库、服务器程序 |
|
||
| **移动端** | 外卖窗口 | 手机上的应用体验 | iOS/Android App |
|
||
| **AI/算法** | 研发部 | 让系统变"聪明" | 推荐模型、图像识别、智能对话 |
|
||
| **运维/DevOps** | 物业 + 安保 | 保证系统稳定运行 | 部署脚本、监控系统、安全防护 |
|
||
| **数据工程** | 财务 + 分析师 | 数据采集、存储、分析 | 数据管道、报表、仪表盘 |
|
||
|
||
### 1.2 各领域的技术栈速览
|
||
|
||
不要被这些名词吓到，这里只是让你"见过"它们：
|
||
|
||
| 领域 | 核心语言 | 常用框架/工具 | 典型产出 |
|
||
|-----|---------|--------------|---------|
|
||
| 前端 | JavaScript, TypeScript | React, Vue, CSS | 网页、管理后台 |
|
||
| 后端 | Node.js, Go, Java, Python | Express, Gin, Spring | API 服务 |
|
||
| 移动端 | Swift, Kotlin, Dart | SwiftUI, Jetpack, Flutter | 手机 App |
|
||
| AI/算法 | Python | PyTorch, TensorFlow | 模型、算法 |
|
||
| 运维 | Shell, Python | Docker, Kubernetes | 部署方案 |
|
||
|
||
::: tip 💡 给新手的建议
|
||
不要试图一次学完所有东西。先选一个方向深入，建立"根据地"，再横向扩展。全栈不是"什么都懂一点"，而是"有一个核心强项，其他方向能用"。
|
||
:::
|
||
|
||
---
|
||
|
||
## 2. 什么是前端？
|
||
|
||
### 2.1 一句话定义
|
||
|
||
**前端 = 用户能直接看到、点击、交互的部分。**
|
||
|
||
当你打开一个网页：
|
||
- 页面的布局、颜色、字体 → 前端
|
||
- 点击按钮后的动画效果 → 前端
|
||
- 表单输入、数据展示 → 前端
|
||
- 页面怎么适配手机屏幕 → 前端
|
||
|
||
### 2.2 前端三件套
|
||
|
||
<FrontendTriadDemo />
|
||
|
||
**用"装修房子"来比喻**：
|
||
|
||
| 技术 | 装修角色 | 职责 |
|
||
|-----|---------|------|
|
||
| **HTML** | 房屋结构 | 墙在哪、门在哪、房间怎么划分 |
|
||
| **CSS** | 装饰风格 | 墙什么颜色、家具怎么摆、灯光效果 |
|
||
| **JavaScript** | 智能家居 | 开关灯、窗帘自动开合、安防系统 |
|
||
|
||
### 2.3 前端框架：为什么要用？
|
||
|
||
原生 HTML/CSS/JS 能写网页，为什么还要学 React、Vue 这些框架？
|
||
|
||
<FrontendFrameworkDemo />
|
||
|
||
**核心原因**：当页面变得复杂（比如淘宝、微信网页版），直接操作 DOM 会变得非常混乱。框架帮你"管理复杂性"。
|
||
|
||
### 2.4 前端工程师的一天
|
||
|
||
```
|
||
9:00 查看设计稿，理解要做什么功能
|
||
10:00 用 React/Vue 写组件代码
|
||
12:00 午休
|
||
14:00 和后端对接 API，调试数据展示
|
||
16:00 修复 bug，优化页面性能
|
||
18:00 代码评审，和团队讨论技术方案
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 什么是后端？
|
||
|
||
### 3.1 一句话定义
|
||
|
||
**后端 = 用户看不到，但支撑整个系统运转的逻辑。**
|
||
|
||
当你网购下单：
|
||
- 验证你的账号密码 → 后端
|
||
- 检查商品库存 → 后端
|
||
- 计算优惠价格 → 后端
|
||
- 生成订单、扣款 → 后端
|
||
- 通知仓库发货 → 后端
|
||
|
||
### 3.2 后端的核心职责
|
||
|
||
<BackendCoreDemo />
|
||
|
||
**用"餐厅厨房"来比喻**：
|
||
|
||
| 后端职责 | 厨房类比 | 具体内容 |
|
||
|---------|---------|---------|
|
||
| **API 设计** | 菜单设计 | 定义"用户能点什么菜"、"怎么点" |
|
||
| **业务逻辑** | 烹饪过程 | 处理订单、计算价格、验证权限 |
|
||
| **数据存储** | 仓库管理 | 把数据存进数据库、查询数据 |
|
||
| **性能优化** | 厨房效率 | 缓存、异步处理、负载均衡 |
|
||
| **安全防护** | 食品安全 | 防止 SQL 注入、权限控制 |
|
||
|
||
### 3.3 后端语言怎么选？
|
||
|
||
| 语言 | 特点 | 适合场景 |
|
||
|-----|------|---------|
|
||
| **Node.js** | 前端友好，JavaScript 全栈 | 中小型项目、快速原型 |
|
||
| **Go** | 高性能、并发强 | 高并发服务、微服务架构 |
|
||
| **Java** | 生态成熟、企业级 | 大型企业系统、银行 |
|
||
| **Python** | 简洁、AI 生态好 | 数据处理、AI 服务 |
|
||
|
||
::: tip 💡 新手建议
|
||
如果你已经会 JavaScript（前端基础），Node.js 是最自然的后端入门选择。一套语言，前后端都能写。
|
||
:::
|
||
|
||
### 3.4 后端工程师的一天
|
||
|
||
```
|
||
9:00 查看 API 需求文档
|
||
10:00 设计数据库表结构
|
||
11:00 写 API 接口代码
|
||
14:00 和前端联调，修复接口问题
|
||
16:00 优化慢查询，处理线上问题
|
||
18:00 代码评审，写技术文档
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 编程语言图谱
|
||
|
||
### 4.1 编程语言是什么？
|
||
|
||
**编程语言 = 人类和计算机沟通的桥梁。**
|
||
|
||
计算机只认识 0 和 1，人类习惯说自然语言。编程语言是中间层：
|
||
- 人类用编程语言写代码（比 0/1 好理解）
|
||
- 计算机把编程语言翻译成机器指令
|
||
|
||
### 4.2 语言分类
|
||
|
||
<ProgrammingLanguageMapDemo />
|
||
|
||
**按运行方式分类**：
|
||
|
||
| 类型 | 原理 | 代表语言 | 特点 |
|
||
|-----|------|---------|------|
|
||
| **编译型** | 先翻译成机器码，再运行 | C, C++, Go, Rust | 运行快，编译慢 |
|
||
| **解释型** | 边翻译边运行 | Python, JavaScript, Ruby | 开发快，运行慢 |
|
||
| **字节码型** | 折中方案 | Java, Kotlin, C# | 平衡性能和开发效率 |
|
||
|
||
**按类型系统分类**：
|
||
|
||
| 类型 | 特点 | 代表语言 |
|
||
|-----|------|---------|
|
||
| **静态类型** | 变量类型写代码时确定 | Java, TypeScript, Go |
|
||
| **动态类型** | 变量类型运行时确定 | Python, JavaScript, Ruby |
|
||
| **强类型** | 类型检查严格，不自动转换 | Python, Java |
|
||
| **弱类型** | 类型检查宽松，会自动转换 | JavaScript, PHP |
|
||
|
||
### 4.3 该学哪门语言？
|
||
|
||
<LanguageSelectionDemo />
|
||
|
||
::: tip 💡 选择原则
|
||
没有"最好的语言"，只有"最适合场景的语言"。新手建议：
|
||
1. **先学一门，学深**：建立编程思维
|
||
2. **再学第二门，对比**：理解语言设计差异
|
||
3. **按需学习**：根据项目需求选择
|
||
:::
|
||
|
||
---
|
||
|
||
## 5. 全栈工程师：前后端通吃
|
||
|
||
### 5.1 什么是全栈？
|
||
|
||
**全栈工程师 = 能独立完成前端 + 后端开发的工程师。**
|
||
|
||
<FullstackSkillDemo />
|
||
|
||
### 5.2 全栈的优势
|
||
|
||
| 优势 | 说明 |
|
||
|-----|------|
|
||
| **独立完成项目** | 从需求到上线，一个人搞定 |
|
||
| **沟通成本低** | 不需要前后端来回扯皮 |
|
||
| **技术视野广** | 理解整个系统如何运作 |
|
||
| **创业友好** | 快速验证想法，MVP 开发 |
|
||
|
||
### 5.3 全栈的挑战
|
||
|
||
| 挑战 | 说明 |
|
||
|-----|------|
|
||
| **深度 vs 广度** | 容易"什么都懂一点，什么都不精" |
|
||
| **技术更新快** | 前后端技术都在快速演进 |
|
||
| **精力分散** | 需要同时关注多个领域 |
|
||
|
||
### 5.4 全栈成长建议
|
||
|
||
```
|
||
第 1 阶段：建立根据地
|
||
└── 选一个方向深入（建议从前端或后端开始）
|
||
└── 达到能独立完成项目的水平
|
||
|
||
第 2 阶段：横向扩展
|
||
└── 学习另一个方向的基础
|
||
└── 能完成简单的全栈项目
|
||
|
||
第 3 阶段：融会贯通
|
||
└── 理解前后端如何协作
|
||
└── 能设计完整的技术架构
|
||
|
||
第 4 阶段：持续精进
|
||
└── 在某个领域保持深度
|
||
└── 其他领域保持"能用"水平
|
||
```
|
||
|
||
---
|
||
|
||
## 6. AI 算法工程师：让机器学会思考
|
||
|
||
### 6.1 AI 工程师 vs 传统开发
|
||
|
||
<AIvsTraditionalDemo />
|
||
|
||
| 维度 | 传统开发 | AI 算法工程师 |
|
||
|-----|---------|--------------|
|
||
| **核心任务** | 实现确定性的业务逻辑 | 训练模型、优化算法 |
|
||
| **思维方式** | "如果 A 则执行 B" | "让机器从数据中学习规律" |
|
||
| **代码产出** | 功能模块、系统 | 模型、训练脚本 |
|
||
| **调试方式** | 断点、日志 | 看指标、调超参 |
|
||
| **成功标准** | 功能正确、无 bug | 准确率、召回率达标 |
|
||
|
||
### 6.2 AI 工程师的技能树
|
||
|
||
```
|
||
AI 算法工程师
|
||
│
|
||
├── 数学基础
|
||
│ ├── 线性代数（矩阵运算）
|
||
│ ├── 概率统计（分布、期望）
|
||
│ └── 微积分（梯度、优化）
|
||
│
|
||
├── 编程能力
|
||
│ ├── Python（主力语言）
|
||
│ ├── PyTorch / TensorFlow（深度学习框架）
|
||
│ └── 数据处理（Pandas, NumPy）
|
||
│
|
||
├── 机器学习
|
||
│ ├── 监督学习（分类、回归）
|
||
│ ├── 无监督学习（聚类、降维）
|
||
│ └── 模型评估方法
|
||
│
|
||
└── 深度学习
|
||
├── 神经网络基础
|
||
├── CNN（图像）
|
||
├── RNN / Transformer（序列）
|
||
└── 大模型（LLM）
|
||
```
|
||
|
||
### 6.3 AI 工程师的一天
|
||
|
||
```
|
||
9:00 查看模型训练结果，分析指标
|
||
10:00 数据预处理，清洗训练数据
|
||
12:00 午休
|
||
14:00 调整模型结构，尝试新方案
|
||
16:00 跑实验，对比不同方案效果
|
||
18:00 写实验报告，和团队讨论下一步
|
||
```
|
||
|
||
### 6.4 Vibe Coding 时代的 AI 工程师
|
||
|
||
AI 辅助开发对 AI 工程师的影响：
|
||
|
||
| 变化 | 说明 |
|
||
|-----|------|
|
||
| **代码生成** | AI 能生成训练脚本、数据处理代码 |
|
||
| **论文阅读** | AI 能帮你总结论文要点 |
|
||
| **实验记录** | AI 能帮你整理实验结果 |
|
||
| **不变的是** | 对问题的理解、对结果的判断、对方向的把握 |
|
||
|
||
---
|
||
|
||
## 7. 成长路径：从入门到精通
|
||
|
||
### 7.1 3-5 年成长路线图
|
||
|
||
<CareerPathDemo />
|
||
|
||
### 7.2 各阶段能力要求
|
||
|
||
| 阶段 | 时间 | 核心能力 | 典型产出 |
|
||
|-----|------|---------|---------|
|
||
| **入门** | 0-1 年 | 掌握一门语言 + 基础工具 | 能完成简单功能模块 |
|
||
| **进阶** | 1-2 年 | 熟悉一个技术栈 + 工程化 | 能独立完成中型项目 |
|
||
| **高级** | 2-3 年 | 深入一个领域 + 架构能力 | 能设计系统方案 |
|
||
| **资深** | 3-5 年 | 技术深度 + 业务理解 + 团队协作 | 能主导大型项目 |
|
||
|
||
### 7.3 Vibe Coding 时代的学习策略
|
||
|
||
<LearningStrategyDemo />
|
||
|
||
::: tip 💡 核心建议
|
||
1. **基础比工具重要**：语言特性、数据结构、算法思维是根基
|
||
2. **实践比理论重要**：做项目是最好的学习方式
|
||
3. **思考比记忆重要**：理解"为什么"比记住"怎么做"更有价值
|
||
4. **AI 是工具不是拐杖**：用 AI 加速学习，不要用 AI 替代思考
|
||
:::
|
||
|
||
---
|
||
|
||
## 8. 总结：Vibe Coding 时代的核心竞争力
|
||
|
||
回顾本章，我们建立了计算机领域的全局认知：
|
||
|
||
1. **领域划分**：前端、后端、移动端、AI、运维、数据——各有侧重
|
||
2. **技术选型**：没有最好的技术，只有最适合场景的技术
|
||
3. **成长路径**：先深后广，建立根据地再横向扩展
|
||
4. **AI 时代**：AI 能帮你写代码，但不能替你思考
|
||
|
||
### Vibe Coding 时代的三层能力
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 第 3 层：判断力（AI 替代不了） │
|
||
│ - 知道什么是对的 │
|
||
│ - 知道什么是好的 │
|
||
│ - 知道该往哪个方向走 │
|
||
├─────────────────────────────────────────┤
|
||
│ 第 2 层：架构思维（AI 辅助） │
|
||
│ - 系统设计能力 │
|
||
│ - 模块划分能力 │
|
||
│ - 技术选型能力 │
|
||
├─────────────────────────────────────────┤
|
||
│ 第 1 层：代码实现（AI 擅长） │
|
||
│ - 语法编写 │
|
||
│ - API 调用 │
|
||
│ - 常见模式实现 │
|
||
└─────────────────────────────────────────┘
|
||
```
|