amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 生态，相关的库有 2347 个，很多功能相似，挑选成本高。
然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……
而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：
{
"title": "浏览器内核对 CSS 的支持情况",
"remark": "嘿，不保证数据准确性",
"type": "page",
"body": {
"type": "crud",
"draggable": true,
"syncLocation": false,
"api": "/api/mock2/sample",
"keepItemSelectionOnPageChange": true,
"autoGenerateFilter": true,
"bulkActions": [
{
"type": "button",
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
},
{
"type": "button",
"label": "批量修改",
"actionType": "dialog",
"dialog": {
"title": "批量编辑",
"name": "sample-bulk-edit",
"body": {
"type": "form",
"api": "/api/mock2/sample/bulkUpdate2",
"body": [
{
"type": "hidden",
"name": "ids"
},
{
"type": "input-text",
"name": "engine",
"label": "Engine"
}
]
}
}
}
],
"quickSaveApi": "/api/mock2/sample/bulkUpdate",
"quickSaveItemApi": "/api/mock2/sample/$id",
"headerToolbar": [
"bulkActions",
{
"type": "button",
"label": "重置测试数据",
"actionType": "ajax",
"size": "sm",
"api": "/api/mock2/sample/reset"
},
"export-excel",
{
"type": "tpl",
"tpl": "一共有 ${count} 行数据。",
"className": "v-middle"
},
{
"type": "columns-toggler",
"align": "right",
"draggable": true
},
{
"type": "drag-toggler",
"align": "right"
}
],
"footerToolbar": ["statistics", "switch-per-page", "pagination"],
"columns": [
{
"name": "id",
"label": "ID",
"width": 20,
"sortable": true,
"type": "text",
"searchable": {
"type": "input-text",
"name": "id",
"label": "主键",
"placeholder": "输入id"
}
},
{
"name": "browser",
"label": "Browser",
"searchable": {
"type": "select",
"name": "browser",
"label": "浏览器",
"placeholder": "选择浏览器",
"options": [
{
"label": "Internet Explorer ",
"value": "ie"
},
{
"label": "AOL browser",
"value": "aol"
},
{
"label": "Firefox",
"value": "firefox"
}
]
}
},
{
"name": "platform",
"label": "平台",
"popOver": {
"trigger": "hover",
"body": {
"type": "tpl",
"tpl": "就是为了演示有个叫 popOver 的功能"
}
},
"sortable": true,
"type": "text"
},
{
"name": "grade",
"label": "CSS 等级",
"type": "select",
"options": ["A", "B", "C", "D", "X"]
},
{
"type": "operation",
"label": "操作",
"width": 100,
"buttons": [
{
"type": "button",
"actionType": "ajax",
"label": "删除",
"confirmText": "您确认要删除?",
"api": "delete:/api/mock2/sample/$id"
}
]
}
]
}
}
这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：
全部实现这些需要大量的代码。
但可以看到，用 amis 只需要 157 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。
这正是建立 amis 的初衷，我们认为：对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和工具。
为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：
JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：