飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

京东云开发者
• 阅读 213

一、配置解法

飞码LowCode前端技术(一)中飞码提出了至少需要满足2个大能力点以及对应16个细化点。在业务复杂的场景下数据具有流转性质,事件的触发会改变数据、同时也会触发其他事件等情况。飞码使用数据驱动+事件驱动的模式解决数据流转性与事件不确定性问题。数据驱动+事件驱动的模式决定了需要飞码的编辑态具备数据可配性、事件可配性。为LowCode或NoCode解营销域下的场景奠定夯实基础。整体设计详见图1

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图1

在飞码LowCode前端技术(一)中细说了飞码DSL设计以及每个独立单元数据结构的设计。以下会对如何便捷配置出页面(编辑态)中的前3个(数据源、组件、模板)进行说明。

二、数据源(接口)设计

Web页面与服务端之间的交互一般使用http接口实现,飞码通过4个步骤分别研究接口配置与数据使用。分别是接口来源、接口入参、接口出参、组件或其他地方使用。详见图2

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图2

接口来源:通常来源为http、有时候使用jsf实现数据交互、在同一个页面中接口还可以复用以及自定义情况。我们使用j-api平台与BFF平台分别解决http配置问题与jsf接口问题。同时也支持手动录入接口与接口复用能力。详见图3

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图3

当选择用户对应权限下的j-api,之后可以通过级联选择对应的接口,便可以快速回显数据到接口基本信息中。接口的入参可能来自页面的入参、组件的出参、其他接口的出参、业务逻辑处理之后的数据,或其他常量。情形1:form表单的提交中有众多组件,我们通过关联属性方式实现一键绑定form组件中所有子组件的出参,如图2点击{ }即可实现关联。情形2:其他情况,接口的入参来自很多种情况。飞码使用组件出参+js脚本解决方案,js脚本解决点击{ } 之后可以选择页面的入参、组件的出参、其他接口的出参、业务逻辑处理之后的数据,或其他常量情况。可实现全局视角进行配置,也可以进行简单的js处理。详见图4

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图4

接口入参:数据源可以通过便捷选择,进行配置。作为兜底方案,可以使用js进行处理,为了最大程度较少代码书写,飞码集成了11类的常见js函数,以及其他常见js函数。详见图5

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图5

对于http接口配置从接口获取,接口入参配置,以及业务复杂逻辑情况下接口入参如何配置进行了最大力度的便捷。
接口出参:接口出参包含成功、异常数据,在开发中经常mock数据。于是飞码包含了3种配置项。详见图6

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图6

正常、异常数据结构,数据可以从j-api、bff带入。模拟数据可以手写录入根据业务情况自行调整。

问题1:业务线不一样情况下,正常数据结构判断不一样飞码怎么解?

解决方案有:

1、合并接口数据结构,通过一种数据结构描述整个可能出现的情况。
2、一般接口通过一个标识码做区分,例如type=1,2…之后通过type来判断使用哪一种数据结构。

近期飞码验证的11个业务场景中,目前还没有遇到类似情况。目前飞码支持方案1解法,对于方案2飞码会根据具体需求必要性进行升级配置。

问题2:前页面中有多个接口,测试、预发、线上环境如何一次性切换?

飞码的解决方案有2种

1、 页面后管进行配置,页面配置中设置了一个字段hostUrl,通过后管进行配置之后便可以实现测试、预发、线上环境自动切换。
2、 页面级别的配置,在编辑态页面中进行配置。详见图7

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图7

问题3:业务线不一样,接口可能返回不一样的code码(正常数据)如何处理?

飞码使用页面配置统一管理,详见图8。内置200,success,00000情况。其他情况直接配置即可,优先级最高。

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图8

以上讲述了飞码数据源设计思路与解决方案。有关接口的触发事件会在事件小节中进行详细说明。

三、组件设计

组件的丰富度以及便捷性决定了LowCode工具的易用性与扩展能力,飞码对组件进行划分,分为官方组件+业务组件。组件通过配置实现、支持动态加载是低代码的必备要求。查看飞码LowCode前端技术(一)中图2,飞码通过type=1,2区分组件是本地组件还是远程组件。业务组件与飞码是完全解耦的。飞码LowCode前端技术(一)图2中描述,组件具有样式、数据、属性、事件4个维度能力。

样式:每一个组件css样式配置具有一致性,飞码组件css配置通过固定+扩展实现方案。详见图9

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图9

属性:飞码依赖elementUI组件(其他组件也支持,下文以elementUI组件为主进行说明),组件中各种配置在实际业务场景中并不常用。飞码对属性配置使用飞码lite版本实现,飞码lite版是一个快速生成数据结构可视化的工具。以el-button为例,目的是Attributes转为飞码组件可配置的属性。图10为el-button各种属性,图11为飞码工具对组件属性配置可视化配置。

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队 飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图10 图11

飞码lite版,专门配置简单表单类的工具,这样通过飞码lite版可以便捷配置出图11。飞码组件物料设计如图12所示。

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图12

飞码中组件样式、数据、属性、事件配置均是通过飞码lite版本快速搭建实现。飞码lite版本如图13所示。

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图13

飞码组件JSON文件格式如图14所示,JSON中包含了样式、数据、属性、事件的默认值,与组件类型type。

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图14

图12中组件JSON输出即为图14内容,当图14中的type=2表示组件来之远程。图11中name字段右侧有一个 { },表示这个属性支持动态配置,动态配置的数据源与图4一致。根据业务线web页面情况不同业务线需要配置属性有差别,飞码对组件提供数据可配型支持,通过在propsModel中增加"reactive":["v-model"]字段进行声明。若多个字段需要声明,在reactive对应的数组字段增加即可。

事件:与属性配置一致,对组件中的声明进行配置即可。如图15所示

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图15

数据:飞码是数据驱动+事件驱动的设计思路,在组件数据区域包含样式配置与属性配置列表。详见图16所示

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图16

在组件数据配置区域,样式前缀为style即可对样式进行配置,可以是数据驱动实现组件样式,也可以通过图4样式进行数据配置,当有冲突时js优先级最高。数据配置同时也包含属性配置列表,属性字段对应的值也可以通过图4方式进行配置。数据配置区域放在一起,便于整体观察配置关系。

问题:组件是不是可以通过脚本自动生成飞码组件json文件?

实践中发现,UI组件库提供属性&事件能力较多,部分属性实际场景中用不到,这样会导致属性字段配置区变长。同时需要考虑哪些属性字段支持 { } 配置。后续飞码会根据业务情况支持自动生成。

模板设计

不同页面之间有相同的区域可以进行便捷抽取为模板;飞码官方可以定做些模板提供研发使用,研发自己也可以进行模板收藏,下次进行使用。
飞码认为有两种模板,一是UI模板,二是UI+BIZ模板(也包含页面模板)。如图17

飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队

图17

飞码之前设计思路是两种模板类型。实践中发现UI+BIZ复用有困难,困难点包含:

1、 模板可能依赖多个接口问题;
2、 模板存在事件情况,也可能有多个事件;
3、 页面1与页面2接口接口地址前缀可能不一样;
4、 模板中组件配置的v-model,其他页面可能存在重复情况;
5、 若模板是form表单中有校验规则,其他页面也可能存在;等等

飞码目前仅支持UI模板,与页面模板。这样避免问题定位困难与其他配置期间问题。

五:小结

本节分析了飞码LowCode前端技术(二)如何便捷配置出页面-1,分别从数据源、组件、模板进行说明。飞码的目标是实现配置化,接近NoCode。下面的一个小节飞码LowCode前端技术(三)如何便捷配置出页面-2,分析飞码数据、事件、业务支持方面的技术实现。

作者:京东科技 王光辉

来源:京东云开发者社区 转载请注明来源

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
jabdp宝典:新版事件编辑
         低代码开发平台jabdp的页面事件编辑迎来了重大更新,本次更新对事件编辑进行了许多优化。好了废话不多说,就让小编带大伙来了解下新版事件编辑吧!(新版)事件编辑        Jabdp平台的javascript编程是基于事件驱动的,所谓事件驱动,就是指在页面中执行了某种操作所产生的动作,就称为“事件”(Event)。比如
Squirrel状态机-从原理探究到最佳实践
Squirrel状态机是一种用来进行对象行为建模的工具,主要描述对象在它的生命周期内所经历的状态,以及如何响应来自外界的各种事件。比如订单的创建、已支付、发货、收获、取消等等状态、状态之间的控制、触发事件的监听,可以用该框架进行清晰的管理实现。使用状态机来管理对象生命流的好处更多体现在代码的可维护性、可测试性上,明确的状态条件、原子的响应动作、事件驱动迁移目标状态,对于流程复杂易变的业务场景能大大减轻维护和测试的难度。
风险洞察之事件总线的探索与演进
作者:京东科技刘红申一、事件总线介绍事件总线,或称其为数据管道,作为整个风险洞察数据流转的重要一环,它承担着风险实时数据统一标准化的重要职责。在面对复杂多样的上游数据,事件总线可以将复杂数据进行解析、转换,富化、分发等操作。底层核心算子抽象为source、
Stella981 Stella981
3年前
NET Core Web API下事件驱动型架构CQRS架构中聚合与聚合根的实现
NETCoreWebAPI下事件驱动型架构在前面两篇文章中,我详细介绍了基本事件系统的实现,包括事件派发和订阅、通过事件处理器执行上下文来解决对象生命周期问题,以及一个基于RabbitMQ的事件总线的实现。接下来对于事件驱动型架构的讨论,就需要结合一个实际的架构案例来进行分析。在领域驱动设计的讨论范畴,CQRS架构本身就是事件驱动的,因此,我打算首先介
Stella981 Stella981
3年前
Android的消息循环与Handler机制理解
一、概念1、事件驱动型什么是事件驱动?就是有事了才去处理,没事就躺着不动。假如把用户点击按钮,滑动页面等这些都看作事件,事件产生后程序就执行相应的处理方法,就是属于事件驱动型。2、消息循环把需要处理的事件表示成一个消息,并且把这个消息放入一个队列。消息循环就是一循环,for或者while都一样。从消息队列里面取出未处理的消息,然后调用该消息的
Wesley13 Wesley13
3年前
#分布式系统架构之# 事件驱动模式以及与之匹配的长时间处理过程讨论
     在分布式系统下,可以很多种架构从事设计,或者分布式系统对技术架构本身没有做严格的限制。但是结合自己的实践以及基于《领域驱动设计》的推荐,采用【事件驱动模式】是比较好的一种分布式系统架构方式。该模式充分实现了不同系统之间的代码解耦,所有的业务流转是通过事件广播进行驱动的。所有业务都是在针对名为【事件总线】的组件在编程,也无需知道事件的生产者
Easter79 Easter79
3年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx
京东云开发者 京东云开发者
11个月前
飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队
简介飞码是京东科技研发的低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)背景与数据结构设计,(2)如何便捷配置出页面1,(3)如何便捷配置出页面2,
京东云开发者 京东云开发者
11个月前
飞码LowCode前端技术:如何便捷配置出页面 | 京东云技术团队
简介飞码是京东科技平台研发部研发的低代码产品,可使营销运营域下web页面快速搭建。本文将从三个方面来讲解如何便捷配置出页面,第一部分从数据、事件、业务支持三个方面进行分析,第二部分从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析,第三部分从监
京东云开发者 京东云开发者
11个月前
飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队
本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。一、数据中心,事件中心设计飞码是数据驱动事件驱动的产品,考虑到飞码运行环境,飞码自己封装了store。数据中心:在同一个页面中可