背景

咱们团队绝大多数工作都是在开发各种中后盾利用，也始终在摸索如何晋升中后盾利用开发的效率。为此咱们建设了ABF平台，能在ABF平台上一站式实现利用创立、权限管制、开发、部署等，这篇文章将介绍ABF平台中十分重要的一部分——搭建核心。

顾名思义，搭建核心是一套中后盾低代码开发的解决方案，次要有这些性能：
● 能够通过拖入组件、批改配置的可视化交互方式来开发页面
● 在编辑器里能够随时拖入物料核心的物料，无需提前确定依赖
● 能够搭建页面也能够搭建物料，能通过搭建反向补充物料核心
● 对于简单场景，反对“代码嵌搭建”的应用形式，交融Pro Code和Low Code两者的劣势

在具体介绍之前，我想先探讨几个常常会被问到的问题：

问题一：低代码开发是否真的可能提效？
很多前端开发者对于低代码开发这种“拖控件”的开发方式有一种人造的冲突和狐疑，这种形式是否真的可能提效？
我认为低代码开发的提效点并不是用“拖控件”代替写代码——从头搭建一个页面未必就比用代码写一个快。

低代码开发最重要的是和物料、模型驱动等配合，例如依据模型能主动生成一个表单页面，组件类型和校验都曾经默认可用，只须要在编辑器里改一改字段形容和布局就能够用了，这样也能在开发环节中引入其余角色，非开发人员（产品/经营等）齐全能够本人搭建页面。并且低代码开发方式人造偏差于物料建设，能让前端开发人员的工作模式从“开发页面”变成“开发组件”。

并且咱们在过来两年也曾经有过十分深刻的实际：在优酷内容治理平台中，咱们实现了一套特定畛域的页面搭建计划，能通过字段和类型信息主动生成初始页面，而后在搭建编辑器中做些调整，即可失去一个可用的页面。这套计划曾经搭建出了数百个页面，服务了近千名经营。这些页面搭建根本都是由产品实现，前端不须要参加。

但在过后，这套计划却很难推广到更广的范畴应用，毕竟它是一套针对特定业务场景的搭建计划，很难推广到需要差别很大的其它中后盾我的项目中。但咱们至多能确定一点：低代码开发的确能为中后盾开发提效。

问题二：简单的业务场景能应用低代码开发吗？
有很多简单业务逻辑，要么齐全没方法用低代码开发的形式来做，要么会把配置弄得非常复杂，得失相当，怎么解决这些场景？
对于增删改查类的简略的页面，能够用低代码开发的形式来做，对于一些简单逻辑，搭建核心也提供一套混合开发计划：简单逻辑依然应用代码编写，通过渲染器将低代码搭建后果作为一个一般物料组件来应用。
代码示例：

import React from 'react';import LowcodeRenderer from '@ali/abf-lowcode-renderer';const MyPage = () => {  const handleSubmit = () => {      // 一些简单逻辑  }      return (    <LowcodeRenderer      id="my-lowcode-form"            // 搭建物料的惟一标识      version="0.0.1"    // 搭建物料的版本号      props={{    // 传递给物料的props        data: [1, 2],        title: "Hello",        onSubmit: handleSubmit      }}    />  );}

这种形式能联合Pro Code开发和Low Code开发的长处，能笼罩更多的业务场景。具体细节能够浏览下文的“渲染器”局部。

技术计划

物料
物料是中后盾搭建的根底元素，物料能够近似认为其就是组件，在新的低代码组件标准下，低代码组件和一般React组件并无区别，只须要提供一个物料形容协定。但为了防止问题，咱们也为物料指定了一些规定。
物料生产
依据产出形式能够将物料分为两种：

  1. 源码物料 通过代码开发的形式编写的物料
  2. 搭建物料 通过低代码形式搭建进去的物料
    咱们冀望达成的指标是这两种物料应用形式齐全一样，使用者不须要关怀物料到底是代码编写的还是搭建进去的，并且也能随便组合它们来产生新的物料。

物料构建后果
对于源码物料，咱们规定物料必须失去umd格局的构建后果，并且会将react、react-dom、antd、moment等罕用包通过externals配置排除进来，以失去较小的构建后果。
将来更好的形式是产出esm格局的构建，目前支流浏览器都曾经反对浏览器端的module解决，这样就能够进一步缩小反复依赖。
咱们通过对立的构建脚手架来确保源码物料的构建形式统一，并且通过DEF平台来做云构建并公布到CDN。在编辑器加载物料和渲染器渲染时，会通过CDN地址加载物料的资源。

对于搭建物料，则不会失去JS格局的构建后果，而是一段遵循《阿里中后盾搭建协定》的Schema，它也会公布到CDN。应用时，渲染器会抹平源码物料和搭建物料应用上的差别。

物料形容协定
除了物料自身的内容外，还须要为物料提供形容协定，形容协定次要是用来设置物料在低代码编辑器中的交互行为，为组件的每一个配置项指定名称、形容、类型等信息。

咱们的低代码物料协定遵循《阿里中后盾搭建组件形容协定》，在其根底上额定扩大了一些字段，用于记录物料自身的元数据信息以及对应的资源信息。

对于源码开发的组件，对立脚手架会主动剖析组件props的TypeScript类型申明等信息来失去根底的形容协定，开发者能够在这个根底上自定义一些配置。

对于源码物料来说，我的项目的构造和产出物如下所示：

- dist                                # 构建后果，gitlab仓库不会提交此目录    - index.umd.min.js    # 物料构建后果  - index.umd.js.map    # source map 会通过DEF独自公布到内网CDN，没有泄露源码的危险  - meta.json                    # 物料形容协定，会在根目录的meta.json上增加一些额定信息- src                                    # 源代码目录    - index.tsx  - style.less- package.json- meta.json                        # 物料形容协定，脚手架会依据组件类型申明生成，也能够手动批改

Ant Design 根底物料
除了开发者生产的物料外，搭建核心还须要提供一系列的根底组件。

咱们以Ant Design React 组件库为根底，建设了一套 Ant Design 低代码组件库。

目前Ant Design低代码组件库曾经笼罩了全副的Ant Design组件，作为ABF搭建核心的根底组件也曾经在多个业务中应用了。

编辑器
编辑器是搭建核心的外围局部，所有搭建操作都是在编辑器中实现的。编辑器基于阿里低代码引擎开发，咱们在其根底上做了十分多的工作，以实现ABF搭建核心的性能。
物料
对于根底组件，只须要接入咱们建设的Ant Design低代码组件即可。接入物料核心则麻烦一点，当拖入一个物料核心的物料，会异步加载物料的JS和CSS。

在拖入物料时，会加载物料对应的资源，并且还实现了这些性能：
● 拖入物料时会展现一个加载进度条，以保障资源较大的物料不会长时间无响应
● 异样隔离，物料JS执行出错时不会影响到编辑器和其它物料
● 在物料执行出错时，须要确保调试工具能加载物料的source map，定位问题

保留 & 预览
编辑器保留的后果也是以物料的模式来组织的，即最初也是保留为一个物料。编辑器的保留后果是一段JSON，它蕴含了所有应用到的物料的信息，以及一段合乎《阿里中后盾搭建协定》的Schema。
保留之后还会有一个公布的过程，同一个版本能够重复保留，但一旦公布了此版本，则不能再批改此版本的搭建后果。

预览则是配合渲染器，读取搭建保留的后果，并渲染进去。

设置器
设置器(Setter)是指编辑器右侧面板中，给组件props配置值的组件。不同的Props类型须要不同的设置器，例如数字类型须要NumberSetter，字符串类型则须要StringSetter，还有更加简单的事件设置器和款式设置器等。
咱们应用Ant Design React组件开发了所有设置器，并且简直所有配置都反对切换为表达式输出，以此反对Props动静绑定。

渲染器

渲染器用来渲染搭建的后果，在ABF平台上创立的搭建页面，ABF会通过内置的渲染器间接渲染进去，使用者不须要关怀如何应用渲染器。
然而对于一些简单的页面，齐全应用低代码开发就有些力不从心了。所以搭建核心也提供一套“代码嵌搭建”的计划，简单逻辑依然应用代码编写，通过渲染器将低代码搭建后果作为一个一般物料组件来应用。
渲染器API
1.间接当成一般组件应用

import React from 'react;import LowcodeRenderer from '@ali/abf-lowcode-renderer';export default () => (  <LowcodeRenderer    id="my-lowcode-component"                    // 组件惟一标识    version="0.0.1"                                                // 版本号    fallback={({ loading, error }) => <div>loading...</div>}    props={{                                                            // 传递给组件的props      data: [1, 2],      title: 'Hello'    }}  />);

2.也能够配合React的<Suspense />组件应用
留神：React Suspense暂处试验阶段

import React from 'react;import { create } from '@ali/abf-lowcode-renderer';const MyLowcodeComp = React.lazy(create({    id: 'my-lowcode-component',  version: '0.0.1'}));export default () => (  <Suspense fallback={<div>loading...</div>}>    <MyLowcodeComp      data={[1, 2]}      title="Hello"    />  </Suspense>);

动静加载资源
从API能够看进去，渲染器并不需要我的项目事后装置物料的依赖，渲染器会依据传入的物料名和版本号，通过一些规定失去对应搭建后果的CDN地址，而后加载CDN地址，解析搭建后果，动静的加载JS和CSS资源。
加载过程做了很多优化：

  1. 如果页面中有多个渲染实例，会合并剖析所有资源，防止反复加载
  2. 会利用alicdn的combo性能将同类型资源一次全申请回来
  3. 多级缓存
    环境隔离
    尽管咱们限度了新的物料必须应用antd v4，然而依然有十分多应用antd v3的历史我的项目，而antd组件是应用全局款式，想在这些旧我的项目里嵌入搭建物料，就会呈现款式抵触。
    为了解决这一问题，咱们引入了一些微前端的环境隔离计划，渲染器会将后果渲染到 Shadow DOM 中，不会和内部款式抵触，并且也引入了JS沙箱机制，能防止全局变量和全局副作用的抵触。

应用案例

目前曾经有很多业务在应用搭建核心，这里分享两个比拟典型的案例。
1.优酷内容标准化平台
在优酷内容标准化平台中，每一个我的项目分类都会有一个列表页，但不同我的项目的列表页有会有一些区别，比方表格列数不一样，或者单元格内容不一样。并且表格的单元格内容也可能是一个简单的组件。


最初采纳的计划是先用源码形式开发表格物料，内置数据申请逻辑。将一些简单的单元格内容也做成物料。这样就能通过配置来管制表格的列，通过拖入物料到表格里来管制表格的展现内容。

2.优酷数据分析平台
优酷数据分析平台有十分多的图表块，并且依据经营需要，产品会频繁的要求前端调整布局和图表的查问参数，并在不同页面里组合这些图表。

通过接入搭建核心，能够让产品也参加到开发当中，产品能够本人去调整页面布局，也能从物料模块里随时拖入想要的图表组件，而前端只须要专一于开发图表组件即可。

后话

目前整套计划曾经在优酷外部十分多的中后盾我的项目中落地了，很多页面开发工作产品和经营本人就能搞定，极大的缩小了前端的工作量。但目前整套计划依然处于比拟高级的阶段，咱们后续会减少数据源配置、响应式数据绑定、模型驱动等性能。
文中所提到的阿里低代码引擎以及相干协定标准预计在往年内会开源，感兴趣的同学能够关注这方面的音讯。