桌面软件复刻工程：纯前端重型应用实战

教程总纲 · 桌面软件复刻工程：纯前端重型应用实战

讲什么、怎么学、怎么跳读，一页说清。本书用纯 Web 技术在浏览器里造桌面级软件：五条项目线各产出一个能跑的 mini 成品，五大方法论支柱贯穿始终。

一、这本书讲什么

一句话：把桌面软件的本体逻辑搬进浏览器，从零复刻它的核心体验。

展开成三句：

1. 五条项目线，五个成品——mini 白板（第 0304 章）、mini 表格（第 0506 章）、mini 画图（第 07 章）、mini 桌面（第 08 章）、mini IDE（第 09 章），每个都从空文件写到可运行，再与标杆开源项目（Excalidraw、Univer、jspaint、daedalOS、Monaco 等）逐层对照。
2. 五大支柱，一套方法——渲染层选型、命令架构与桌面级交互、性能工程、数据模型与协同、持久化与格式兼容。支柱不是章节装饰，而是每条项目线都要回答的五道题。
3. 一条路线选择——纯前端复刻，而不是远程串流（code-server 类）。计算在浏览器里完成，零后端可用，离线可跑；难，但桌面感的每一分都是自己挣的。

三条贯穿主线（从任何一章进去都能沿着它走完全书）：

• 渲染主线：第 02 章立三范式 → 第 03、05 章 Canvas 两度实战 → 第 09 章 Monaco 的 DOM 虚拟化回马枪。
• 命令主线：第 1.2 节立骨 → 第 03 章状态机 → 第 5.2 节命令栈 → 第 09 章命令面板。
• 持久主线：第 4.2 节 IndexedDB 起步 → 第 11 章存储三层选型与许可证地图收口。

二、全书地图

方法论支柱（纵） × 项目线（横）  ●=深讲  ○=涉及  —=不展开

                  白板线    表格线    图像线    桌面线    IDE线      支柱主场
                  第 03~04 章 第 05~06 章 第 07 章   第 08 章   第 09 章
渲染层选型          ●        ●        ●        ○        ●        第 02 章三范式
命令架构与桌面交互   ●        ●        ●        ●        ●        第 01 章立骨
性能工程            ○        ●        ●        ○        ●        第 10 章集中
数据模型与协同      ●        ●        ○        —        ○        第 04 章 CRDT（OT 见 4.1）
持久化与格式兼容    ●        ●        ○        ●        ○        第 11 章收口
​

复刻一个软件的完整回路：界面解剖 ──▶ 数据模型 ──▶ 性能预算 ──▶ 渲染层选型 ──▶ 命令与交互 ──▶ 协同与本地优先 ──▶ 持久化与格式 ──▶ 性能回归。第 01 章立起回路，第 0309 章在五条项目线上各跑一遍，第 1011 章收口。

这张矩阵的用法：定位任何一章，横看它在五条项目线里练了什么，纵看它为哪个支柱服务；想补哪块短板，就顺着那一行找主场章。

三、逐章简介

第 00 章 导览：浏览器补齐了哪些桌面能力（渲染、计算、存储、多线程、文件系统）；纯前端复刻与远程串流两条路线的分野；「重型前端」的定义与门槛；五大支柱与全书矩阵；三条阅读路径。

第 01 章 复刻方法论：复刻从解剖开始而不是从编码开始。以「画图」为示范走完三张清单——界面解剖图、交互清单、功能依赖图；再定文档模型（形状/单元格/图层）、工具状态机与命令模式（桌面感的本质来源）；最后从目标帧率倒推每帧预算，拿到「该换渲染层了」的信号清单。

第 02 章 渲染层三范式：DOM 是保留模式，虚拟化是它的极限用法（窗口化算法、react-window 与 tanstack virtual、Monaco 教科书）；Canvas 是立即模式，思路从「改节点」变成「每帧重画」（raf 循环、脏矩形，Excalidraw 与 Univer 均此路线）；WebGL/WebGPU 只在百万级图元时才需要，xterm.js 的 DOM/Canvas/WebGL 三后端可切换架构是降级策略的工程范本。

第 03 章 无限画布I（白板·上）：从空文件造 mini 白板。渲染循环与视口变换（场景坐标与屏幕坐标互算、以指针为锚的缩放）；命中检测与选区（包围盒、逆矩阵、八手柄）；事件系统与工具状态机（指针统一入口、状态转移表，参照 Excalidraw 的做法）。到本章结束，白板能画、能选、能拖、能缩放。

第 04 章 无限画布II（白板·下）：给白板两件成年礼。Yjs 与 CRDT——无中心合并的直觉、文档结构与更新流、把形状接进 Yjs 的代码骨架；本地优先与 IndexedDB——自动保存、恢复、把「离线」视为只有一个参与者的协同；tldraw 对照与许可证——signals 内核、ShapeUtil、自托管 sync，以及必须显式标注的事实：tldraw 开发免费、生产需 license key；Excalidraw 为 MIT。

第 05 章 表格I（表格·上）：数量级压力骤增。为什么表格不用 DOM（百万格的可视区计算、行列表头钉住、四象限滚动合成）；命令系统与撤销（execute/undo 数据化、命令栈、批量命令，Univer 的命令系统参照，协同伏笔）；Univer 架构剖析（DI 容器 + 插件化 + RxJS，重型应用为什么需要 IoC，Luckysheet 到 Univer 的重写演进与架构债教训）。

第 06 章 表格II（表格·下）：公式引擎把表格从画布变成计算机——词法与语法解析、抽象语法树、单元格依赖图、Kahn 拓扑排序与循环引用检测，Univer 的函数库组织方式参照。虚拟滚动与百万行：不等高行定位、绝对坐标法、glide-data-grid 剖析要点。大数据量的交互保持：选区与填充柄的视口化、增量计算与缓存、成熟虚拟化库与手写的取舍。

第 07 章 图像编辑器：jspaint 与工具状态机——三层结构、状态机转移图、撤销栈、剪贴板兼容（jspaint 约 7.9k stars，MS Paint 像素级复刻）；图层合成管线——图层模型、合成顺序与离屏 Canvas、混合模式，miniPaint 参照（约 3.5k stars，图层式）；Worker 滤镜与内存——滤镜为什么要进 Worker、分帧与进度回传、大图内存管理，pdf.js 任务队列参照。

第 08 章 桌面环境：网页里的操作系统桌面。窗口管理器——焦点与 Z 序、拖拽缩放的指针数学、最大化最小化状态管理，daedalOS 参照（约 13k stars，React + Redux + 自研窗口管理器，集成 xterm.js 终端）；虚拟文件系统——内存树与 IndexedDB 持久化、路径解析；应用生命周期与趣味对照——注册、启动、挂起、恢复的资源语义，win11React（约 9.7k stars）与 98.js 的趣味对照，以及复刻的法律边界。

第 09 章 IDE复刻：Monaco 集成与走读——npm 嵌入与 Worker 配置、视图层 DOM 虚拟化走读（Monaco 约 47k stars，自研视图层是 DOM 虚拟化教科书）、语言服务 Worker 化，衔接《build-your-own-x》第 05 章《造文本编辑器》；mini-WebIDE——单页拼装、xterm.js 三渲染后端（约 21k stars，VS Code 同款）、命令面板；两条路线与 WebContainers——纯前端复刻与远程串流（code-server 约 80k stars、Theia 约 22k stars）的最终对照，WebContainers（Node 工具链编译为 WASM 在浏览器跑构建）前沿一瞥。

第 10 章 性能工程：把第 1.3 节的预算纪律变成长期方法。Worker 任务队列——队列设计四能力、pdf.js 队列参照、SharedWorker 与多标签页；WASM 重计算——上 WASM 的判断标准、Graphite（约 28k stars，Rust 编译为 WASM 的节点式图像编辑器）与官方 sqlite-wasm 案例、JS 与 WASM 的内存边界；度量与回归——三大指标、PerformanceObserver、性能预算的回归守护。

第 11 章 持久化格式与发布边界：存储三层选型——wa-sqlite（约 1.4k stars，SQLite WASM 加 OPFS 文件后端）与官方 sqlite-wasm（OPFS SyncAccessHandle + SharedWorker）的差异、sql.js（约 14k stars，内存型）与 Dexie（约 15k stars）的定位、local-first 趋势；格式兼容与商业分界——xlsx 的复杂度分层、Univer 的开源核心加商业增值（Pro 版 xlsx 导入导出为商业功能）、自有格式与迁移管道；许可证地图与复刻边界——三类许可证、选型必查清单、PWA 与静态托管、桌面壳引读（衔接《OpenWork 源码精读》）。

附录：附录 A 术语表（全书中英对照与一句话定义）；附录 B 技术速查（渲染层/协同/存储/工具库四张速查表）；附录 C 练习题（按项目线组织的进阶练习）。

四、按需跳读

• 只想先跑起来一个：第 00 → 01 → 02 → 03 章，产出一个单文件 mini 白板，半天可完成。
• 关心协同与本地优先：第 04 章全读，加第 5.3 节 Univer 架构（OT 路线的承载者），CRDT 与 OT 两条路线对看完备。
• 关心表格与命令系统：第 05 章全读，加第 1.2 节的命令模式铺垫。
• 关心图像与桌面：第 1.1 节的解剖示范 → 第 07、08 章，两条最容易出成就感的线。
• 关心渲染性能与选型：第 1.3 节 → 第 02 章 → 第 10 章，预算、范式、分析三段连读。
• 评估技术选型（含授权）：第 0.1 节 → 第 2.3 节 → 第 4.3 节 → 第 11 章，选型、降级、授权、发布四题连答。

五、参考来源

• Excalidraw（excalidraw/excalidraw，约 134k stars，社区口径）：官方文档与仓库，含 npm 嵌入包 @excalidraw/excalidraw 与协同方案说明

• tldraw（tldraw/tldraw，约 51k stars）：官方文档；授权条款以官网为准——开发免费、生产需 license key

• Univer（dream-num/univer，约 23k stars）：官方中文文档，@univerjs/core 1.0 稳定版；Pro 版功能边界以官网为准

• glide-data-grid（glideapps，约 5.4k stars）、react-window（约 17k stars）、tanstack virtual（约 7.1k stars）官方文档

• xterm.js（xtermjs/xterm.js，约 21k stars）、Monaco（microsoft/monaco-editor，约 47k stars）官方文档

• jspaint（1j01/jspaint，约 7.9k stars）、miniPaint（viliusle/miniPaint，约 3.5k stars）、daedalOS（DustinBrett/daedalOS，约 13k stars）

• Yjs（yjs/yjs，约 23k stars）官方文档；Dexie（约 15k stars）、wa-sqlite（约 1.4k stars）、sql.js（约 14k stars）、官方 sqlite-wasm

• code-server（约 80k stars）、Theia（约 22k stars）、Graphite（约 28k stars）、pdf.js（mozilla，约 54k stars）、WebContainers（StackBlitz 官方资料）

• win11React（约 9.7k stars）与 98.js（趣味对照用）；Luckysheet（约 16k stars，已停止维护，作演进案例）

• 《OpenWork 源码精读》第 09 章《Desktop深度Electron主进程与运行时管理》、第 10 章《前端App分层架构与Platform抽象》

• 《build-your-own-x》第 05 章《造文本编辑器》；《OpenHands Agent Canvas · 中文源码精读》第 02 章《对话舱事件流渲染》

• 本地优先（local-first）软件的社区文章（第 4.2 节的观念背景）