逻辑编排在优酷可视化搭建中的实践（二） - 编排器与业务

背景与价值

说到逻辑编排大家应该都不陌生了，目前我们集团有多面向后端的逻辑编排技术专项，且没有统一的标准、沉淀通用的方案。也有前端逻辑编排项目，但均面向前端开发提效的逻辑编排，而我们是要打造一个面向非研发人员，可让他们根据图形化组件搭建出逻辑的平台。

为什么要做这个呢，围绕我们团队的活动搭建平台来说，随着页面可视化搭建的蓬勃发展，互动营销类的页面/组件需求日益增长，为了提高开发效率，研发侧不断地沉淀通用的基础库，与服务端商定标准化的接口，以此来减少维护成本，但现有的可视化搭建效率和研发效率都已经达到瓶颈了，再多的需求进来也是在堆人力了，经常会出现资源不足、排期紧张的情况，我们急需一种新的生产模式，给我们带来生产效率的突破性提升。

那我们前端尝试了页面级、模块级的复用，减少代码重复开发，提升产研效率。我们是否也可以拆分到更小粒度，函数层的逻辑复用呢？这就是我们近期打造的具有前端特色的逻辑编排平台 - YOHO，建立令非研发人员自由且规范化编排逻辑的编排器，以NoCode的形式，借助图形化组件，完成逻辑的搭建生产，并可复用于多业务场景。

本文通过逻辑编排可视化搭建的设计与业务实践，来和大家做一些交流。

编排器

基础概念
编排器是逻辑编排中通过可视化搭建，生成一条具有业务逻辑的容器；将逻辑流程图导出，通过DSL转化，生成业务中实际执行的代码逻辑。可以理解为逻辑编排中生产逻辑的环节。

平台侧编排器设计为如图四个部分。工具栏、元件列表、搭建画布、基础配置。

工具栏包含保存逻辑、检查搭建规范性和导出逻辑这些基础操作。

元件是逻辑中的一个节点，一个函数，是将业务中常用的逻辑抽离出来，按照编码规范沉淀下来。如下图列表中有不同形状色彩的元件，是我们根据函数类型对元件的进行的分类。

中间部分是进行逻辑搭建的画布，主要操作动作是将逻辑元件拖拽进来，通过具有指向性的线条将元件连接起来，组合成一条完整有始有终的逻辑，实现简单的或者复杂的具有特定业务含义的流程图，也是核心部分。

右侧是点击某个元件所显示的对应基础配置信息面板，即函数的入参，我们的设计一定是令用户可灵活配置元件基础信息。

在设计该编排器的时候，我的目的是通过技术手段，建立令用户最大化自由编排且规范的编排器，使之无侵入、可复用各业务场景。下面介绍我们是如何具体设计的。

整体设计

元件设计
基于G6绘图引擎能力，根据元件定义类型，注册出不同形状、色彩、结构的元件。元件由主体形状、分支线、描述文字、节点四部分组成。其中节点如图也分上下两部分，上方节点是其他元件连接至当前元件的节点，下方节点是当前元件可连接至其他元件的节点。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gYWZEE3O-1636024172026)(https://ata2-img.oss-cn-zhangjiakou.aliyuncs.com/87c660c907fbd7067bb0b377439895d7.png?Expires=1636027568&OSSAccessKeyId=5brTYsCF9kNTYdU5&Signature=LxqqADzywhYprxTtkCM1sc6MYMQ=#pic_center)]

为了令用户更丝滑且更标准化地搭建逻辑，我们在设计元件时将一切限制条件，得已显示，在用户所有可执行的动作中，得已体现。例如我们在初始化元件环节，开发者可设定好该元件会有几种输出情况、几个分支，每个元件可连接几个其他元件，每条分支代表哪种结果导向，定向去做关联。所见即所得，不让用户去猜或任意自定义连接。

这样设计的目的是，减少用户操作成本，减少解释成本，增强搭建规范性。

元件类型

<