ABF平台设计（三）——优酷中后台低代码开发方案

背景我们团队的大部分工作都在开发各种中后台应用，一直在探索如何提高中后台的效率应用程序开发。为此，我们搭建了ABF平台，可以在ABF平台上完成应用的创建、权限控制、开发、部署等。本文将介绍ABF平台中非常重要的一个部分——构建中心。顾名思义，构建中心就是一套中后台的低代码开发解决方案。主要有以下功能：●可以通过可视化交互方式拖入组件和修改配置来开发页面●可以在编辑器的素材中心随时拖放素材，无需事先确定依赖关系●可以搭建页面或素材，也可以搭建反向补充素材中心●针对复杂场景，支持使用“代码嵌入构建”，结合ProCode和LowCode的优势，在具体介绍之前，我会喜欢讨论几个经常被问到的问题：问题一：低代码开发真的能提高效率吗？很多前端开发者对低代码开发这种“拖拽式控制”的开发方式有着天然的抵触和质疑。这种方法真的能提高效率吗？我认为提高低代码开发效率的重点不是使用“拖动控件”而是编写代码——从头开始构建页面可能并不比用代码编写更快。低代码开发最重要的就是配合材质和模型驱动。例如，可以根据模型自动生成表单页面。默认情况下，组件类型和验证已经可用。您只需要在编辑器中更改字段描述和布局。是的，这也可以在开发过程中引入其他角色，非开发人员（产品/运营等）可以自己搭建页面。而低代码开发方式天然偏向于素材构建，可以将前端开发者的工作方式从“开发页面”转变为“开发组件”。而我们这两年也有非常深入的实践：在优酷内容管理平台上，我们实现了一套针对字段的页面构建方案，可以通过字段和类型信息自动生成初始页面，然后构建编辑器在中进行一些调整，您将拥有一个可用的页面。该方案已建成数百个页面，服务近千家运营商。这些页面的构建基本由产品完成，前端不需要参与。但当时很难将这种解决方案推广到更广泛的使用范围。毕竟是一套针对特定业务场景的构建方案，很难推广到其他需求差异很大的中后端项目。但我们至少可以确定一件事：低代码开发确实可以提高中后端开发的效率。问题二：复杂的业务场景能否使用低代码开发？有很多复杂的业务逻辑，要么完全无法用低代码开发实现，要么让配置变得非常复杂，得不偿失。如何应对这些场景？对于简单的增删改查页面，可以采用低代码开发。对于一些复杂的逻辑，构建中心也提供了一套混合开发的解决方案：复杂的逻辑仍然写在代码中，通过渲染器生成低代码的构建结果。用作普通材料成分。代码示例：importReactfrom'react';从“@ali/abf-lowcode-renderer”导入LowcodeRenderer；constMyPage=()=>{consthandleSubmit=()=>{//一些复杂的逻辑}return();}这个方法可以结合ProCode开发和LowCode开发的优势，可以覆盖更多的业务场景。详细信息可以在下面的“渲染器”部分找到。技术方案材料材料是中后台建设的基本要素。材料可以粗略地看作是组件。在新的低代码组件规范下，低代码组件和普通的React组件没有区别。只需要提供材料描述协议。但是为了避免出现问题，我们还指定了一些材料规则。素材制作按照输出方式可以分为两类素材：源代码素材是用代码编写的开发素材构建素材是用低代码方法构建的。我们希望达到的目标是两种材料的使用方式完全相同。读者无需关心素材是编码的还是搭建的，可以随意组合生成新的素材。素材构建结果对于源码素材，我们规定素材必须获取umd格式的构建结果，通过externals配置排除react、react-dom、antd、moment等常用包，获取更小的构建结果。未来更好的方法是生成esm格式构建。目前主流浏览器已经支持在浏览器端进行模块处理，这样可以进一步减少重复依赖。我们使用统一的搭建脚手架来保证源码素材以一致的方式搭建，我们使用DEF平台进行云搭建并发布到CDN。编辑器加载素材，渲染器渲染时，会通过CDN地址加载素材的资源。对于构建素材，你得到的不是JS格式的构建结果，而是一个遵循《阿里中后台搭建协议》的Schema，同样会发布到CDN。使用时，渲染器会消除源材料和构建材料使用方面的差异。素材描述协议除了素材本身的内容外，还需要提供对素材的描述协议。描述协议主要用于设置素材在低代码编辑器中的交互行为，为组件的每个配置项指定名称、描述、类型等。信息。我们的低码素材协议遵循《阿里中后台搭建组件描述协议》，增加了一些额外的字段来记录素材本身的元数据信息和对应的资源信息。对于使用源码开发的组件，统一脚手架会自动解析组件prop的TypeScript类型声明等信息，得到基本的描述协议，开发者可以在此基础上自定义一些配置。对于源码素材，项目的结构和输出如下：-dist#构建结果，gitlab仓库不会提交该目录-index.umd.min.js#素材构建结果-index.umd.js.map#sourcemap会通过DEF单独发布到内网CDN，没有源码泄露的风险-meta.json#素材描述协议，会在根目录下的meta.json中添加一些额外的信息-src#源码目录-index.tsx-style.less-package.json-meta.json#材质描述协议，脚手架会根据组件类型声明生成，也可以手动修改AntDesign基础材质除了开发者制作的材质，构建中心还需要提供一系列基础组件。基于AntDesignReact组件库，我们构建了一套AntDesign低代码组件库。目前，AntDesign低代码组件库已经覆盖了AntDesign的所有组件，作为ABF构建中心的基础组件，也已经在多个业务中使用。编辑器编辑器是构建中心的核心部分，所有的构建操作都在编辑器中完成。该编辑器是基于阿里低代码引擎开发的，我们在此基础上做了大量的工作来实现ABF构建中心的功能。材料对于基础组件，你只需要访问我们构建的AntDesign低代码组件。访问素材中心有点麻烦。将素材拖入素材中心时，会异步加载该素材的JS和CSS。拖入素材时，会加载素材对应的资源，同时实现了以下功能：●拖入素材时，会显示加载进度条，确保资源大的素材不会长时间无响应●异常隔离，素材JS执行出错不会影响编辑器和其他素材●素材执行出错时，需要保证调试工具可以加载素材源图，定位问题，保存&preview编辑器保存的结果也是以素材的形式组织的，也就是最后会保存为素材。编辑器保存的结果是一段JSON，里面包含了所有用到的材料的信息，以及一段符合《阿里中后台搭建协议》的Schema。保存后，会有一个释放过程。同一个版本可以重复保存，但是这个版本一旦发布，这个版本的构建结果就不能修改了。预览是配合渲染器读取保存的构建结果并进行渲染。SetterSetter（设置器）指的是编辑器右侧面板中为组件props配置值的组件。不同的道具类型需要不同的设置器。例如，数字类型需要NumberSetter，字符串类型需要StringSetter，以及更复杂的事件设置器和样式设置器。我们使用AntDesignReact组件开发了所有的setter，几乎所有配置都支持切换到表达式输入以支持Props动态绑定。渲染器渲染器用于渲染构建的结果。在ABF平台上创建的构建页面将由ABF通过内置渲染器直接渲染。用户不需要关心如何使用渲染器。但是对于一些复杂的页面，完全使用低代码开发就有点力不从心了。为此，建设中心也提供了一套“代码嵌入式建设”的解决方案。复杂的逻辑仍然写在代码中，低代码的构建结果通过渲染器作为普通的材质组件。RendererAPI1.直接当普通组件使用importReactfrom'react;从“@ali/abf-lowcode-renderer”导入LowcodeRenderer；exportdefault()=>(