前端技术演化史

图谱 · 框架血缘谱系

Properties1
tags图谱, mermaid, 血缘, 框架, frontend, history

8分钟阅读

🧬 图谱 · 框架血缘谱系

这张图在说什么

前面的图讲”谁催生了谁""谁取代了谁”——那是市场关系。这张图换一个全新视角,讲思想关系:谁受谁启发、谁借鉴了谁的什么思想。 框架之间真正的传承不是代码,而是设计理念:MVC、双向绑定、虚拟 DOM、单向数据流、响应式、编译时、信号(signals)……这些思想在框架之间不断被借用、改造、反思。顺着边标签读,你会看到一条思想的河流。

怎么看

  • 节点 = 一个框架(或一个思想里程碑),括注大致年份。
  • 箭头方向 = 思想流动方向(A 启发了 B),不等于时间先后也不等于市场取代。
  • 边标签 = B 从 A 借鉴了什么思想,这才是血缘的实质。
  • 注意末尾几条边都汇向同一个节点 signals——那是当代的”殊途同归”。

一、框架思想血缘谱系图

graph TD
    jquery["jQuery 2006<br/>命令式起点"]
    backbone["Backbone 2010<br/>前端 MVC"]
    knockout["Knockout 2010<br/>MVVM 先驱"]
    angularjs["AngularJS 2010<br/>双向绑定"]
    react["React 2013<br/>虚拟 DOM + 单向数据流"]
    vue["Vue 2014<br/>响应式 + 组件化"]
    angular["Angular 2+ 2016<br/>重写"]
    svelte["Svelte 2016<br/>编译时"]
    solid["Solid 2021<br/>细粒度响应式"]
    signals["Signals 收敛 2023+<br/>殊途同归"]

    serverMVC["后端 MVC<br/>(Rails 等)"]
    mvvm["MVVM / WPF<br/>(微软)"]
    elm["Elm / 函数式<br/>(FP)"]
    rxjs["RxJS<br/>(响应式流)"]

    serverMVC -->|"启发: 把 MVC 引入前端"| backbone
    mvvm -->|"启发: 视图与模型双向绑定"| angularjs
    mvvm -->|"启发: MVVM 数据绑定模式"| knockout

    jquery -->|"反思: 命令式 DOM 不可维护"| react
    backbone -->|"反思: 手写视图更新太繁琐"| react
    elm -->|"启发: 单向数据流 + 不可变 + UI=f(state)"| react

    angularjs -->|"借鉴: 模板内数据绑定指令"| vue
    react -->|"借鉴: 组件化 + 虚拟 DOM"| vue
    knockout -->|"借鉴: 依赖追踪式响应式"| vue

    react -->|"借鉴: 组件化思想"| angular
    rxjs -->|"借鉴: 响应式编程模型"| angular

    react -->|"反思: 虚拟 DOM 有运行时开销"| svelte
    react -->|"借鉴: JSX 写法"| solid
    knockout -->|"思想延续: 细粒度依赖追踪"| solid

    vue -->|"汇流: ref 响应式"| signals
    solid -->|"汇流: signal 细粒度更新"| signals
    angular -->|"汇流: Angular signals"| signals
    svelte -->|"汇流: Svelte 5 runes"| signals

    classDef root fill:#fff3e0,stroke:#e65100;
    classDef conv fill:#f3e5f5,stroke:#7b1fa2;
    class serverMVC,mvvm,elm,rxjs root;
    class signals conv;

几条血缘主线

MVC/MVVM 入场线:前端最早的架构思想是借来的。Backbone 把后端的 MVC 搬进浏览器;AngularJS 和 Knockout 则把微软 WPF 时代的 MVVM / 双向绑定带进来。前端框架的”出身”其实是后端和桌面端的思想移民。

React 的反叛线:React 几乎是对前一代的集体反思——它不信任 jQuery 的命令式 DOM、不满 Backbone 的手写视图更新,转而从 Elm / 函数式那里取来”单向数据流 + 不可变 + UI=f(state)”。虚拟 DOM 是这套理念的工程化落地。

Vue 的杂交优势线:Vue 是一次成功的思想杂交——模板里取 AngularJS 的数据绑定指令,组件模型取 React 的组件化 + 虚拟 DOM,而它的响应式内核(依赖追踪)血缘上更接近 Knockout / MobX 那一脉。它不是某一家的子嗣,而是把三家的优点重组。

编译时与细粒度线:Svelte 反思”虚拟 DOM 的运行时开销究竟值不值”,干脆把框架挪到编译期;Solid 则保留 React 式的 JSX 写法,但底层换成 Knockout 一脉的细粒度依赖追踪(signals),做到”无虚拟 DOM 的精准更新”。

二、当代趋势 · 信号(signals)的收敛

殊途同归

看图最右边:Vue 的 ref、Solid 的 signal、Angular 的 signals、Svelte 5 的 runes——四个出身完全不同的框架,在 2023 年之后不约而同地收敛到同一种响应式原语:信号(signal)。

这是血缘谱系里最值得玩味的现象。这些框架当年从不同的思想源头出发(MVVM、函数式、RxJS、编译时),走了十年完全不同的路,却在响应式这件事上得出了几乎相同的答案:用细粒度的、可订阅的信号单元来追踪依赖、精准更新。

为什么会收敛?

因为它们面对的是同一个本质约束:如何用最小的代价,把”状态变化”精确地映射到”视图更新”。虚拟 DOM 是一种答案(整体 diff),signals 是另一种答案(细粒度追踪)。当虚拟 DOM 的运行时成本被反复审视后,signals 这条原本属于 Knockout / MobX 的小众路线,反而成了各大框架的共同归宿。

这种收敛是否预示着框架层面更大尺度的趋同?当 AI 编程把”写框架代码”这件事本身也抽象掉之后,框架之间的差异还重要吗?这个问题留给深度专题 AI编程会让前端框架收敛吗 展开。

一句话总结这张图

没有一个框架是原创的孤岛——它们都是思想的杂交体。 前端框架的历史,本质是 MVC、MVVM、函数式、响应式这几股思想在不同时代、不同约束下反复重组的历史;而 signals 的收敛,正是这场重组在当下达到的一个新的共识点。

🔗 相关:MOC-前端技术演化史 | 关系图谱-技术因果链 | 图谱-主题分线图 | 图谱-竞争与替代关系 | 时间线总览 | 演进逻辑-五个永恒矛盾 🔗 深度专题:AI编程会让前端框架收敛吗 | 为什么React战胜了AngularJS 🔗 关键技术:jQuery | Backbone | AngularJS | React | Vue | Angular-2+ | Svelte | 前端框架演进史

关系图谱

反向链接