前端技术演化史

知识库使用说明

Properties1
tags附录, 使用说明, obsidian, 元文档

8分钟阅读

📚 知识库使用说明

这个知识库是什么

这不是一份”前端技术清单”,而是一部前端技术文明演化史。每一篇笔记都在回答四个问题:一项技术为什么出现 / 为什么流行 / 为什么衰落 / 下一代为什么能替代它。 笔记之间用 Obsidian 双链([[...]])织成一张因果网——你可以顺着任何一条线索一路读下去。

一、目录结构含义

目录含义你什么时候来这里
00-索引/总入口 MOC-前端技术演化史(Map of Content)第一次来,从这里开始
01-时代叙事/五篇主线叙事,按时间顺序讲完整故事想顺着历史从头读
02-技术专题/单项技术的深度笔记,按主题分子目录想钻研某一项技术
03-深度专题/争议性问题的独立论证(如”为什么 React 战胜 AngularJS”)想看”为什么”的硬核分析
04-图谱/因果图、时间线、元矛盾分析(本目录)想看大局、看技术之间的关系
99-附录/使用说明、术语表(本目录)查词、了解怎么用这个库

02-技术专题/ 下的子目录:浏览器 / JavaScript语言 / 框架 / 工程化 / 运行时 / 渲染模式 / 状态管理 / AI时代。每个子目录有一篇 XX演进史 总览,再加若干单项技术笔记。

二、三条阅读路径建议

按你的目的选一条

不同目的走不同的路,不要试图”从头到尾读完”。

🛤️ 主线:读时代叙事(推荐第一次通读)

从 MOC-前端技术演化史 出发,按时间顺序读完五篇时代叙事: 1995-2005 浏览器时代 → 2005-2013 Ajax时代 → 2013-2018 SPA时代 → 2018-2023 工程化时代 → 2023-未来 AI时代。 每篇结尾都有”上一篇 / 下一篇”链接,像读小说一样一路读下去。

🔍 支线:查技术专题(带着具体问题来)

想了解某项技术,直接进 02-技术专题/ 找对应笔记(如 React、Vite、TypeScript),或先读该领域的演进史总览(如 前端框架演进史、前端工程化演进史)建立框架,再下钻到单项。

🔬 争议线:看深度专题(想看硬核论证)

对”为什么”感兴趣,去 03-深度专题/:如 为什么React战胜了AngularJS、为什么Vite能取代Webpack、为什么pnpm解决了依赖问题、AI编程会让前端框架收敛吗。每篇是一个独立的论证,适合反复咀嚼。

想看大局?

先读 04-图谱/ 三件套:时间线总览(看节奏)→ 关系图谱-技术因果链(看关系)→ 演进逻辑-五个永恒矛盾(看底层逻辑)。这三篇能让你在 30 分钟内建立起整张地图。

三、双链如何工作

双链是这个知识库的”神经”。

  • 写法:[[笔记名]] 会渲染成一个可点击的链接,跳到同名笔记。如 jQuery、Webpack。
  • 别名链接:[[渲染模式演进史|SSR/SSG]] 会显示”SSR/SSG”,但点击跳到《渲染模式演进史》。
  • 反向链接(Backlinks):打开任意一篇笔记,Obsidian 右侧的 “Backlinks” 面板会列出所有提到这篇笔记的其他笔记。这是发现”谁引用了我”的关键——比如打开 React,能看到它被时代叙事、深度专题、图谱等多处引用。
  • 关系网:正因为每篇笔记都密集双链,整个库构成一张图——这正是 Graph View(见下)能可视化的东西。

阅读时的习惯

看到不懂的术语,先点 术语表 里的链接快速扫一眼定义,再决定要不要深入对应专题。

四、推荐安装的 Obsidian 插件

插件类型用途
Graph View核心(内置)可视化整个技术因果网,看哪些技术是”枢纽节点”
Backlinks核心(内置)看”谁引用了当前笔记”,发现隐藏关联
Outgoing Links核心(内置)看当前笔记链出到哪些笔记
Dataview社区插件用类 SQL 查询按 tags / era 等 frontmatter 字段动态生成列表/表格
Obsidian Mermaid(内置渲染)核心渲染本库 04-图谱/ 里的 Mermaid 因果图与时间线(无需额外安装)
Tag Wrangler社区插件管理与重命名标签(本库大量用 tags 分类)

Dataview 示例

安装 Dataview 后,可在任意笔记里写一段查询块,自动列出所有”框架”类笔记:

```dataview
LIST FROM #框架
```

或按时代字段筛选时代叙事:LIST WHERE era = "2013-2018"。

五、如何用 Graph View 看技术关系网

Graph View(左侧边栏的”图谱”图标,或 Ctrl/Cmd+G)把整个库画成一张点线图:每个点是一篇笔记,每条线是一个双链。这正好把本库的”技术因果网”可视化了。

三个实用技巧

  1. 找枢纽技术:连线最多的大节点,就是历史上的”枢纽技术”——大概率是 React、Webpack、Node.js。它们被引用得越多,说明影响越深远。
  2. 按 tag 上色:在 Graph View 设置里用 Groups 给不同 tags 上色(如”框架”红色、“工程化”蓝色、“AI时代”紫色),一眼看清各时代的版图与它们之间的连接。
  3. 用 Local Graph 顺藤摸瓜:打开某篇笔记(如 Vite),开启 “Local Graph” 只看它的直接邻居,然后逐层展开——这是顺着因果链探索的最佳方式,效果类似 关系图谱-技术因果链 的交互版。

Graph View vs 因果图

关系图谱-技术因果链 是人工梳理的、带因果标签的静态图(精确但需手绘);Graph View 是自动生成的、无方向的关系网(全面但无因果语义)。两者互补:看逻辑用前者,看全貌用后者。

🔗 相关:MOC-前端技术演化史 | 术语表 | 关系图谱-技术因果链 | 时间线总览 | 演进逻辑-五个永恒矛盾

关系图谱

反向链接