从屎山代码，聊聊前后端程序员的发展史以及未来

南山安
70 阅读8分钟

前言

最近在复习「前后端分离」这条路是怎么走出来的，顺手把前端后端一起学的代码翻了出来：有最原始的 Node + 模板字符串套 HTML，有 json-server 假接口，有原生 fetch 手写 DOM，也有 Vue3 那一套。看着这些文件，突然觉得它们就是一部浓缩的前后端发展简史。

今天就拿我自己的学习笔记和代码当素材，给大家捋一捋：从「后端说了算」到「前后端分离」再到「响应式驱动界面」，这二十年到底发生了什么。

一、 远古时代：后端全包（2005~2012 左右）

那时候根本没有「前端工程师」这个工种。

后端程序员写 PHP / Java / Node / Ruby，查完数据库，把数据塞进模板（PHP 里是 .php 文件，Java 是 JSP，Node 早期用的是 ejs/jade），最后 res.render('index', { users }) 直接吐一个完整的 HTML 给浏览器。

// server.js  —— 典型的「后端套模板」写法
const http = require('http')
const url = require('url')

const users = [ /* 假数据 */ ]

function generateUserHTML(users) {
  const userRows = users.map(user => `
    <tr>
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.email}</td>
    </tr>
  `).join('')

  return `

......

  <h1>Users</h1>
  <table>${userRows}</table>

`
}

const server = http.createServer((req, res) => {
  if (req.url === '/' || req.url === '/users') {
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end(generateUserHTML(users))   // ← 关键！后端直接返回完整 HTML
  }
})

server.listen(1314, () => console.log('Server running on 1314'))

这就是典型的 MVC 时代：

  • Model：users 数组（真实项目里是 MySQL 查询结果）
  • View：模板字符串
  • Controller：判断 req.url 然后渲染模板

优点：简单粗暴，上手快。

缺点：

  1. 前端想改个颜色都要改后端代码，找后端同学改模板。
  2. 页面稍微复杂一点，模板里就全是 if/else + for 循环，巨难维护。
  3. 想做个加载动画？对不起，页面是一次性吐完的，没机会。

所以前端同学忍无可忍，2010 年前后开始造反。

二、 前后端分离时代：Ajax 的逆袭（2012~2017）

jQuery 的 Ajax 火了，Backbone、AngularJS、React、Vue 陆续登场。

核心思想只有一句话：

后端只管吐 JSON，提供接口，前端自己拿数据去拼页面。



  fetch(&#34;http://localhost:3000/users&#34;)
    .then(res => res.json())
    .then(data => {
      const tbody = document.querySelector(&#34;tbody&#34;);
      tbody.innerHTML = data.map(user => `
        <tr>
          <td>${user.id}</td>
          <td>${user.name}</td>
          <td>${user.email}</td>
        </tr>
      `).join('');
    });

后端用 json-server（一个零配置的假接口工具）跑 db.json，只干一件事：

npm run dev
# => http://localhost:3000/users 直接返回 JSON

这时候前后端终于能并行开发了：

  • 后端同学：你们要什么字段？id、name、email？行，我 db.json 里写好，你们随便 fetch。
  • 前端同学：我只管页面好不好看，加载动画、交互、下拉刷新，随便搞。

这就是「前后端分离」真正的解放时刻。

但问题也来了：

  • 每次数据回来都要手动 innerHTML = ... 或者操作 DOM，代码里全是 document.querySelector。
  • 数据和视图完全是两套娃关系，改个字段名要改十几个文件。
  • 状态管理一团糟（全局变量、事件总线、localStorage……）

前端完全无法聚焦于业务中，于是前端又开始不满足了。

三、 响应式时代：让数据自己驱动界面（2018~至今）

Vue3、React Hooks、SolidJS、Svelte 几乎同时把一个理念推到极致：

你只管改数据，页面我来更新，不用你操心 DOM

我 App.vue 里只有不到 30 行代码，却把上面所有痛苦全解决了：



import { ref, onMounted } from 'vue'

const users = ref([])                    // ← 响应式数据

onMounted(() => {
  fetch('http://localhost:3000/users')
    .then(res => res.json())
    .then(data => users.value = data)    // ← 只改数据
})



  <table>
    <thead>......</thead>
    <tbody>
      <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </tbody>
  </table>

重点来了：

  • users 是 ref([]) 包裹的响应式对象
  • 我只在 users.value = data 这一行改数据
  • 模板里的 {{ user.name }} 和 v-for 自动更新，永远是最新的
  • 连 document.querySelector 都没出现一次！

这才是真正的「数据驱动视图」，而不是「手动操作 DOM」。

四、 对比一下三段代码的核心差异

时代server.js（后端渲染）index.html（fetch + DOM）App.vue（响应式）
数据来源后端直接塞进模板前端 fetch 回来前端 fetch 回来
视图更新方式后端一次性吐完整 HTML手动 innerHTML / appendChild改数据，框架自动 diff 更新
改个字段名改后端模板 + JS 两处改后端 + 前端 N 处 DOM 操作只改一处（data 的字段名）
开发体验前端完全依赖后端前后端解耦，但前端写一堆 DOM 操作前端只关心数据和模板，极度丝滑
适合场景传统企业后台、博客2015~2018 年大部分项目现代中大型前端项目（99% 的情况）

五、Vue 这类框架到底给我们带来了什么？

  1. 把「如何操作 DOM」这个底层问题彻底封装了 你再也不用关心「先删掉旧节点再插入新节点」这种细节。
  2. 真正实现了「数据驱动」 改数据 → 页面自动更新，这才是我们想要的开发体验。
  3. 组件化 + 单文件组件 一个 .vue 文件里 HTML、JS、CSS 全在一起，边界清晰，复用性极高。
  4. 状态管理成熟方案 Pinia / Redux / Zustand / Vuex，随便挑一个，都比自己用全局变量香。
  5. 生态繁荣 Vue Router、VueUse、ElementPlus、NaiveUI、Vitest……你想要的几乎都有。

六、为什么“聚焦业务 + 理解产品”成为未来刚需？

1) 技术门槛正在被 AI 拉平

  • 初级 CRUD 代码、API 调用、模板页面，AI 几乎能自动生成。
  • 企业不再缺“会写代码的人”，而是缺“知道该写什么代码的人”。

💡 未来招聘要求可能变成：
“熟练使用 AI 工具 + 深度理解金融风控业务 + 能与合规部门对齐需求”

2) 软件的价值不在“功能多”，而在“解决真问题”

  • 用户不关心你用了 React 还是 Vue，只关心“能不能 3 秒内完成支付”。
  • 企业不关心你架构多优雅，只关心“这个系统能否提升 10% 转化率”。

3) 技术与业务的边界正在模糊

  • 数据分析师要懂埋点逻辑（需和开发协作）
  • 运营要配置 AB 实验（需理解实验平台原理）
  • 程序员必须能听懂业务语言，才能设计出可落地的技术方案

1、未来程序员的核心能力模型（T 型进化）

维度过去（传统）未来（高价值）
技术深度精通某语言/框架掌握 AI 工具链 + 系统设计 + 性能调优
业务广度只看 PRD 写代码深入行业场景（如医疗、金融、制造）
产品思维“功能做完了”“用户用得爽吗？数据验证有效吗？”
协作方式等待需求主动参与需求定义，提出技术驱动的产品方案

✅ 未来的高价值程序员 = 技术专家 × 业务翻译官 × 产品共创者

2、具体发展方向（结合产品与业务）

方向 1)：垂直领域解决方案工程师

  • 特点：技术 + 行业知识双精通

  • 例子：

    • 懂电池管理算法的 Python 工程师（新能源车企开价 80 万+）
    • 熟悉医保结算规则的 Java 架构师（医疗信息化公司核心岗）

  • 行动建议：

    • 选一个行业深耕（如教育、物流、能源）
    • 学习该行业的术语、流程、痛点（比如读行业白皮书、参加展会）

方向 2)：AI 时代的“技术产品经理”

  • 特点：既能写 Prompt 调模型，又能设计 AI 产品流程

  • 例子：

    • 设计“智能客服工单自动分类”系统，需懂 NLP + 客服业务流
    • 构建“AI 辅助医生诊断”工具，需理解医学影像 + 模型部署

  • 行动建议：

    • 学习 Prompt Engineering、RAG、Agent 设计
    • 主动参与 AI 产品的需求评审，提出可行性方案

方向 3)：效能提升专家（Developer Experience）

  • 特点：用技术手段提升团队业务交付效率

  • 例子：

    • 搭建内部低代码平台，让运营人员自助生成活动页
    • 开发 AI 辅助测试工具，自动覆盖 80% 回归场景

  • 行动建议：

    • 关注团队瓶颈（如发布慢、联调难）
    • 用自动化、工具化解决重复劳动，释放人力聚焦高价值业务

方向 4)：技术创业者 / 独立开发者

  • 特点：自己发现业务机会，用技术快速验证

  • 例子：

    • 为本地餐馆开发“扫码点餐 + 库存联动”小程序
    • 用 LLM 微调打造垂直领域写作助手（如法律合同生成）

  • 行动建议：

    • 从小场景切入（MVP 思维）
    • 关注“是否有人愿意付费”，而非“技术是否酷炫”

写在最后

回头看我这几份代码，其实就是前端这十年一路走来的缩影：

  • 从「后端把 HTML 吐给我」
  • 到「后端给我 JSON，我自己拼」
  • 再到「我只改数据，你帮我更新页面」

每一次转变，本质上都是在把「如何操作 DOM」这个最麻烦、最容易出错、最不业务相关的事情，从程序员手里抢走，交给框架去做。

而我们，终于可以把精力真正放在业务逻辑、用户体验、交互细节上。

当 AI 能写出 90% 的代码时，剩下的 10% —— 那些决定“写什么”、“为谁写”、“如何验证有效”的思考 —— 才是人类程序员不可替代的价值。

未来的赢家，不是最会调参的人，而是最懂用户、最理解业务、最能用技术缝合现实裂缝的人。

这就是“聚焦业务、理解产品”的终极意义。

avatar
文章
阅读
粉丝