飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

京东云开发者
• 阅读 162

简介

飞码是京东科技研发的低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)背景与数据结构设计,(2)如何便捷配置出页面-1,(3)如何便捷配置出页面-2,(4)如何便捷配置出页面-3,(5)如何便捷配置出页面-4,(6)如何便捷快速验证实现投产及飞码探索,(7)飞码画布的设计。

一、背景与分析

营销域下web页面逻辑复杂、接口多、UI要求较高等特性。在复杂业务下使用ProCode需要较多调试与自测才可以达到业务期望值。飞码的目标是从ProCode到LowCode,再到NoCode。如何使用LowCode或NoCode赋能营销域下的场景,飞码认为需要从以下两个大方面解决。

1、 如何便捷配置出web页面(编辑态)

1-1、 数据源(接口):便捷数据源配置、同时也支持复杂数据源扩展能力
1-2、 组件:如何用低代码能力快速创建组件;如何快速集成第三方组件;组件与平台是解耦;组件的属性、样式、数据、事件可以定制化配置。
1-3、 模板:不同页面之间有相同的区域可以进行便捷抽取为模板;飞码官方提供常用的模板。
1-4、 数据:页面中的数据具备共享能力;数据源可以复用;数据分类清晰;常见固定数据可配等。
1-5、 事件:组件中各种事件支持配置,串行事件,并行事件;事件支持调用其他事件;事件与数据共享需要打通。
1-6、 业务支持:需要具备配置埋点、权限等能力,函数便捷配置能力。
1-7、 收藏与升级:具备收藏模板再次开发能力与页面收藏再次开发能力。
1-8、 页面UI结构:页面的组件结构,便捷的排版与布局。
1-9、 画布功能:支持精准拖拽、支持上下移动复制、可对特定组件扩展特定能力。复杂区域配置应支持局部画布能力。
1-10、 监测:对配置有问题的组件属性,方法等可以监测定位;也需要定位弹框,事件配置问题等。
1-11、 页面配置:页面全局数据、页面入参、需要支持动态配置能力。
1-12、 页面数据导入导出:页面数据DSL支持便捷导入导出能力。
1-13、 其他能力:回退上一步,历史、预览等能力。

2、 如何便捷快速验证并投产(运行态)

2-1、数据中心,事件中心如何协议工作。
2-2、不依赖环境:对vue2.x、vue3.x 项目都可以支持,复杂业务场景如何支持。
2-3、投产页面问题定位:快速找到并给出可能出现的错误位置,包含:数据类型错误、接口错误、组件错误等;每一个组件显示与隐藏规则图谱,每一个事件调用关系图谱等。
于是得出至少需要满足以上2个大能力点以及对应16个细化点(下文中会使用16个细化点描述)。才可以保障从LowCode或NoCode。

二、飞码编辑态功能简介

便于用户操作,飞码将组件与模板相关能力放在搭建平台的左上角,具有共享属性(数据源、事件、弹框、函数、数据)的部分配置放在页面的左下角。根据业务线不同,业务组件放在基础组件下方。在页面的顶部区域设计有FMHelper能力,可对页面配置内容做监测。详见图1所示。

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图1

三:数据结构分析与设计

设计LowCode或NoCode,需要先设计相关的DSL。DSL设计是需要满足字段少、可扩展、无异议等性质。根据部门内部技术栈使用与积累情况,飞码使用vue技术栈进行设计与开发。对比vue中接口VNode与VNodeData数据结构,结合需要满足2个大能力点以及对应16个细化点。可以推导出飞码组件父级数据结构defaultData如下图2所示:

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图2

可以看出,该数据结构并不能满足上述16个细化点。数据源、数据、事件、弹框具有全局性质。飞码的方案是寻址查找,飞码DSL数据结构如图3所示。

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图3

四:数据源、数据、事件、弹框的数据结构分析

数据源:前端视角认为数据源等同于接口(API),接口是否被调用是通过事件触发的或者在页面生命周期函数中被执行的。可以认为事件触发请求接口,接口返回数据,页面缓存接口返回数据。考虑到复用性于是数据源用一个数组描述,详见图4,其中apis为图3中apis字段。考虑到id的易读性,apiId开头使用ap描述。

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图4

数据:数据是一个页面中各个组件绑定的数据以及其他缓存数据,页面层级的数据具有共享。便于理解与定位数据,飞码将弹框与页面级别的数据分离开、数据源数据与页面数据也分离开。页面的数据结构设计如图5,图6所示,图5是数据结构,图6是编辑态页面配置样式。

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队)飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图5图6

事件:当我们点击一个按钮,或者页面生命周期函数触发,或者我们点击一个组件等会触发一个事件。事件可理解为代码中的方法,方法可以调用其他方法,方法具有方法名,也会有入参与返回值。飞码设计出事件id,通过寻址方式满足各种调用情况。其数据结构如图7所示。

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图7

在图7中,可以看到事件eventId开头是ev,这样便于与api,弹框区分。页面中的所有事件放在events.children数组中。
弹框:有时候会遇到较复杂弹框,弹框也可以触发另外一个弹框,弹框消失的时候会触发一个事件等等。在一个页面中可以有多个弹框,弹框的显示与消失具有复杂性。为了便于区分弹框与页面之间的关系,单独对弹框进行字段分离,其数据结构详见图8,图9为编辑态情况下配置样式。便于理解与问题定位dialogId开头是为tk。

飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队)飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队

图8图9

五:小结

本小节分析了飞码背景以及设计LowCode或NoCode平台需要至少解决2个大能力点以及对应16个细化点。通过对16个细化点分析,结合部门情况与vue数据结构设计出来飞码DSL,并对字段含义进行解释。下一小节飞码LowCode前端技术(二)如何便捷配置出页面-1,分析飞码数据源、组件、模板方面的设计。

作者:京东科技 王光辉

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

点赞
收藏
评论区
推荐文章
飞鹅官方账号 飞鹅官方账号
2个月前
飞鹅博客如何部署?
飞鹅博客如何部署?本文讲一下如何部署飞鹅系统,首先需要明白飞鹅系统的架构首先先熟悉一下飞鹅的特点一、飞鹅系统的特点飞鹅是一个前后端分离的项目飞鹅前端用vue技术栈,后端go技术栈,数据库为mysql飞鹅总共有3个源码库,分别是博客https://githu
Wesley13 Wesley13
2年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Wesley13 Wesley13
2年前
PPDB——飞桨开发者技术小白
PPDE——飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者技术专家,是飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者技术专家的荣誉认证体系,由飞桨(https://www.oschina.net/action/visit/a
Stella981 Stella981
2年前
Python Challenge Level 18
初学Python,挑战一下流行的PythonChallenge,很不幸,卡在了18关~~被字符字节码之间的转换搞得焦头烂额,不过终于搞定了还是很happy的~~~主要的问题就是16进制形式的字符如何转成字节码(注意:不是encoding)如:\'89','50','4e','47','0d','0a','1a','0a','00
京东云开发者 京东云开发者
5个月前
飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队
本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。一、数据中心,事件中心设计飞码是数据驱动事件驱动的产品,考虑到飞码运行环境,飞码自己封装了store。数据中心:在同一个页面中可
京东云开发者 京东云开发者
4个月前
飞码LowCode前端技术之画布的设计 | 京东云技术团队
简介本章节从精准定位、分层设计、异步组件、拖拽四个方面分析飞码画布设计。一、精准定位设计飞码画布是一个套件,可对外提供画布能力。精准定位有两种情况,一是目标组件无子组件,而是目标组件有子组件。无子组件:目标组件分为支持与不支持放子组件两种情况。有子组件:鼠
马尚 马尚
1星期前
使用JavaScript破解数字验证码
数字验证码通常用于网站或应用程序的用户身份验证和安全性保护。本文将介绍如何使用JavaScript编写代码来破解数字验证码,以便于自动化处理验证码验证过程。1.分析验证码页面首先,我们需要分析网站或应用程序的验证码页面,了解验证码是如何呈现的以及需要提交的
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
京东云开发者 京东云开发者
5个月前
飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队
一、配置解法中飞码提出了至少需要满足2个大能力点以及对应16个细化点。在业务复杂的场景下数据具有流转性质,事件的触发会改变数据、同时也会触发其他事件等情况。飞码使用数据驱动事件驱动的模式解决数据流转性与事件不确定性问题。数据驱动事件驱动的模式决定了需要
京东云开发者 京东云开发者
5个月前
飞码LowCode前端技术:如何便捷配置出页面 | 京东云技术团队
简介飞码是京东科技平台研发部研发的低代码产品,可使营销运营域下web页面快速搭建。本文将从三个方面来讲解如何便捷配置出页面,第一部分从数据、事件、业务支持三个方面进行分析,第二部分从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析,第三部分从监