一招搞定可视化工作流设计器开发 巧用draw2d绝战可视化工作流设计器 友好的开源协议MIT

技术岛公众号
技术岛公众号

工作流通常会使用xml进行管理与配置,之间流转关系使用不同的xml节点进行配置,看着xml文件,很难直接Get到流程之间的流转关系。如果使用可视化的呈现来展现工作流,则很好的解决这个问题。更好的管理与维护。

可视化呈现,自然离不开图形的操作。Github上找以2个非常有价值的工程 ,分别是:

https://github.com/jifuwei/workflow-designer-web

https://github.com/freegroup/draw2d

都fork到仓库里了,不用担心找不到主

https://github.com/Lancker/draw2d

https://github.com/Lancker/workflow-designer-web

实现的思路:

首先,查看workflow-designer-web,这个工具有一个简单的工作流设计器,可以体验,能画节点,并用线条连接上。存在的问题是:节点类型不足以覆盖我所想要达到的效果。如果拿visio来比的话,操作流程度也是一个问题。阅读workflow-designer-web,图形操作相关的组件主要是draw2d。

storm与财富增值
storm与财富增值

紧接着,转战draw2d,这个是开源的,能做什么不能做什么可以通过官网及demo查看,主要是以下2个网址:

官网 http://www.draw2d.org/

Demo示例:https://freegroup.github.io/draw2d/index.html

非常开心的可以看到,draw2d采用MIT协议,官方网站上提到了Draw2D的用途之一就是workflow设计器的开发,有图有真像,来看看官网是怎么说的:

Draw2D touch is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. Draw2D touch makes it easy to create visual languages & tools of various kinds.

在示例代码中可以看到不少workflow的影子,github仓库的介绍里也有一个BrainBox的实际应用,开发者使用Draw2D做的电路可视化工具​箱。

Draw2D-examples

有了Draw2D,如何开发一个工作流可视化编辑器​呢?开源大神还是很贴心的给了一个Shape Designer。如果没有这个东东,做可视化设计器会有些让人“恶心”,因为画一个图,可是一堆线条组成的啊~想想都够,还好,有这个Shape Designer!

shapeDesigner

Shape Designer能帮我们设计好各种基础的Workflow组件,用来设计不同的任务节点!再回到https://github.com/Lancker/workflow-designer-web,这个是工作流半成品,少了组件,正好使用Shape Designer设计满足自身需求的组件!

简单小结一下​设计器开发流程:

  1. 使用Shape Designer设计工作流节点
  2. 参考workflow-designer-web,更换节点组件

​就这么结束了?​没有没有。流程文件的导出与加载还是空白,给大家留一个悬念​,下次再分解!

巧妙拆分bolt提升Storm集群吞吐量

技术岛公众号
技术岛公众号

游戏主线副本故事引擎长什么样子?工作流&游戏主线副本故事&Storm Topology相互推导,看游戏圈与传统企业的千丝万缕情怀

技术岛公众号
技术岛公众号

进入到经典大型互联网免费回制游戏《问道》,会看到很多游戏的主线故事,副本故事,故事大概是这样子:先去干什么,再去干什么,再去干什么。主线玩着玩着,还可以做副本故事。结合工作流、Storm Topology的经典,发起这些长得非常像,之间可以相互推导出来。

简化出来,游戏的故事情节可以这么表示:

storm与财富增值
storm与财富增值

​今天的工作流&游戏主线副本故事&Storm Topology相互推导,看游戏圈与传统企业的千丝万缕情怀,先来看看工作流简化表示吧。

一个工作流的表示,就是今天的封面啦。从开始结节出发,经过一些节点处理,到达结束。

有没有感觉非常像游戏里面的故事主线,先干什么,再干什么?是的,至少我觉得是很像了。不现的主线,可以当成是不同的工作流,玩家进入不同的故事,相当于进入不同的工作流。相比之下,游戏的故事节点会比较长,节点处理更加单一,基本上是下一个节点,下一个节点,工作流中的节点处理则更加丰富。如果比较节点处理的可视化呈现,那自然是游戏更加直观了。

Storm Topolgy的处理,我经常喜欢画成横向的,基本上是长成这样子:

为了把三者归到一个体系中来,我画了一个竖版的,长得是这样子的:

再比较工作流、游戏主线副本故事、Storm Topology,三者确实有着异曲同工的像。Storm Topology目前看到的实现形式是通过代码设置,如果做成配置模板,那这三者就统一成一类流程引擎中来了。

在传统企业中玩工作流,在大数据领域玩Storm Topology,都可以尝试实现一个游戏故事引擎。没有坐过飞机,还没有见过飞机飞。对于回合制游戏,有了故事引擎,感觉就有了一个核心啦!感觉兴趣的小伙伴,赶紧行动起来吧!

巧妙拆分bolt提升Storm集群吞吐量

技术岛公众号
技术岛公众号

签名验证到底使用SortedMap、LinkedHashMap、HashMap中的哪一个

技术岛公众号
技术岛公众号

最近同事发现有接口签名验证通不过,查了许久,发现,两边的验签规则不一样。最大的差异在于时间戳是否参与参数的排序。使用较多的版本是时间戳参与参数排序,而突然出一个接口中的时间戳不参与排序,导致算出来的签名值不一样。让我们使用一段main方法来感受一下其中的差异。

storm与财富增值
代码堆得好不如财富增值好

public static void main(String[] args) {

System.out.println(“SortedMap”);

SortedMap<String, String> sortedDict = new TreeMap<>(Collator.getInstance());

sortedDict.put(“B”, “B”);

sortedDict.put(“A”, “A”);

sortedDict.put(“C”, “C”);

System.out.println(sortedDict);

System.out.println(“LinkedHashMap”);

Map<String, String> dic = new LinkedHashMap<>();

dic.put(“B”, “B”);

dic.put(“A”, “A”);

dic.put(“C”, “C”);

System.out.println(dic);

 

System.out.println(“HashMap”);

Map<String, String> hashMapDic = new HashMap<>();

hashMapDic.put(“B”, “B”);

hashMapDic.put(“A”, “A”);

hashMapDic.put(“C”, “C”);

System.out.println(hashMapDic);

}

输出的结果:

SortedMap

{A=A, B=B, C=C}

LinkedHashMap

{B=B, A=A, C=C}

HashMap

{A=A, B=B, C=C}

很显示,当我们使用SortedMap、HashMap来处理签名参数的时候,参数自动排序了,而当我们使用LinkedHashMap处理的时候参数则不会排序。

造成问题产生的原因,看起来是使用了LinkedHashMap导致的,仔细分析,完全是两种签名处理思路导致的。

推荐思路一:使用SortedMap、HashMap做预处理,与顺序无关

不推荐思路二,没有对url中的query参数做任何预处理,直接在尾部附加上了时间戳,省了一步参数预处理。

思路二的问题在于,参数的顺序会影响最终签名,调用方需要知晓参数顺序。如果大家都知道并严格执行签名顺序,思路二其实也是正常的可行的。但是一般来讲,团队成员可能不断变化,一不留神就掉进这个洞里了。推荐使用思路一进行签名验证。

思路一与思路二的验证方式如何对接上呢?

在思路一追加时间戳之前,需要创建一个LinkedHashMap,将处理过的参数put进去,再将时间戳put进去,之后生成的签名URL就与思路二是一致的。

小结:当我们设计接口签名规则时,可以遵循一下一个重要的规则,参数顺序无关。

签名参考流程:

1.参数提取,记得使用SortedMap或HashMap

2.过滤处理

3.生成待签名URL

4.签名

5.生成签名后的URL

巧妙拆分bolt提升Storm集群吞吐量

技术岛公众号
技术岛公众号

搞技术的公司用上这几个工具 研发运维开心指数暴涨

这篇文章适合在小公司成长的小伙伴,如果你恰好看到了,赶紧给自己的公司部署上这几个小工具,你会发现,省下了很多宝贵时间。将研发从代码开始就管理起来,嗯,就是这么神奇哦。

在小公司有这么个特点,一个人要干的活超级多,有些活非常繁琐,而且经常要干,占用了很多琐碎的时间,投入产出比低就不说了,主要是天天重复做,心如刀割,比如说代码管理,上线发布,代码质量检查等等。回想一下自己用的什么工具在管理代码、用的什么工具自动部署?今天要推荐的这个工具组合,能让代码管理、发布、部署做到质量管理、自动化。没有重复造轮子,有兴趣自己造轮子的,可以尝试一下。

No.1 Jenkins

在Jenkins中建立构建任务,把代码从GitLab上拉取下来,构建,Jenkins与sonarcube集成,进行代码质量检查,完成测试环境发布,将构件发布到自动部署的约定位置。

No.2 sonarqube

sonarqube is 我见过的最强大的代码质量检查工具了,能分析起各种坏味道,bug,不合理的代码编写,内置了很多检查规则,使用sonarqube可以让团队的代码编写统一规范,而且可以防止一些低级的写法出现。当然,配置sonarqube的检查规则的时候,最好也依据团队的编写做些小小的适应调整,比如写习惯了UserBLL会报上坏味道,要求写成UserBll,有结小小的不爽,是吧。统一规范就是舍去的过程,建立好了检查规范,大家都用sonarqube执行严格的代码检查,就好了。

No.3 gitlab

之前使用tfs,svn,后来被带入gitlab,使用gitlab,觉得使用git也不错哦。给自己的公司部署一个Gitlab,严格管理主干分支,新人在分支上玩,发起merge请求,合并主干,一下子管理就规范多了。

No.4 自动部署系统

可以自己DIY一个,也可以找个开源的,前几天有看到一个国内的小伙伴开源了一个自动部署系统,在这里就不推荐了。使用Jenkins构建完的war包,jar包,dll,可以使用自动部署系统管理起来,发布的时候,点一下,回滚的时候再点一下。

后记,自动部署系统可以对接上云主机、物理机、docker,嗯嗯~这么一套强大的系统,结合了Jenkins\sonarqube\gitlab,就是让小伙伴的时间能省下来。一定不要觉得前配置麻烦,这些工具配置好之后,后面就可以开心的玩耍了!

这么一套工具怎么配置,怎么才能搭建一套呢?回复公众号【研发工具】索取!

巧妙拆分bolt提升Storm集群吞吐量

技术岛公众号
技术岛公众号