【UI】基于Amis对Low Code前端的一些思考

[fayeah]

前言

最近项目中有两个产品前端的框架都使用了 Amis，是一个低代码前端框架，公司之前也有几篇文章介绍了 Amis，其适用场景、使用方式以及项目中的落地和最佳实践等等。这里，我主要想借 Amis 来表达一些我对 Low Code 前端的想法。

从概念出发

LCDP，引用 Wiki 的解释：

A low-code development platform (LCDP) provides a development environment used to create application software through a graphical user interface instead of traditional hand-coded computer programming.

简单来说，低代码开发平台是提供一套开发环境，使得我们能够通过用户界面而非手写电脑程序来生成应用的方式，它是一种软件开发方式。实际上市面上已经有相关的产品出现，包括 outSystems，国内也有宜搭、微搭等对应的产品。

LCDP 最大的愿景是在产品快速更新的数字化时代，提供一个很多角色都能够可以迅速开发、上线应用，快速验证应用的可行性，而不用很大程度地依靠技术团队通过长时间的迭代才能够完成，最终达到一个降本增效的结果。

当然了，对于 LCDP，网络上也有许多相关的讨论，有人说低代码是“行业毒瘤”，完全否定了低代码的价值，原因是违背了“霍恩子句”；也有权威预测，到 2025 年大部分企业级应用程序都将在一定程度上引入低代码软件开发平台。总之，争议不断涌现。那对于现在处于 IT 部门的我们，特别是前端开发，应该怎么去定位 Low Code呢？

Low Code 前端

存在即合理

如果有相应的产品出现了，还被应用上了，那这个产品必定有它的价值。现在开源的或者不开源的多多少少都会涉及到低代码了，腾讯 IMWeb 团队也有低代码产品从“积木系统”到“Vision”，再到“Hulk”，通过不断完善平台，达到能够支持C侧以及B侧快速交付的成果（额，一不小心搜到美团也有一个叫做“Hulk”的系统，看来大家起名字灵感来源差不多啊:grinning: ）。开源产品包括我们熟知的 Amis、X-render以及h5-Dooring等等。

因为项目用的 Amis，通过这个熟悉的框架我们来进一步了解一下吧 😊

非前端如何正确使用Amis

因为之前我们提到 LCDP 主要是能够使其他非技术人员使用界面的方式创建应用，那 LC 前端我理解也可以做到让其他非前端的人员生成前端页面，甚至包含交互、API调用等等。Amis 提供了可视化编辑器 来制作页面，看一个简单的例子:point_down:。

假设我们有个需求要创建CRUD的Filters（CRUD是 Amis 里面非常重要且最常用的列表组件）：

那么使用 Amis 可视化编辑器可以以极快的速度创建出一个页面出来，如果对该框架熟练，甚至一分钟不到都可以 ✌️，查看下图：

最终生成我们想要的页面，同时在编辑器的左侧也会有生成好的 Amis JSON 代码，直接应用到我们前端代码里面即可：

怎么样，通过 Amis 的例子有没有对 Low Code 前端有进一步的理解呢？那么类似 Amis 的低代码前端框架是如何实现的呢？它们的原理是啥呢？我们还是借用 Amis 来进一步探索。

Amis 实现原理

amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component，然后把其他属性作为 props 传递过去完成渲染。

官方给出的原理的定义如上，看起来也是很简单，那么具体的实现到底是怎样的呢，如果查看源码我们会找到这么一个文件 factory.ts，当然还有很多其他更加丰富的代码，比如描述上下文的 HOC，明确了每个组件 name 的唯一性；比如如何渲染的逻辑等，以下这部分是我认为比较核心的代码之一：

export function Renderer(config: RendererBasicConfig) {
  return function <T extends RendererComponent>(component: T): T {
    const renderer = registerRenderer({
      ...config,
      component: component
    });
    return renderer.component as T;
  };
}

没错，就是短短的 9️⃣ 行代码，是我认为很重要的代码块之一，当然了如果想看具体的实现，请前往这里。这段代码告诉开发人员，一个组件是如何被注册到Amis里面去的，那后面用 Amis 框架的用户就可以很方便地使用这些内置的组件了，为什么文档告诉我们如果想要自定义组件，也可以使用 Renderer呢？就是这个原因，里面处理了如何注册的逻辑，并且把这个方法暴露出来，使我们能很方便地使用。使用的方式就是利用TS的注解了，引用官方的一个简单的例子：

import * as React from 'react';
import {Renderer} from 'amis';

@Renderer({
  test: /(^|\/)my\-renderer$/
})
class CustomRenderer extends React.Component {
  render() {
    const {tip} = this.props;
    return <div>这是自定义组件：{tip}</div>;
  }
}

Low Code 前端的展望

我们曾经多少次因为相似的业务不断重复着的工作，我们使用了 CLI 工具来生成样板代码，减少我们的开发成本，在软件交付周期越来越短的情况下，时间就是我们最能赢得竞争力最重要的筹码。那么低代码可以帮助我们解决这部分问题，同时前端开发人员就可以利用自己更专业的技术做更有业务价值，更加复杂的事情，而不是一遍一遍地去实现那些简单的组件，特别是对于中后台解决方案，低代码前端必定会有它的一片市场，也许可能只是Niche Market，但是它的价值依然是不容忽视的。当然了，对于这类框架，我们是需要遵循一定的规范，有一定的学习成本，不过这个成本总的来说也不会很大，对于长期来看是很可能一件利好的事情。各位觉得呢，欢迎一起讨论呀～

无奖竞答

在读 Amis� 源码的过程当中，我发了一个自己不常用的操作符，也是涨姿势了，如果你知道它的含义，请写在评论区吧:blush:，如果你不知道它的含义，那么恭喜你，又要学到新知识或者回忆以前的知识了:grin: ，问后面这句的含义是 ~name.indexOf('.') ?

References:

• https://en.wikipedia.org/wiki/Low-code_development_platform
• https://baidu.gitee.io/amis/zh-CN/docs/index
• https://github.com/baidu/amis