简介

飞码是京东科技平台研发部研发的低代码产品,可使营销运营域下web页面快速搭建。本文将从三个方面来讲解如何便捷配置出页面,第一部分从数据、事件、业务支持三个方面进行分析,第二部分从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析,第三部分从监控、页面配置、页面数据导入导出以及其他能力四个方面进行分析。

一、第一部分:数据、事件、业务支持

1、数据设计

飞码LowCode前端技术(一)种对数据结构进行了分析,飞码是数据驱动+事件驱动,在编辑态配置区域需要页面中各种数据(接口出参、组件出参、页面入参、业务逻辑数据)。该部分仅说明飞码如何实现配置逻辑与规则的,如何实现数据驱动会在后续小节说明。

数据复用:一个组件的入参是固定值,例如select1组件list是一个固定值1,select2组件list也是一个固定值1,这个就需要数据的复用能力。飞码解决方案详见图1

图1

数据配置:数据配置包含了数据A与数据B之间是赋值关系、逻辑判断关系,还是组合关系。结合业务实际情况,飞码归纳常见的数据配置情况。详见图2

图2

对任何一个可配置的组件属性值,均可以通过全局数据视角进行配置。数据源是出参,设置数据是给某个组件或Api,弹框等设置数据。当我们需要处理复杂的业绩时,可以通过处理函数进行快速处理。飞码中的函数是常见的js函数,飞码也内置了form表单的校验函数,form校验规则也可以进行复用。该部分在事件小节说明。飞码支持用全局视角看页面的所有数据情况以及流转情况。

数据导入:页面配置过程需要看到页面中所有数据字段及数据层级结构,飞码认为有四种方案可以选择。一是对组件进行一一配置;二是先配置页面之后在组件中进行选择;三是通过组件id自动生成组件关联属性,之后与接口进行一一配对;四是组件与页面均可以配置,配置之后具有一致性。飞码使用方案四,可以组件层面进行关联字段配置,也可以页面进行配置。在实际搭建页面的情况下,发现页面级别的导入数据更为便捷。飞码目前也支持j-api、bff与组件关联之后进行导入能力。页面级别的数据字段导入详见图3

图3

结合j-api可以通过接口数据直接生成页面的一部分,并实现组件字段与页面字段一致性。详见图4

图4

2、事件设计

飞码对事件进行了分类,分为导航、组件显示&隐藏&禁用、数据、弹框&toast、操作、form操作、其他。如图5所示为事件编排区域。飞码中事件也支持配置,图5右侧区域为单事件节点的实例配置。每一个事件通过JSON配置实现(飞码lite版配置),支持动态加载额外新增事件。

图5

飞码对常见事件进行提取归类,枚举如图5中左侧区域。通过编排方式进行业务配置。

事件配置:组件、页面生命周期、其他事件调用情况会使用事件。创建事件之后飞码会在缓存中记录事件id以及事件名称与相关的事件编排。研发可以在组件事件、页面事件、其他事件中进行配置。飞码编辑态事件流程如图6所示。

图6

事件与数据打通:如图2所示,飞码支持在事件中进行数据的配置,例如messag中(如图7),点击js编辑器会唤醒图2,之后可以配置messag的提示语,提示语来自接口,飞码使用$api开头,接口id为其属性值,之后一级一级找错误信息即可。

图7

事件的复用:飞码支持事件A,调用事件B,事件B调用事件C。也支持事件A根据配置的逻辑规则调用自己。

事件的串行与并行:飞码事件编排中任何一个节点的输出点支持作为多个事件节点的输入点。遇到多个事件同时触发的时候,可以实现事件的并行与串行执行。

问题:事件编排错误会导致事件死循环怎么解?

事件死循环一般是由于条件逻辑书写错误导致的,ProCode开发过程中也会遇到类似情况,方法A调用了方法B,方法B又调用了方法A,一直循环调用。常规配置导致的死循环飞码FMHelper会帮助监测到,当研发书写js导致的死循环飞码运行态FMHelper会最大能力监测,由于运行态数据未知性,部分死循环监测不到。该部分后续会加强逻辑处理。

3、业务支持设计

飞码的业务支持中,有权限与埋点。为了便捷研发搭建页面飞码增加了常见函数支持。

权限设计:已组件与页面维度,权限可以分为不可见与不可交互两种情况。A用户没有权限看到a组件(或者页面),B用户没有权限对a组件(或者页面)进行交互,C用户可以看到a组件(或者页面)并可以交互。

飞码权限依赖京东科技统一权限系统,实现流程如图8所示。

图8

考虑安全节省带宽,对隐藏页面或者组件,飞码服务不会下发相应的DSL到飞码的运行态。

埋点设计:接入公司内部奇点平台,飞码对埋点进行分类。分为组件类型埋点(含曝光),与事件类型埋点。流程详见图9

图9

飞码对组件,页面,事件的埋点方案,是通过配置化实现的。大大降低了理解成本与跨平台配置成本。

函数便捷配置能力:上一个章节中提到飞码官方提供的常见函数,常见函数处理枚举情况。该部分主要便捷研发书写js函数。

问题:函数是不是具备动态扩展能力?

函数与组件不太一样,常见的函数已全部枚举到飞码。飞码之前思考过通过飞码后管动态下发函数能力,发现实际使用场景并不多。目前飞码不支持动态扩展函数能力。后续依据情况是否增加函数动态扩展能力。

小结

本小节分析了飞码如何便捷配置出页面,分别对数据、事件、业务支持方面进行了详细介绍。数据配置、事件配置均可以通过全局视角看到整个页面相关数据结构与逻辑结构。业务支持方面最大限度的实现配置化,同时也支持函数配置,大大减少了研发书写js时间成本。

第二部分:模板与页面收藏与升级、页面UI结构、画布功能

1、模板与页面收藏升级设计

模板收藏与升级:在飞码LowCode前端技术(二)章节中对模板的收藏进行了说明。飞码模板(包括官方模板)可以进行升级,编辑。飞码对模板分类以及升级流程方案详见图10

图10

当用户收藏模板之后,可以在飞码管理端进行编辑,编辑之后飞码服务端会更新对应的模板DSL。飞码没有对模板的版本进行管理,模板的使用是一个快照,当研发用户拖动模板到编辑页面的时候,会对模板中组件id进行更新。飞码的模板DSL与飞码页面DSL保持一致,详见飞码LowCode前端技术(一)。

页面收藏与升级:飞码的页面收藏能力在飞码后管进行操作,飞码页面的收藏是一个快照。搭建页面期间会遇到很多类似的页面,这样就可以通过页面收藏,之后在进行编辑。页面收藏逻辑详见图2

图11

页面收藏之后在使用页面的时候会创建一个页面快照,生成一个新页面id。页面收藏,个人页面收藏同时也是快手的收藏。当官方页面、个人页面变化的时候,之前收藏的页面不会发生变化。

问题:是不是对模板与页面增加版本号?之后根据版本号进行选择性配置。

飞码之前考虑过模板与官方页面都有版本号进行控制,在使用阶段发现版本号的选择与理解会增加用户心智负担。在web页面中复用的模板与页面并不太多,飞码暂时没有模板与页面模板版本号,后续业务根据情况考虑是否增加。

2、页面UI结构设计

页面UI结构,飞码用树的形式实时展示。当画布是页面级编排的时候,UI结构是页面级别的。当画布是局部视图(开启另外一个视图,实现局部放大能力,实现视图的便捷配置)时候,UI结构是局部视图级别的。可以理解为UI结构与当前画布中组件结构一一对应。如图12

图12

页面UI数据结构在[飞码LowCode前端技术(一)]中对数据结构进行了分析。飞码在编辑态中数据结构进行了区分,分为页面数据结构、局部视图数据结构。局部视图数据结构数据是缓存数据,使用detailViewCanvas进行缓存(如何与页面数据结构结合,在画布小节说明)。UI数据结构整体设计详见图13

图13

编辑态的页面UI数据结构与运行态(投产)是一致的。

3、画布设计

画布的详细设计与技术实现详见之后的章节,该小节侧重描述画布功能以及局部视图如何与主视图结合的能力。

支持精准拖拽:详见图14

图14

飞码组件在布局的时候对于目标组件进行上、右、下、左四个区域区分。实时监控鼠标位置,之后对目标组件进行判断。若支持子组件的组件中没有组件,例如div,放入第一个组件的时候会显示“里”。详见图15所示

图15

组件的拖拽会实时监控目标组件(包括是不是支持内部增加组件),鼠标位置。具体算法逻辑会在后续章节中进行说明。

上下移动复制删除

图15可以看出,飞码画布会对选中组件实时监控父级与兄弟组件,进而确定是否支持上下移动。飞码组件复制是对组件以及子组件完全复制,包括子组件中配置的事件或者数据。

特定组件扩展特定能力

飞码认为form组件,table组件,为复杂类型组件。飞码认为复杂组件的配置便捷性需要挨着组件区域最近的地方,最大能力提升便捷性。

对form组件,经常配置内部组件布局。详见图16

图16

对table组件,经常配置内部组件布局。详见图17

图17

飞码对table中的组件进行了列的拖拽排序,prop与labe的快速设置,快速增加一列能力。同时飞码对table组件与右侧配置表单进行了绑定,实现快速定位能力。

问题:飞码对组件便捷区3个点(…)是否支持远程组件下发的时候一起下发对应能力?

飞码对该部分能力还没有开放,目前仅支持官方组件的能力扩展。后续根据实际业务场景考虑是否开放该部分能力。

复杂区域配置应支持局部画布

图16中el-table-column区域配置多个按钮的时候,点击该区域内的小方块,会唤起局部视图。局部视图中与页面画布功能完全一致。可以随意对组件进行组合。在[飞码LowCode前端技术(一)]中介绍了飞码弹框是通过一个数组进行管理的。通过弹框的数据结构可以看出,每一个弹框是一个局部视图,通过事件唤起弹框。

局部视图如何与主视图结合

飞码将局部视图划分为两种:一是弹框类(包含Dialog,drawer),二是组件类(目前包含table、tabs)

第一类:弹框是通过事件触发的,于是飞码事件编排中选择对应的弹框即可。在数据结构中弹框与事件有关,与页面无关。

第二类:该部分在页面或者弹框内,与常规数据结构一样,通过children字段表示。

小结

本小节分析了飞码如何便捷配置出页面-3,分别对模板与页面收藏与升级、页面UI结构、画布功能三个方面进行了详细介绍。飞码的UI结构设计、画布设计符合常规设计模式,对弹框进行了统一管理。

第三部分:监控、页面配置、页面数据导入导出以及其他能力

1、监控(FMHelper)设计

飞码监控需要做两件事情,一是编辑态怎么帮助搭建人员快速定位问题并给出可能出现的问题点,二是在运行态最大能力定位问题(该部分还在研发中)。本节仅讲述编辑态中如何设计与定位问题的。飞码对FMHelper划分四部分分别是页面、弹框、事件、API。详见图18

图18

FMHelper在编辑态时会对整个页面的DSL进行监测,依据搭建中常见错误信息进行汇总分类,并形成配置表。配置表部分会在下一章节进行说明。飞码将问题分为error与warn两个级别。详见图19

图19

飞码依据页面中所有配置项以及事件链路关系,对于大部分问题都可以定位到错误配置位置,点击查看即可。

2、页面配置设计

飞码页面配置分为样式、事件、数据、配置共4部分组成。详见图20所示。

图20

事件:页面事件与vue页面生命周期函数一一对应,飞码同时支持在一个生命周期函数中配置多个事件。选择相关的事件,即可在运行态的时候调用相关事件。

数据:数据分为入参配置,出参配置。入参配置的时候配置一个schema或者配置一些键值对,页面在运行态的时候会实时监控入参参数的变化,同时页面中的其他组件存在依赖关系的也会发生先关变化。出参配置这部分能力已转移到事件编排,在页面配置区域目前禁用状态,后续飞码会对其隐藏。详见图21。

图21

飞码页面入参有2种情况,一是通过飞码对外提供的sdk,标签引入之后对inData进行设置。二是会取投放出去页面的url中的参数。详见图22

图22

配置:该区域是页面业务型配置,包含整个页面API的host,API返回正确的code码,埋点与权限。详见图23所示

图23

页面在环境切换情况下,只需要在页面配置->配置 进行相关配置即可。

3、页面数据导入导出设计

测试环境、预发环境、线上环境对应的服务是不一样的。测试环境的数据无法同步到预发环境。测试环境调试好的页面,如何在预发环境上快速上线?飞码通过导出、导入能力实现页面的快速复制能力。如图24

图24

导出:会对页面整个数据结构进行数据加工,去掉空字段,删除事件编排中无用字段。

导入:与导出相反,会对整个导入的DSL数据结构进行加工,增加必备字段,增加事件编排中必备字段。

4、其他能力设计

回退上一步:在实践中发现画布拖拽(组件移动、兄弟组件之间的布局等)之后并不是想要的效果,飞码提供了一键回退能力,如图7所示“画布 上一步(4)“,飞码仅支持回退5步操作。详见图25

图25

问题:为什么仅支持5步回退?

搭建页面期间画布误操作情况一般是1-2步,飞码设计5步并没有考虑回退太多步骤的情况,其中5也是配置的一个数字。可以修改,支持更多步。

历史记录:操作保存、预览按钮的时候,飞码会记录当前页面DSL信息,记录在服务服务器。效果图见图26

图26

点击放大按钮可以看到点击保存、预览按钮时候的截图。点击“应用到当前页面“,可以切换到之前的历史版本。点击”复制DSL“,可以复制历史版本的DSL,之后开发其他页面使用或者对DSL进行对比。

预览:点击“预览“按钮之后,即可对当前页面进行预览,会跳转到飞码运行态页面。目前飞码FMHelper还没有对不合格(配置有问题)的页面进行拦截,飞码对FMHelper定位是一个提示工具。随着FMHelper能力变强,在智能监测与校验方面给页面搭建赋能。

问题:飞码测试环境预、发环境与线上环境在存量页面中怎么对比DSL的区别?

测试环境服务器无法与预发、线上打通。飞码目前支持预发环境与线上环境DSL的对比以及页面配置对比,在预发环境调试好的页面,在线上环境只需要同步即可。也可对同步的内容进行编辑。

本小节分析了飞码如何便捷配置出页面-4,分别对监控、页面配置、页面数据导入导出以及其他能力四个方面进行了详细介绍。FMHelper是飞码的一个辅助工具,帮助搭建人员快速定位问题、页面配置目的是在运行环境不一致的情况下对变量参数进行快速设置,数据导入导出解决了环境数据不同步问题以及提供页面快速复制能力。下章节介绍飞码LowCode前端技术:如何便捷快速验证实现投产及飞码探索。

作者:京东科技 王光辉

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

飞码LowCode前端技术:如何便捷配置出页面的更多相关文章

  1. web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址

    web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址   Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...

  2. web前端技术与原生技术的竞争, 及未来的发展

    用户界面领域: web技术与原生技术之争 除了浏览器中运行之外, html5的技术也在app领域和移动端的安卓, iOS, 以及桌面端的window, linux以及OS X展开了竞争. 同样属于用户 ...

  3. 2019年一半已过,这些大前端技术你都GET了吗?- 上篇

    一晃眼2019年已过大半,年初信誓旦旦要学习新技能的小伙伴们立的flag都完成的怎样了?2019年对于大前端技术领域而言变化不算太大,目前三大技术框架日趋成熟,短期内不大可能出现颠覆性的前端框架(内心 ...

  4. 2019年一半已过,这些大前端技术你都GET了吗?- 下篇

    在上一篇文章中已经介绍了大前端关于状态管理.UI组件.小程序.跨平台和框架层的内容.在本文中,我会继续介绍编程语言.工程化.监控.测试和服务端,同时也会对下半年大前端可以关注的部分进行展望. 结合个人 ...

  5. 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  6. 解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)

    1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...

  7. 解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  8. 解密国内BAT等大厂前端技术体系-腾讯篇(长文建议收藏)

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯 ...

  9. 解密国内BAT等大厂前端技术体系-美团点评之下篇(长文建议收藏)

    引言 在上篇中,我已经介绍了美团点评的业务情况.大前端的技术体系,其中大前端的技术全景图如下: 上篇重点介绍了工程化和代码质量的部分,工程化涵盖了客户端持续集成平台-MCI.全端监控平台-CAT.移动 ...

  10. 解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

    引言 进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也 ...

随机推荐

  1. JNI c++ 与 java 通信过程

    JNI(Java Native Interface)是Java提供的一种机制,用于在Java和本地C/C++代码之间进行通信.下面是JNI C++与Java通信的一般过程: 1. 编写Java代码:首 ...

  2. ARM Trusted Firmware——编译选项(二)

    @ 目录 1. 常用部分 2. 安全相关 2.1 签名 2.2 加密 2.3 哈希 2.4 中断 3.GICv3驱动程序选项 4. 调试选项 1. 常用部分 编译选项 解释 BL2 指定生成fip文件 ...

  3. altas2.1.0编译、安装、集成CDH6.3.2

    目录 altas2.1.0编译.安装.集成CDH6.3.2 一: Atlas源码下载 二: Atlas源码编译 1.修改altas项目主pom文件,即需要编译的CDH6.3.2对应版本信息 2.Atl ...

  4. C/C++八大排序

    排序 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 按照难易程度排序,八大排序算法可以从简单到复杂 ...

  5. Angular与AngularJS区别

    简单介绍 目前 Angular 2 到現在 Angular 11 都是十分穩定的改版,不再出現之前 Angular 1.x 到 Angular 2.x 的哀鴻遍野. 因此目前市面上確實同時存在著兩種差 ...

  6. openpyxl 设置某列单元格样式

    1 # 边框线 2 border_set = Border(left=Side(border_style='thin', color='000000'), 3 right=Side(border_st ...

  7. JS语言里常见的随机函数示例,实验结果分布规律分析

    在JavaScript语言里有个 Math.random() 随机函数,用于生成指定范围内的随机数. Math.random()函数 根据官方的定义: Math.random() 函数返回一个浮点数, ...

  8. 最全linux基础知识

    linux基础知识 [root@localhost ~]# 各位置表示什么意识 root:表示用户名 (现在的用户是root切换为test便是张三) localhost:表示主机名 (当前主机名切换为 ...

  9. 优化nginx参数(基本通用参数)

    全局域配置参数 worker_processes auto; worker_cpu_affinity auto; worker_rlimit_nofile 65530; 前两个参数用于开启nginx多 ...

  10. avue-crud属性配置项参数笔记分享

    Avue 是一个基于Element-plus低代码前端框架,它使用JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率: 虽然Avue官网上面都有这些配置说明,但是如果刚开始接触不熟悉框架的 ...