《从零锻造一个低代码平台 · Forge 造物志》
一个前端中级工程师的 10 篇自述。
看完你能在面试里把"低代码"从第一块积木讲到最后一行架构图。
主人公
我们要亲手造的低代码平台,名字叫 Forge。
Forge 是"锻造"的意思,隐喻这件事的本质 —— 把一堆原始积木,在编辑器里一锤一锤敲成能跑的页面。
对应到代码,它是一个 Monorepo,里面躺着这几个包:
@forge/core — 运行时心脏(表达式引擎、Schema 工具)
@forge/materials — 物料组件库
@forge/setter — 属性面板的控件集合
@forge/renderer — 运行时渲染器
apps/editor — 可视化编辑器(主角)
这 10 篇怎么串起来?
把一件"搭页面"的事情从零做到能上线,要翻过 10 堵墙:
序章 ① 工程化地基
│
▼ 能拖了吗?
② 拖拽引擎 ──► ③ 物料协议 ──► ④ 属性面板
│
▼ 属性能配了,但只能写死
⑤ 表达式引擎
│
▼ 能跑逻辑了,但看不到效果
⑥ 预览模式
│
▼ 看到了,但刷新就丢
⑦ 本地持久化
│
▼ 存上了,但状态无处安放
⑧ 状态引擎
│
▼ 组件够用吗?业务想要 dayjs
⑨ 远程模块加载
│
▼ 现在你有一个玩具,它离生产还差什么?
⑩ 全栈架构终章
每一篇都是上一篇的"债主":上一篇留了什么坑,下一篇就来还。读到最后,你手里会有一张完整的架构图,脑子里会有一条清晰的演进脉络。
十篇目录
| 篇 | 标题 | 关键词 |
|---|---|---|
| 01 | 序章:假如产品经理让你两周做个"自己搭页面"的系统 | Monorepo · pnpm · Turbo · Vite |
| 02 | 让积木动起来:HTML5 Drag API 的理想与现实 | react-dnd · dnd-kit · craft.js · iframe Portal |
| 03 | 物料觉醒:一个组件凭什么能被拖进低代码? | HOC · resolver · displayName |
| 04 | 右边那栏从哪来:属性面板的三层抽象 | Panel · Setter · Field · 双向绑定 |
| 05 | 当属性会思考:{{ }} 背后的沙箱往事 | iframe sandbox · with · eval · Tagged Template |
| 06 | 你搭的东西总得看一眼:预览模式的两副面孔 | enabled 开关 · ContextProvider · MountRef |
| 07 | 刷新即遗忘?给低代码装一块"硬盘" | IndexedDB · LRU · autosave |
| 08 | 表达式有了大脑:组件作用域状态引擎 | Redux Toolkit · scoped store · $$store |
| 09 | 请外援上场:动态加载远程模块的五种姿势 | UMD · ESM · SystemJS · importmap · Deno-style |
| 10 | 终章:一张图看懂你搭的这个低代码平台 | 全栈架构 · 多人协同 · 版本管理 · 生产 gap |
这个系列写给谁?
- ✅ 2-4 年前端,想在简历里加一行"主导低代码平台"但心里没底的你
- ✅ 面试官问起"搭建类"项目时,想多撑 30 分钟不露怯的你
- ✅ 打算自己造一个低代码,不想从 craft.js 官方文档开始啃的你
约定
- 所有代码都在 GitHub Forge 仓库里(占位,真实项目自替换)
- 每篇末尾会有一个 "面试 30 秒速记" 模块,背下就能用
- 关键追问会用 ⭐ 标出,这些是我在真实面试里被反问过的
- 不搞标题党,不水
第 01 篇走起 → 序章:假如产品经理让你两周做个"自己搭页面"的系统
