Node接入层可视化逻辑编排,还可以这样做?

Stella981
• 阅读 1067

背景:Node前后端分离带来的变化

2016年跨境供应链体验技术部经历了从Java webx MVC技术架构演进到Node前后端分离的技术架构。

前后端分离优势

前后端分离以后,Node服务端扮演了web接入层的角色,起到了web端和Java微服务端的桥梁作用,从架构层解决了以下问题:

  1. VM层前后端耦合严重(技术域、物理层);
  2. 开发职责边界不清;开发环境重度依赖、协同效率低下;
  3. 时常引发质量问题;
  4. 技术栈的耦合,不利于前端体验、性能优化方面的工作。

Node接入层可视化逻辑编排,还可以这样做?

前后端分离新问题

但技术没有银弹,每一次系统架构升级,必然也会带来新的问题和挑战。例如

  1. 线上问题,排查链路变长,重心慢慢转向前端。(该部分,我们团队也孵化出了扁鹊平台,用于实时诊断全链路Node异常日志)
  2. Node前后端分离后,前端代码自然而然也就拆分成了Node端开发和web端开发。前端整体工作量大概上涨了10-20%(node端开发),且node端开发工作相对简单,核心、复杂的逻辑依旧在web端(后面会解释为什么node端的开发相对web端简单)。
  3. 前端同学开始需要关心更多领域的问题,包括应用运维、服务端性能评估、水平鉴权等。
  4. 前端除了静态资源的构建和发布,还多了node应用的部署。

剖析node端开发,我们在开发什么?

我们知道,node端开发的主要工作是编写controller部分的代码,那么我们先来一段代码,进行剖析:Node接入层可视化逻辑编排,还可以这样做?

微观来看,发现整个应用中的node端controller核心代码跟上面的代码非常类似。从宏观来看的话,观察整段controller代码的逻辑,发现逻辑控制语句(if/for/while/switch)很少出现。总结来说,就是node端核心逻辑代码相对简单,而且规范。

这是由于,node在业务项目中的主要作用是作为web端和HSF微服务DBtair缓存diamond配置等服务层的中间转发层,为了将web端参数+node端session信息能够传给下一层服务调用。

我们真的需要写controller代码吗?

回到之前那个典型的controller代码,我们再做一个更深层次的抽象,发现核心代码逻辑很标准,基本套路都是:参数预处理->服务调用->结果处理

Node接入层可视化逻辑编排,还可以这样做?

假如我们将这个过程的每个步骤都抽象成一个处理器的话,那么对应的就是下图:

Node接入层可视化逻辑编排,还可以这样做?

通过完整抽象,每个http请求过来后,node端的处理过程就可以看成如下图:

Node接入层可视化逻辑编排,还可以这样做?

基于以上理论,我们孵化出了陆游(路由)平台,在陆游中,你除了可以写代码,还可以可视化的进行简单线性编排 和  复杂流程编排

Node接入层可视化逻辑编排,还可以这样做?

是不是简单线性编排就够了?

根据经验和存量代码分析,绝大部分BFF代码的套路都是参数预处理->服务调用->结果处理。完全可以用线性编排来实现,复杂编排使用场景其实非常有限。

Node接入层可视化逻辑编排,还可以这样做?

虽然线性编排能满足大部分场景,但是,碰到需要根据不同条件执行不同处理器(特别是执行不同HSF)、或者需要循环调用的时候,线性编排就显得力不从心了,所以,复杂编排应运而生。

复杂编排之源码编排

从立项开始做复杂编排之初就感觉到,源码编排应该是最容易实现、也是最受开发者欢迎的,因为它与线性编排取长补短,又几乎没有额外的学习成本。

先插入一个话题,我们一直在讲编排编排,所谓编排,我们编排的是什么呢?在陆游平台,所有原子操作被抽象成了一个个的处理器,所以,这里我们要编排的是处理器,也就是编排处理器之间的流程控制。

源码编排的思路其实很简单:提供每一个处理器的执行函数$proc给开发者自行调用,执行函数接收一个参数作为入参,返回一个参数作为出参,这一点和处理器的概念一模一样。

基于这个思路,我们很快实现了源码编排,下面的示例代码完全等价于我们上面提到的简单线性编排

Node接入层可视化逻辑编排,还可以这样做?

复杂编排之可视化编排

为什么还要做可视化编排

虽然源码编排很强大很灵活,但是陆游平台作为一个定位为Node可视化逻辑编排和代码热更新的平台,可视化编排终究还是要支持的,毕竟还是会有部分用户会觉得源码模式太过于原始,再者,未来可视化编排能力,可以面向产品运营等非开发同学发挥巨大作用,如果仅有源码编排肯定还是不够的。

交互设计的纠结和可视化引擎的选择

从打算开始做可视化编排开始我们就决定:一定不能自己造轮子,要复用集团或外部现有能力。

一开始脑海中想象的是可视化编排类似这种效果:

Node接入层可视化逻辑编排,还可以这样做?

但是,始终觉得让用户自己去连线、拖拽、布局的这种交互方式太不方便了,没几个人会愿意使用的,所以一直在思考,到底怎样一个交互才能让使用者使用起来更方便、更好用,为此在草稿上涂涂改改画了2天:

Node接入层可视化逻辑编排,还可以这样做?

无意中看到了另一种可视化编排的交互方式:没有采用节点连线的方式,而是整体仍然是线性,只是线性里面包含了可以无限嵌套的条件控制。这种交互方式确实给我们打开了一种全新思路。但是考虑到如果采用这种方式的话实现成本略高,因为没有现成的图可视化引擎给你调用了,还要自己做各种拖拽事件,光是做这套可视化交互就够费时间了,时间和投入成本上不允许我们这么做,而这套编排引擎没有对外提供封装好的组件,而且我们有比较多的定制化的诉求,所以始终没有考虑这种交互方式。

现成的流程可视化开源引擎效果不是我们想要的,比较看好的交互方式又没有开源,怎么办?

初步的设想还是基于开源引擎,添加IfWhile等条件控制语句时自动把节点连线处理好,不需要用户自己连线,拖拽节点是改变节点的顺序而不是位置的拖拽。按照这个思路开始寻找合适的图表可视化引擎,先后调研了vtor-flowgg-editor,还包括gg-editor上层依赖的G6,经过比对发现这些始终都不是我们想要的,或者说想要改造成我们想要的效果成本太大。

经过一段时间的纠结后,思路还是回到了最开始 不需要节点连线、无限嵌套的条件控制可视化编排的做法,同时我们融入了一些自己的想法:把拖拽全部改成添加和上下移动,这样实现成本就低了很多,也更加轻量。

Node接入层可视化逻辑编排,还可以这样做?

按照这个设想,陆游平台的可视化编排很快便扩展了复杂编排的能力,同时,实现过程中甚至加入了所见即所得的左边编排、右侧预览源码模式。

陆游平台的开源计划

目前整套平台已经稳定运行1年,我们打算今年将会对外发布社区开源版,敬请期待

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
SpringBoot自定义序列化的使用方式
场景及需求:项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串。例如:\    {        "id":1,        "name":null    },    {        "id":2,        "name":"x
Wesley13 Wesley13
2年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这