AppML 案例未来
Web 标准演进下 AppML 的位置、局限,以及该学什么替代它。
Key PointsAppML 的思路(模型驱动、声明式 CRUD)是对的,但实现方式停留在十多年前,今天有更成熟的替代。
它的核心想法
AppML's core idea — declare data and fields, generate the UI — is exactly what low-code platforms and admin frameworks do today. The direction is right; the implementation (XML model + global script + DOM generation) has aged.
局限
| Limit | Consequence |
|---|---|
| No package manager | 不能锁版本,升级靠手改 |
| No build step | 不能压缩、不能摇树、不能拆分 |
| Global scope | 多应用共存易冲突 |
| DOM dependency | 样式与版本强耦合 |
| No typing | 字段名拼错不报错 |
| Small ecosystem | 遇到问题只能读源码 |
今天的替代
| Need | Modern choice | Why |
|---|---|---|
| Admin CRUD | Ant Design Pro / refine / AdminJS | 同类思路,生态成熟 |
| Schema-driven forms | JSON Schema + Formik / react-hook-form | 标准化、可校验 |
| Low-code | Appsmith / ToolJet | 可视化搭建,可自托管 |
| Simple table | 原生 <table> + 几行 JS | 不需要框架 |
Web 标准带来的变化
HTML
<!-- 原生能力已经覆盖了很多「框架才有」的功能 -->
<dialog id="dlg">…</dialog> <!-- 模态框 -->
<details><summary>展开</summary>…</details> <!-- 折叠 -->
<input type="date"> <!-- 日期选择 -->
<input type="email" required> <!-- 原生校验 -->
<template id="row">…</template> <!-- 模板 -->JavaScript
// 原生模板 + 几行代码就能做一个列表
const tpl = document.getElementById('row');
const tbody = document.querySelector('tbody');
data.forEach((r) => {
const node = tpl.content.cloneNode(true);
node.querySelector('.name').textContent = r.name;
tbody.appendChild(node);
});Things that needed a framework a decade ago are native now: modals, date inputs, form validation, templates, fetch, classes. Many frameworks are left valuable only for bundling and state management.
该学什么
- HTML / CSS / JS 基础 —— 一切框架的地基
- **
fetch与 HTTP** —— 前后端如何交换数据 - 一个前端框架 —— Vue 或 React,按团队需要
- 一个后端 —— Node、C#、Go 或 PHP,能自己写接口
AppML's value is not in using it but in the abstraction it teaches: model-driven UI with separated field definitions, validation and renderers. Once that clicks, any admin framework or low-code tool is easy to place.
结论
- 教学演示 —— 可以用,几分钟就能出一个列表
- 内部小工具 —— 可以,只要能跑、没人在意体积
- 正式产品 —— 不建议,工程化能力不足
- 长期维护 —— 不建议,社区小、升级无保障
它的核心想法
AppML 想做的事——「用声明描述数据与字段,自动生成界面」——正是今天低代码平台和 Admin 框架在做的事。这个方向没有错,只是它的实现方式(XML 模型 + 全局脚本 + DOM 生成)已经落后了。
局限
| 局限 | 后果 |
|---|---|
| 无包管理 | 不能锁版本,升级靠手改 |
| 无构建 | 不能压缩、不能摇树、不能拆分 |
| 全局作用域 | 多应用共存易冲突 |
| 依赖 DOM 结构 | 样式与版本强耦合 |
| 无类型 | 字段名拼错不报错 |
| 生态小 | 遇到问题只能读源码 |
今天的替代
| 需求 | 现代选择 | 理由 |
|---|---|---|
| 后台增删改查 | Ant Design Pro / refine / AdminJS | 同类思路,生态成熟 |
| 模型驱动表单 | JSON Schema + Formik / react-hook-form | 标准化、可校验 |
| 低代码 | Appsmith / ToolJet | 可视化搭建,可自托管 |
| 简单表格 | 原生 <table> + 几行 JS | 不需要框架 |
Web 标准带来的变化
HTML
<!-- 原生能力已经覆盖了很多「框架才有」的功能 -->
<dialog id="dlg">…</dialog> <!-- 模态框 -->
<details><summary>展开</summary>…</details> <!-- 折叠 -->
<input type="date"> <!-- 日期选择 -->
<input type="email" required> <!-- 原生校验 -->
<template id="row">…</template> <!-- 模板 -->JavaScript
// 原生模板 + 几行代码就能做一个列表
const tpl = document.getElementById('row');
const tbody = document.querySelector('tbody');
data.forEach((r) => {
const node = tpl.content.cloneNode(true);
node.querySelector('.name').textContent = r.name;
tbody.appendChild(node);
});十几年前需要框架才能做到的事,今天浏览器原生就有:模态框、日期控件、表单校验、模板、fetch、class 语法。很多「框架」现在只剩打包和状态管理还有价值。
该学什么
- HTML / CSS / JS 基础 —— 一切框架的地基
- **
fetch与 HTTP** —— 前后端如何交换数据 - 一个前端框架 —— Vue 或 React,按团队需要
- 一个后端 —— Node、C#、Go 或 PHP,能自己写接口
学 AppML 的价值不在用它,而在理解「模型驱动界面」这个抽象:字段定义、校验规则、渲染器分离。理解之后,再看任何 Admin 框架或低代码平台,都能很快看出它在哪一层做了什么。
结论
- 教学演示 —— 可以用,几分钟就能出一个列表
- 内部小工具 —— 可以,只要能跑、没人在意体积
- 正式产品 —— 不建议,工程化能力不足
- 长期维护 —— 不建议,社区小、升级无保障