面向中后台复杂场景的低代码实践思路(低代码应用场景)

面向中后台复杂场景的低代码实践思路(低代码应用场景)

作者 | 偏左
来源 | 阿里技术公众号

一 中后台前端研发复杂度背景

做中后台前端开发,会经常碰到复杂交互和复杂逻辑问题:

面向中后台复杂场景的低代码实践思路(低代码应用场景)

你负责的业务中,规则是不是很多?是不是会不自觉的试图用if…else解决一切问题,逻辑是不是在迭代过程中变得越来越乱?最后彻底变成一个看不懂改不动的黑盒子,没有人能搞清楚黑盒子里面到底发生了什么。

现实中,业务场景多,迭代频繁,变化快到跟不上,规则可能由多人掌握,无法通过一个人了解全貌;

还有业务所在行业固有的复杂度和历史包袱,这些问题都会让我们感到痛苦。

除了逻辑问题,我们还关注易用性交互开发的问题。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

试想,在中后台系统中,没有说明、没有指引,那该有多难用?所以通过内容运营,增加指引提升易用性是十分必要的,但对于前端开发来说,又像是下了一道魔咒。为什么这么说呢?

易用性交互的形式很多,不但会放大整体功能开发难度,而且很容易干扰到业务功能,让本来已经很复杂的开发工作更加复杂,加速了整体腐化。

本身排期就已经低于功能需求了,再加上这些问题,导致大家都不爱去做,长此下去,平台越来越难用。

那么问题逐渐显现,如何面对中后台复杂场景中最深刻的两个问题:即复杂交互、复杂逻辑。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

二 复杂交互解法

1 思路

首先是使用动态标注生成交互界面,来解决复杂交互问题:

面向中后台复杂场景的低代码实践思路(低代码应用场景)

这是一个典型的后台功能配置页:这里面有列表有详情,加入了很多指引。这里相当一部分交互的繁琐编码工作,其实是以一种简洁高效的低代码方式去解决的。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

首先我们需要把页面划分为业务功能交互以及辅助内容交互,所谓业务功能交互,即脱离了这部分交互业务就不再完整了,而辅助内容交互则是没有这部分交互系统也能用,但是可能会很难用。

那么我们方案的核心目标就是:将业务功能交互,还是由前端通过procode开发完成,而这些辅助内容交互,就可以由低代码配置去完成了。

想法比较直接,那么真实的效果如何呢?

面向中后台复杂场景的低代码实践思路(低代码应用场景)

这是一个比较复杂的配置页,使用了大量引导类交互,有点击出现弹窗、查看文档、还有各种加下划线气泡、stepbystep引导、还有更过分的要加复杂流程图、这是SVG做的,图里面还要带有气泡按钮解释的,等等,像这种交互在系统中有近400个,如果把这些写在代码里面,是一个非常大的负担,而这些,我们都是通过低代码配置化去解决的。

2 实践

接下来是实战部分:

面向中后台复杂场景的低代码实践思路(低代码应用场景)

第一步,我们要找到辅助类的交互,哪些是必须要procode的业务关键能力,哪些是非必须的。在我们的实践经验中,像这些辅助类交互都是可以抽象成组件复用的。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

第二步,我们将这些组件,通过动态标注的方式,渲染到界面上。

关键流程可以描述为,首先捕捉用户的行为,如元素点击、移入移出,或是节点生成、销毁、或是URL改变了等等。

当匹配这些行为时,找到组件插入或更新的位置,然后渲染出来,这个时候组件会按预设的规则动态的标注到页面指定位置上。

比如,当用户进入某个页面时(行为是URL改变),我们给指定区域(可能是一个选择器指定的),插入一张流程图。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

第三步,这些组件可能互相之间是有交互的,比如点击问号按钮的时候出现弹窗,点击好用不好用的时候要感谢反馈等等,这个我们是通过一种自定义协议的url来完成的,这里给出了一些例子来展示下我们正在使用的动作,如:

向机器人提问、提交工单、显示消息、打开弹窗、复制内容等等

通过给组件配置url来完成不同的动作

这样就完成整个易用性交互的标注和动作过程。

3 相关问题

那么问题来了,现在都是一些动态渲染技术,状态变了那么页面结构可能也变了呀,那组件也丢失了。没有关系,当DOM变化的时候,我们仍然是在监听的,只要检测到DOM树变化或关键属性变化,我们就重新执行一次渲染。

第二个问题是,这些规则都太专业了,CSS选择器、XPath,这些对于非技术同学来说使用成本非常高,而且可能因为一个很小的页面改动就会导致配置失效。

这类问题我们的实践方案是,可以通过视觉特征的相似度去做模糊匹配,使用者只要去勾选出相应的特征和偏差范围,就可以自动生成脚本去做匹配,这里我们是通过扩展了XQuery形成了自己的模糊查询方式。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

4 复杂交互动作

标注的问题解决了,但是复杂的交互动作怎么做呢?这里有个例子说明一下:

试想一个场景,一个系统,对于新用户、老用户,需要有不同的引导方式

面向中后台复杂场景的低代码实践思路(低代码应用场景)

新用户场景下,首先提示用户,欢迎使用新手引导,2秒后,展示新手引导弹窗;

面向中后台复杂场景的低代码实践思路(低代码应用场景)

而老用户场景下,仅提示用户,欢迎查看常见问题,当点击常见问题时,向机器人发问获取知识;

在每个环节中,我们都是通过url来产生动作,但是怎么串起来呢?

在我们的定义中,url可以被串联顺序执行,也可以加上@if,条件执行,还可以加上@delay延时执行,这样就可以将所有一系列的url组织成一个url,并在两种场景去分别触发。

面向中后台复杂场景的低代码实践思路(低代码应用场景)

三 复杂逻辑解法

接下来要面对更难的一个问题,复杂逻辑,通过策略编排生成逻辑代码。

方案的核心目标,是将所有的交互逻辑从ProCode开发,转为低/无代码配置,但这个核心目标的前提并不是要用低代码来替代procode,而是因为procode写复杂逻辑很难,所以要使用简单的低代码实现。

点击链接查看原文面向中后台复杂场景的低代码实践思路,关注公众号【阿里技术】获取更多福利!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月14日 上午9:48
下一篇 2024年5月14日 上午10:00

相关推荐

  • 新买了Mac不知道如何开始使用?macOS常用软件推荐(新手用mac)

    很多朋友初次接触macOS的时候,面对全新的一个操作系统可能会有一筹莫展的感觉,很多工具都和Windows下使用的软件不同。这里也推荐一些个人经常使用的常用软件来抛砖引玉,希望可以…

    2022年6月26日
    336
  • 项目管理与合同管理

    项目管理与合同管理是项目管理中至关重要的两个方面,它们共同构成了项目管理的核心要素。本文将探讨项目管理与合同管理的基本概念、重要性以及如何进行有效的项目管理和合同管理。 一、项目管…

    科研百科 2024年5月26日
    85
  • 广西海域游泳生物资源和“三场一通道”调查

    广西海域游泳生物资源和“三场一通道”调查 随着海洋意识的增强,越来越多的人开始关注海洋资源的保护。广西海域作为我国的一个重要海域,拥有着丰富的游泳生物资源。然而,随着海洋污染的加剧…

    科研百科 2024年10月19日
    7
  • Android App 直播实现流程(android直播解决方案)

    一、直播的本质 实时推送/拉取音视频数据 二、视频直播流程 安卓版视频直播软件的视频直播的流程可以分为如下几步: 采集 处理 编码和封装 推流 服务器分发 播放器流播放 1、采集 …

    科研百科 2023年5月13日
    163
  • 协同办公系统开源

    协同办公系统开源: 让办公更高效 随着数字化时代的到来,协同办公系统已经成为了现代企业必不可少的一部分。协同办公系统不仅可以提高员工的工作效率,还可以帮助企业更好地管理员工、沟通信…

    科研百科 2025年1月5日
    0
  • 洞神坊新花城

    洞神坊新花城 洞神坊是一处历史悠久的古城,在明清时期是一个重要的商业和文化中心。然而,随着时间的推移,这个古城逐渐失去了它的魅力,成为了一个被遗忘的地方。最近,随着洞神坊新花城的建…

    科研百科 2024年12月2日
    0
  • #内控问答# 管理的本质是什么?

    背景说明 经常听到这样的感慨:内控建设以18项应用指引为蓝本还是可以应付的,但是一旦跳出这个范围就感觉无从下手,因为管理的范围实在是太大了。怎么样才能理解管理的本质? 我们的建议 …

    科研百科 2024年5月9日
    64
  • 中国空间站计划2022(中国空间站9个科研项目是啥)

    中国空间站的9个科研项目:探索太空的未来 近年来,随着人类对太空探索的不断深入,中国也逐渐成为太空探索的强国。作为我国未来空间站的重要组成部分,中国空间站的9个科研项目是当前最为关…

    科研百科 2024年8月2日
    38
  • 杜梓和王文彪什么关系

    杜梓和王文彪什么关系杜梓和王文彪什么关系在高中阶段谈恋爱和读大学时有很大的关系。但在大学阶段,男女同学相约在一起的还有很多。如果有喜欢的人是想多一些美好的,也是可以的。你说谈恋爱和…

    科研百科 2024年11月25日
    5
  • 航空器适航那些事儿(航空器适航性是指航空器适合空中航行并能保证飞行安全)

    1、引言 从2014年从通信行业纵身一跃,投身航空互联网创业中去,已两年有余,老鹰也由通信老兵兼航空新兵蛋子成长为一名航空互联网行业的老兵一枚,虽说不上是航空专家,对航空适航的那些…

    科研百科 2024年4月25日
    102