共计 6675 个字符，预计需要花费 17 分钟才能阅读完成。
背景与价值
说到逻辑编排大家应该都不生疏了，目前咱们团体有多面向后端的逻辑编排技术专项，且没有对立的规范、积淀通用的计划。也有前端逻辑编排我的项目，但均面向前端开发提效的逻辑编排，而咱们是要打造一个面向非研发人员，可让他们依据图形化组件搭建出逻辑的平台。
为什么要做这个呢，围绕咱们团队的好莱坞搭建平台来说，随着页面可视化搭建的蓬勃发展，互动营销类的页面 / 组件需要日益增长，为了进步开发效率，研发侧一直地积淀通用的根底库，与服务端约定标准化的接口，以此来缩小保护老本，但现有的可视化搭建效率和研发效率都曾经达到瓶颈了，再多的需要进来也是在堆人力了，常常会呈现资源有余、排期缓和的状况，咱们急需一种新的生产模式，给咱们带来生产效率的突破性晋升。
那咱们前端尝试了页面级、模块级的复用，缩小代码反复开发，晋升产研效率。咱们是否也能够拆分到更小粒度，函数层的逻辑复用呢？这就是咱们近期打造的具备前端特色的逻辑编排平台 – YOHO，建设令非研发人员自在且规范化编排逻辑的编排器，以 NoCode 的模式，借助图形化组件，实现逻辑的搭建生产，并可复用于多业务场景。
本文通过逻辑编排可视化搭建的设计与业务实际，来和大家做一些交换。
编排器
根底概念
编排器是逻辑编排中通过可视化搭建，生成一条具备业务逻辑的容器；将逻辑流程图导出，通过 DSL 转化，生成业务中理论执行的代码逻辑。能够了解为逻辑编排中生产逻辑的环节。
平台侧编排器设计为如图四个局部。工具栏、元件列表、搭建画布、根底配置。
工具栏 蕴含保留逻辑、查看搭建规范性和导出逻辑这些根底操作。
元件 是逻辑中的一个节点，一个函数，是将业务中罕用的逻辑抽离进去，依照编码标准积淀下来。如下图列表中有不同形态色调的元件，是咱们依据函数类型对元件的进行的分类。
两头局部是进行逻辑搭建的 画布，次要操作动作是将逻辑元件拖拽进来，通过具备指向性的线条将元件连接起来，组合成一条残缺善始善终的逻辑，实现简略的或者简单的具备特定业务含意的流程图，也是外围局部。
右侧是点击某个元件所显示的对应 根底配置信息面板，即函数的入参，咱们的设计肯定是令用户可灵便配置元件根底信息。
在设计该编排器的时候，我的目标是通过技术手段，建设令用户最大化自在编排且标准的编排器，使之无侵入、可复用各业务场景。上面介绍咱们是如何具体设计的。
整体设计
元件设计
基于 G6 绘图引擎能力，依据元件定义类型，注册出不同形态、色调、构造的元件。元件由主体形态、分支线、形容文字、节点四局部组成。其中节点如图也分高低两局部，上方节点是其余元件连贯至以后元件的节点，下方节点是以后元件可连贯至其余元件的节点。
[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传(img-gYWZEE3O-1636024172026)(https://ata2-img.oss-cn-zhang…)]
为了令用户更丝滑且更标准化地搭建逻辑，咱们在设计元件时将所有限度条件，得已显示，在用户所有可执行的动作中，得已体现。例如咱们在初始化元件环节，开发者可设定好该元件会有几种输入状况、几个分支，每个元件可连贯几个其余元件，每条分支代表哪种后果导向，定向去做关联。所见即所得，不让用户去猜或任意自定义连贯。
这样设计的目标是，缩小用户操作老本，缩小解释老本，加强搭建规范性。
元件类型
依据元件是否含有逻辑，将元件分为两大类：根底元件、业务元件。如上树形图。
根底元件 不带有任何业务逻辑，蕴含开始、完结元件，固定为一条逻辑的终点或起点标识，每条逻辑必有开始元件和完结元件。把根底元件设计为圆形、绿色；
业 务元件 均带有业务逻辑，仅有一个输出节点，根据元件可输入的后果数量，将业务元件又更细粒度地分为三种类型。（详情如下表）
完结业务元件，尽管带有业务逻辑，但也可能是一条逻辑的起点。如跳转新页面逻辑，这个动作执行后会跳转到一个新地址，无奈在以后页面以后逻辑持续传递至下一动作，所以称之为完结业务元件，所以设计它为仅有一个输出节点，无输入节点。因为同样标识一条逻辑的完结，我也将它设计为圆形，用黄色作为辨别。
一般业务元件 就是一个失常有输出且有固定一种后果导向的元件，比方通过接口申请获取数据，会有固定 schema 格局的返回数据输入；所以一般业务元件有一个输出节点，一个输入节点，形态为长方形。
判断业务元件 会简单点，依据元件设计规范，在创立元件时即可确定有多种后果输入，该后果为 >1 种，且也会有固定 schema 格局的返回数据输入。如判断用户是否登录，分为已登录、未登录两种状况；判断业务元件也不是非 1 即 0 的状况输入，也可能会有 a、b、c、d… 多后果导向。因而一般业务元件有一个输出节点，N 个输入节点，形态设计为菱形。
咱们依据函数类型定义、注册元件，尽可能涵盖所有的类型，目标就是让这套逻辑编排计划通用化、可复用，实用于多业务、多场景。
注册元件
元件有多种形态、色彩、分支、节点不定，平台侧注册元件的思路：拿判断业务元件为例，应用 SVG 绘制菱形 – 元件主体形态，依据元件类型自定义元件款式，依据元件的分支数量，动静绘制分支线的长度、节点地位、锚点信息等等。
G6.registerNode(
'diamond',
{draw(cfg: Cfg, group: GGroup) {const size = [94, 64]; // 转换成 [width, height] 的模式
const width = size[0];
const height = size[1];
// svg 自定义主体形态
const path = [['M', 0, 0 - height / 2], // 上部顶点
['L', width / 2, 0], // 右侧顶点
['L', 0, height / 2], // 下部顶点
['L', -width / 2, 0], // 左侧顶点
['Z'], // 关闭
];
...
},
afterDraw(cfg: Cfg, group: GGroup) {const size = [100, 64];
const width = size[0];
const height = size[1];
// 分支形容信息
addDesc(cfg, group, width, height, cfg.outLine);
// 分支线
addLine(group, width, height, cfg.outLine);
// 连贯锚点（小圆点）addNode(group, width, height, cfg.outLine, cfg.showNode);
},
...
},
'base-node',
);元件分支线也是长短、方向各异，线的长度由分支数量决定，即代码中 outline 字段：
const addLine = (group, width, height, outLine) => {
group.addShape('path', {
attrs: {
path: [['M', -width / 2 * (outLine - 1), height + 3],
['L', width / 2 * (outLine - 1), height + 3],
['Z']
],
...edgeStyle
},
draggable: true,
});
}```
元件的节点分为一个输出节点，一组输入节点，输入节点的地位仍然由 outline 决定
const addNode = (group, width, height, outLine, isShow) => {
// x 坐标
let xPosition = i => {
return -width / 2 * (outLine - 1) + width * i;}
outLine && new Array(outLine).fill(0).forEach((d, i) => {
group.addShape('circle', {
attrs: {x: xPosition(i),
y: height + 4,
r: 4.5,
...dotStyle
},
name: `circle-shape-${i + 1}`
});})
}`
创立元件
用户须要依据标准，去创立一个新的元件，初始化我的项目蕴含四个外围文件，拿根底业务元件举例，如图所示。
index.js 是元件的主体函数逻辑文件，函数个别是有入参的，且能够让用户灵便配置。input.json 文件即定义为函数根底配置信息的规范 Schema 协定，该内容在平台侧可渲染为表单，供用户配置根底信息，在逻辑执行过程作为 payload 参数传入对应函数。
根底业务元件，函数执行有固定一种后果输入的状况，那 branch.json 这个决定分支数量与分支信息的文件就有数组长度为 1，只输出一项内容，录入即可。
output.json 是主体函数执行后最终 return 返回的 data 数据对应的规范 json schema 协定信息。输入数据是逻辑编排的产物，如图，可供业务侧绑定对应字段，可视化显示出对应内容。
不同元件类型，我的项目构造是一样的，不同的是，输入后果的数量不同，主体函数异步返回的内容构造有区别。
如查看登录元件，会返回已登录、未登录两种状况，那主体函数会调用相应的 api 后，通过判断在两种返回状况里做抉择。返回信息 branch 为 0，即为 branch 文件对应的数组第一项的未登录的返回状况；branch 为 1，即为 branch 文件对应的数组第二项的已登录状况，返回 data 也对应已登录的音讯提示信息。Branch 文件的数组长度即为元件输入后果的数量，数组内容也是语义化对应的。这就是元件整体构造的设计与对应开发录入标准，开发者依据这样的标准即可创立对应类型的新元件。
input、output 文件的 schema 标准协议数据咱们也提供了【可视化搭建 表单设计器】供开发者疾速搭建出对应内容。
基于 form-render 的可视化搭建
咱们平台嵌入了基于 form-render 的表单设计器，可联动、自定义组件疾速接入，满足多元定制化需要。思考到 form-render 在 schema 的设计上，寻求适合的现有规范作为载体在其上适度扩大，通过长时间积攒曾经能够笼罩大部分业务场景，所以根本能够实现咱们的业务诉求，即可能会有的扩大，所以抉择该 schema to form 计划。
技术同学可依据性能需要，通过可视化拖拽的形式搭建出配置表单；点击导出 Schema，即可导出规范 json schema 协定信息，这就是元件注册环节的根底配置信息 InputSchema 协定起源，也是输入数据 outputSchema 标准协议信息起源。
提供搭建的元件市场
逻辑编排的劣势是将逻辑与 UI 解耦，并且职责划分明确；开发同学的职责是开发元件逻辑，对元件进行公布、录入元件市场、状态治理、迭代版本治理。产品同学依据需要，在元件市场抉择已有元件，若无对应元件向开发同学提需要，而后进行搭建逻辑，生产逻辑供业务侧应用。
逻辑编排
搭建逻辑，是将元件列表中的元件拖拽至画布中，通过具备指向性的线条将节点与节点对应连接起来，即可将逻辑片段组合成一条残缺善始善终的逻辑。（成果展现）
通过技术手段，削减了搭建智能对齐、查看标准、主动纠错等能力。点击工具栏中查看按钮、保留按钮，都会依据规定对不标准搭建行为提醒阐明，例如元件根底配置表单某字段不可为空；在用户搭建过程，咱们也设计了元件连贯规定，对不标准搭建行为主动纠错，例如元件不可闭环连贯、不可反复连贯等。咱们建设令用户最大化自在编排且规范化的编排器，使用户在搭建、公布逻辑时，曾经是标准可应用的逻辑。
当然咱们在设计编排器上，也将物料列表、画布、属性面板，做解耦解决；每个性能面板不会强依赖于另一个，有通用适配器，设定好的根底标准与可供选择应用的工具，也有可依据不必业务场景做定制化的板块。咱们的初衷是，以逻辑搭建为核心，可依据理论业务场景打造不同的产品状态。
** 业务落地
UI& 逻辑编排联合设计 **
咱们首个尝试落地的业务平台也是咱们团队的好莱坞平台，与 UI 编排的联合尝试。UI 编排的概念：也称为通用热区模块，是好莱坞平台推出的模块生产工具，提供易用、弱小的操作界面，让经营和设计同学像制作 PPT 一样制作模块。如图，UI 编排齐全可实现一个动态页面的搭建；用户可任意创立热区模块，热区作为一个载体可配置文字、款式、图片等根底信息，在对应热区绑定“动作”，动作的概念就是用户被动点击后所触发的一个行为，如跳转页面、敞开页面、关上小程序等等。这是纯 UI 编排搭建。
本次暑假战斗的一个模块应用 UI 编排进行了搭建尝试。咱们来看下 UI 编排与逻辑编排联合起来的整体设计。
在模块中触发逻辑分为两种状况，一种是被动触发逻辑，即随同组件加载主动开始执行的逻辑。一种是被动触发逻辑，须要用户点击才可触发执行的逻辑。在对应性能配置区抉择提前搭建好的逻辑即可将逻辑挂载到以后模块。
如图，每一条逻辑都领有独立上下文，逻辑执行后对应的数据产物，会存于上下文并与以后模块共享；模块将所有数据以 key.value 的格局打平，通过语义，将视图中的热区绑定对应字段；一旦逻辑执行过程中数据状态产生扭转，就会驱动模块的部分 UI 动静渲染。若模块的状态绑定了对应字段，那字段数据状态产生扭转，也会驱动模块整体 UI 扭转。
平台侧实际操作，如下图右侧，热区抉择动作中的“逻辑编排”，二级下拉框抉择一个 从逻辑编排平台搭建好导出的逻辑。
逻辑的数据产物依据 outputSchema 协定可视化展现在业务平台侧，对应热区模块可抉择 / 绑定对应字段内容，逻辑真正执行时，数据驱动视图扭转。
前后比照 – 有什么劣势
从前：产品提了需要后，前端开发同学须要依赖设计稿，开始页面开发 & 逻辑开发，开发实现后公布、录入模块至平台侧，经营同学方可配置模块根底信息。
当初：在理解需要后，前端 & 设计可并行启动工作了，前端同学开始开发该模块须要依赖的逻辑元件，开发实现后产品依据需要搭建出逻辑；设计同学也可开始绘设计稿并在平台侧可导入整体款式，进而经营同学去配置根底信息、对应动作抉择匹配的逻辑。
这样的长处是：我的项目进行中，UI、逻辑的频繁改变不会太过于依赖技术开发、技术发版，将 重开发拆分为多角色轻工作快迭代 ；咱们从模块复用，下沉到更小粒度的元件复用，开释研发人员的 “ 搬砖 ” 工作。教训证，传统源码开发从接到需要到上线大略须要评估 2 天工夫，通过 UI 逻辑编排联合的计划仅须要 2h。真正实现降本提效。 并且最大的长处是做到逻辑与 UI 的解耦。
当 UI 设计稿有变动时，前后流程的比照：
纯 UI 改变曾经齐全开释开发资源，节俭源码开发 -> 代码公布 -> 模块录入 / 上架 -> 经营降级模块的流程，既节俭开发人力老本，经营同学通过增 / 删 / 改配置信息也不再依赖开发。
尽管逻辑变动看似多了一个判断步骤，但若已有可复用的逻辑元件，产品间接拖拽更新逻辑即可；无可复用元件需开发同学新开发。但久远角度思考，咱们从模块复用，下沉到更小粒度的元件复用，元件库一直积淀着逻辑，将来元件复用率肯定是增长的。咱们从开发角度，也在布局从本地元件开发降级为在线开发，一键公布并上架元件。让流程编排效率更大一步晋升。
结构图
这张结构图展现了逻辑编排与业务平台侧整体上下游关系
逻辑编排分为编排器、DSL、Runtime 三局部
- 编排器基于 Schema 解析和 G6 绘图引擎，联合对元件类型的定义注册绘制出不同状态与性能的四种元件，供画布搭建应用；元件是由开发者开发，且可在元件治理页面对元件进行治理。画布蕴含缩放、撤销等工具栏性能，用户搭建过程，咱们通过技术手段提供智能对齐、查看标准、主动纠错、在线测试等能力，让用户更顺滑且标准地搭建出逻辑。
- DSL 转换器 将画布所有信息转换为 json，提供给业务方
- 业务平台侧（好莱坞）逻辑的终点在被动触发逻辑 & 被动触发逻辑，一旦逻辑被触发，由 Runtime 提供的 api 进行注册元件，并开始执行，每一个元件的执行对应的数据产物会通过 context 与业务共享，一旦绑定字段对应的数据产生状态变动，会引起部分 UI 变动，模块整体状态切换。动作执行完流转到下一动作，如此直到逻辑完结。
这就是逻辑与 UI 联合的整体 / 外围思路，逻辑编排产生数据，UI 编排监听数据变动，驱动试图扭转。
总结
逻辑编排在以下三个方面做出了冲破：
逻辑可复用 ： 防止研发同学反复代码开发，节俭人力老本，实现降本提效，也使需要变动老本升高；
分工更明确：实现了 UI 与逻辑解耦，技术在开发环节仅开发逻辑，将重开发工作，拆分为多角色轻工作的配合。且产品搭建逻辑的同时，也将需要可视化，便于别人了解；
业务可复用：通过对元件、画布、DSL、Rumtime 的通用化、灵活性且可扩大地设计，使可实用于多业务场景。咱们的布局是，以逻辑搭建为核心，可依据理论业务场景打造不同的产品状态，心愿能够服务更多平台。
