01 / 10｜一张图看懂现代 Web 开发
微信 / 朋友圈贴图文案
AI 写代码越来越快，但现代 Web 开发真正难的，已经不是“语法怎么写”。
而是先搞清楚：
浏览器负责什么？
Web / BFF 负责什么？
后端服务负责什么？
数据库又应该承担什么？
我把现代 Web 开发拆成了五层：
Browser → Web/BFF → Service → Data → Runtime
以后再看到 React、Next.js、Go、PostgreSQL、Docker、Kubernetes，就不会觉得它们是一堆零散技术。
先看边界，再选工具，最后让 AI 加速实现。
工程决策画布 01 / 10
小红书
标题：
AI 都能写代码了，为什么还要学 Web 开发基础？
正文：
最近越来越强烈的一个感觉：
AI 时代真正拉开工程能力差距的，不是“谁会写更多代码”。
而是谁能判断：
- 这段代码应该运行在哪里？
- 是 Browser、Edge 还是 Server？
- UI 和业务逻辑怎么分？
- 数据到底归谁？
- 哪一层应该做缓存？
- 哪一层应该鉴权？
- 出问题去哪里查？
所以我重新整理了一套：
《AI 时代需要掌握的开发基础知识》
第一张先不讲具体框架。
先把整个现代 Web 技术地图展开：
浏览器 → Web/BFF → Go 服务 → PostgreSQL/Redis → 容器/云
技术其实没那么乱。
很多所谓“全栈复杂度”，本质上只是没有先把层次和边界理清楚。
我的原则：
先看边界，再选工具，最后让 AI 加速实现。
建议保存原图慢慢看。
X
AI can write code.
But it still helps enormously if you know where that code belongs.
Modern Web development, simplified:
Browser
→ Web / BFF
→ Services
→ Data
→ Runtime
Before choosing React, Next.js, Go, PostgreSQL or Kubernetes, ask:
Where does it run?
When does it run?
Who owns the data?
Engineering Decision Canvas 01/10.
AI is dramatically reducing the cost of writing code.
But it is not reducing the importance of understanding system boundaries.
A useful mental model for modern Web development is:
Browser → Web/BFF → Service → Data → Runtime
React, Next.js, Go, PostgreSQL, Redis, Docker and Kubernetes are not competing technologies. They solve problems at different layers.
Before selecting a tool, I increasingly ask three questions:
Where does it run?
When does it run?
Who owns the data?
Once those boundaries are clear, AI becomes much more useful as an implementation accelerator.
Engineering Decision Canvas — 01/10
