Amis
<h2><strong>工作原理</strong></h2>
<p>amis 的渲染过程是将 <code>json</code> 转成对应的 React 组件。先通过 <code>json</code> 的 type 找到对应的 <code>Component</code>，然后把其他属性作为 <code>props</code> 传递过去完成渲染。</p>
<p>拿一个表单页面来说，如果用 React 组件开发一般长这样。</p>
<pre><code class="language-jsx">&lt;Page title=&quot;页面标题&quot; subTitle=&quot;副标题&quot;&gt;
&lt;Form title=&quot;用户登录&quot;&gt;
&lt;InputText name=&quot;username&quot; label=&quot;用户名&quot; /&gt;
&lt;/Form&gt;
&lt;/Page&gt;</code></pre>
<p>把以上配置方式换成 amis JSON, 则是：</p>
<pre><code class="language-json">{
&quot;type&quot;: &quot;page&quot;,
&quot;title&quot;: &quot;页面标题&quot;,
&quot;subTitle&quot;: &quot;副标题&quot;,
&quot;body&quot;: {
&quot;type&quot;: &quot;form&quot;,
&quot;title&quot;: &quot;用户登录&quot;,
&quot;body&quot;: [
{
&quot;type&quot;: &quot;input-text&quot;,
&quot;name&quot;: &quot;username&quot;,
&quot;label&quot;: &quot;用户名&quot;
}
]
}
}</code></pre>
<p>其实只需要把 json 节点，根据 type 信息自动转成 React Component 即可。</p>
<p><br></p>
<h2><strong>用 JSON 写页面有什么好处</strong></h2>
<p>为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 <a href="https://baike.baidu.com/item/JSON">JSON</a> 来配置，它的独特好处是：</p>
<ul>
<li><strong>不需要懂前端</strong>：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 <code>JavaScript</code>，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；</li>
<li><strong>不受前端技术更新的影响</strong>：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 <code>Angular/Vue/React</code> 版本现在都废弃了，当年流行的 <code>Gulp</code> 也被 <code>Webpack</code> 取代了，如果这些页面不是用 amis，现在的维护成本会很高；</li>
<li><strong>享受 amis 的不断升级</strong>：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；</li>
<li>可以 <strong>完全</strong> 使用 <a href="https://aisuda.github.io/amis-editor-demo/">可视化页面编辑器</a> 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。</li>
</ul>
<p><br></p>
<h2><strong>amis 的其它亮点</strong></h2>
<ul>
<li><strong>提供完整的界面解决方案</strong>：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；</li>
<li><strong>大量内置组件（120+），一站式解决</strong>：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；</li>
<li><strong>支持扩展</strong>：除了低代码模式，还可以通过 <a href="./extend/internal">自定义组件</a> 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；</li>
<li><strong>容器支持无限级嵌套</strong>：可以通过嵌套来满足各种布局及展现需求；</li>
<li><strong>经历了长时间的实战考验</strong>：amis 在百度内部得到了广泛使用，<strong>在 6 年多的时间里创建了 5 万页面</strong>，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。</li>
</ul>
<p><br></p>
<h2><strong>amis 不适合做什么？</strong></h2>
<p>使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：</p>
<ul>
<li><strong>大量定制 UI</strong>：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。</li>
<li><strong>极为复杂或特殊的交互</strong>：
<ul>
<li>有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。</li>
<li>但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。</li>
</ul></li>
</ul>