背景

我们团队绝大多数工作都是在开发各种中后台应用,也一直在探索如何提升中后台应用开发的效率。为此我们建设了ABF平台,能在ABF平台上一站式完成应用创建、权限控制、开发、部署等,这篇文章将介绍ABF平台中非常重要的一部分——搭建中心。

顾名思义,搭建中心是一套中后台低代码开发的解决方案,主要有这些功能:
● 可以通过拖入组件、修改配置的可视化交互方式来开发页面
● 在编辑器里可以随时拖入物料中心的物料,无需提前确定依赖
● 可以搭建页面也可以搭建物料,能通过搭建反向补充物料中心
● 对于复杂场景,支持“代码嵌搭建”的使用方式,融合Pro Code和Low Code两者的优势

在具体介绍之前,我想先讨论几个经常会被问到的问题:

问题一:低代码开发是否真的能够提效?
很多前端开发者对于低代码开发这种“拖控件”的开发方式有一种天然的抵触和怀疑,这种方式是否真的能够提效?
我认为低代码开发的提效点并不是用“拖控件”代替写代码——从头搭建一个页面未必就比用代码写一个快。

低代码开发最重要的是和物料、模型驱动等配合,例如根据模型能自动生成一个表单页面,组件类型和校验都已经默认可用,只需要在编辑器里改一改字段描述和布局就可以用了,这样也能在开发环节中引入其他角色,非开发人员(产品/运营等)完全可以自己搭建页面。并且低代码开发方式天然偏向于物料建设,能让前端开发人员的工作模式从“开发页面”变成“开发组件”。

并且我们在过去两年也已经有过非常深入的实践:在优酷内容管理平台中,我们实现了一套特定领域的页面搭建方案,能通过字段和类型信息自动生成初始页面,然后在搭建编辑器中做些调整,即可得到一个可用的页面。这套方案已经搭建出了数百个页面,服务了近千名运营。这些页面搭建基本都是由产品完成,前端不需要参与。

但在当时,这套方案却很难推广到更广的范围使用,毕竟它是一套针对特定业务场景的搭建方案,很难推广到需求差异很大的其它中后台项目中。但我们至少能确定一点:低代码开发确实能为中后台开发提效。

问题二:复杂的业务场景能使用低代码开发吗?
有很多复杂业务逻辑,要么完全没办法用低代码开发的方式来做,要么会把配置弄得非常复杂,得不偿失,怎样处理这些场景?
对于增删改查类的简单的页面,可以用低代码开发的方式来做,对于一些复杂逻辑,搭建中心也提供一套混合开发方案:复杂逻辑仍然使用代码编写,通过渲染器将低代码搭建结果作为一个普通物料组件来使用。
代码示例:

import React from 'react';
import LowcodeRenderer from '@ali/abf-lowcode-renderer';const MyPage = () => {const handleSubmit = () => {// 一些复杂逻辑}return (<LowcodeRendererid="my-lowcode-form"            // 搭建物料的唯一标识version="0.0.1"    // 搭建物料的版本号props={{    // 传递给物料的propsdata: [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 () => (<LowcodeRendererid="my-lowcode-component"                    // 组件唯一标识version="0.0.1"                                             // 版本号fallback={({ loading, error }) => <div>loading...</div>}props={{                                                            // 传递给组件的propsdata: [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>}><MyLowcodeCompdata={[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.优酷数据分析平台
优酷数据分析平台有非常多的图表块,并且根据运营需求,产品会频繁的要求前端调整布局和图表的查询参数,并在不同页面里组合这些图表。

通过接入搭建中心,可以让产品也参与到开发当中,产品可以自己去调整页面布局,也能从物料模块里随时拖入想要的图表组件,而前端只需要专注于开发图表组件即可。

后话

目前整套方案已经在优酷内部非常多的中后台项目中落地了,很多页面开发工作产品和运营自己就能搞定,极大的减少了前端的工作量。但目前整套方案仍然处于比较初级的阶段,我们后续会增加数据源配置、响应式数据绑定、模型驱动等功能。
文中所提到的阿里低代码引擎以及相关协议规范预计在今年内会开源,感兴趣的同学可以关注这方面的消息。

ABF平台设计(三)-优酷中后台低代码开发方案相关推荐

  1. 中易低代码开发平台,可视化开发环境推动企业数字化应用

    近年来,"低代码平台"的概念在业内持续升温,除了圈内人士的关注外,还吸引了不少投资者和交易市场的关注. 对于低代码开发平台来说,其实是一种可视化的软件开发形式,用户只需通过前端的可 ...

  2. ABF平台设计(一)-新一代标准化中后台研发平台

    "中后台系统"一般是指各种互联网公司研发的面向内部或者ToB用户的运营管理类平台,如各种CMS系统.CRM系统等,它们的特点是交互复杂度高(大量复杂表单.表格.弹框).碎片化严重( ...

  3. 低代码开发Paas平台时代来了

    概述 **本人博客网站 **IT小神 www.itxiaoshen.com 低代码理论 概念 低代码开发基于可视化和模型驱动的概念,结合了云原生和多终端体验技术,它可以在大多数业务场景中,帮助企业显著 ...

  4. 低代码开发平台如何支撑微服务/云原生架构

    目前"低代码"."微服务"这两个IT词汇很流行,国内主流的低代码开发平台很多:宜搭.简道云.明道云.云程.氚云.伙伴云.道一云.JEPaaS.华炎魔方.搭搭云. ...

  5. 低代码开发平台_如何挑选最适合你的低代码开发平台

    根据Forrester研究报告,不论是成熟大型的,或是新的小规模的低代码开发平台供应商,每年都在以50%的增长率快速的发展中.在众多的低代码开发平台里,挑选最适合企业的才是至关重要的. 在选择低代码开 ...

  6. 基于BPM(业务流程管理)的低代码开发平台有哪些优势?

    21世纪可以说是一个数字化的时代,这对于企业来说,无疑是一个极大的挑战.在数字化时代,企业对于风险管控.流程效率有了更高的要求.同时低代码的出现也让企业在软件开发上有了更高的效率.但随着业务的增长,管 ...

  7. 开发者的拯救者还是掘墓人?解密低代码开发平台

    开发者的拯救者还是掘墓人?解密低代码开发平台 ZT "低代码开发"是什么? 用"低代码开发平台"来进行开发是一种怎样的感受? 用"低代码开发平台&qu ...

  8. 低代码平台有哪些?值得推荐的低代码公司?

    在数字化背景的加持下,低代码平台成为了香馍馍,不到一年时间就涌现出了几十个平台,而这也导致了一些滥竽充数的品牌混在其中,那么在让人眼花缭乱的市场中,如何选择一个既有实力又靠谱的低代码平台呢? 以下这9 ...

  9. J2PaaS低代码开发平台——信息化系统的流水线工厂

    传统信息化的实现方式主要有两种 一种是购买市场上现有的信息化产品,这类产品是信息化系统的标准产品,但在一些特殊应用上就无法使用,比如流程管理,基本上因人而异. 另一种是直接定制开发信息化系统,这种方式 ...

最新文章

  1. 电气毕业什么都不会怎么办?电气专业毕业的都去干什么了?
  2. [Unity Editor]10行代码搞定Hierarchy排序
  3. LeetCode Linked List Cycle II(floyd cycle)
  4. jmeter启动报错 Error occurred during initialization of VM Could not reserve enough space for object heap
  5. iOS 推送通知 客户端实现
  6. 走出浮躁的泥沼:浮躁的社会原因 控制好自己的物欲
  7. Android 撸起袖子,自己封装 DialogFragment
  8. 【超全指南】Java 8 中使用 Optional 处理 null 对象
  9. 【hive】hive常见的几种文件存储格式与压缩方式的结合-------Parquet格式+snappy压缩 以及ORC格式+snappy压缩文件的方式
  10. 集合类ArrayList、HashMap、HashSet线程不安全
  11. 别再造假数据了,来试试 Faker 这个库吧!
  12. acp cp linux命令,系统运维
  13. 芯片数据分析步骤7 合并重复探针
  14. python lncrna_使用CPAT分析lncRNA
  15. Win7 64b的VS2015 如何使用nmake成功编译detour express 3.0-error2202 警告被视为错误 - 没有生成“object”文件
  16. 浮点数与32位16进制互转(有代码)
  17. CSS的表格样式和列表样式
  18. Abrash和TimSweeney两个文章
  19. 基于机器学习中集成学习的stacking方式进行的金线莲质量鉴别研究(python进行数据处理并完成建模,对品种进行预测)
  20. Qt: 表格(QTableWidget)隐藏自动生成的序号列(行头)

热门文章

  1. Mysql查询统计按年月日(年、季、月、周、日)
  2. python远程连接mysql数据库_python远程连接MySQL数据库
  3. 两年前、同事辞职去做私募、看不懂时代的我们错过了什么
  4. 如何写3DMAX的插件
  5. 游戏中的弹道学手册(转)
  6. 产品运营:用户为什么要用你的产品
  7. 思科任命尝试副总裁加里摩尔出任首席运营官
  8. 听说台积电去美国建厂出问题了?张忠谋:明年再说
  9. 计算机不上电维修流程,电脑主板不加电的维修流程
  10. 新手指南:互联网创业要准备什么?