低代码 FlyFish 在云智慧的落地实践探索

本期与大家分享一下 FlyFish 低代码平台在云智慧的落地实践的探索。

作者 | 王海虎

责编 | 韩 楠

相信低代码这个词大家经常听到，从 2014 年概念被提出，很多人就开始关注了，但是对于低代码的各种争议未有间断，有的人对它到底能否对企业、对开发者进行赋能，仍存质疑。

很多开发者也就此有很多争议，本次分享是想告诉下大家，看一看云智慧内部真实去用了一年之后的变化，将从数据可视化目前的现状，及其所暴露出来的的痛点，站在解决痛点的思路上推出低代码概念，介绍低代码引擎设计与思考，介绍数据可视化编排平台Flyfish的特点与能力、如何解决行业痛点及如何进行提效。

分享概要：

1、企业现状之下的痛点

2、低代码如何为企业赋能

3、低代码如何为开发者赋能

4、FlyFish低代码能力介绍

5、使用低代码运行一年之后的变化

企业现状之下的痛点

先看一下有哪些痛点，结合现有情况。大屏估计大家也经常看到，像天猫双 11 做的一些数据大屏，或者在运维场景中都能看到这种酷炫的大屏。

大屏的技术栈有很多，做大屏有时会用到一些 2D 的技术栈、效果等等，也会涉及到一些3D，甚至一些更细项的技术栈。

会经常用到很多图表的插件，比如 Echarts。再有像一些网络节点图、系统架构图业务，往往会用到一些专门画拓图、流程图的工具，像 AntV@G6、visjs 、D3-Graphviz 等，针对一些 3D 场景的时候也会做到。用到一些 Three、WebGL，甚至会用到一些对应的模型处理。

对于一些纯 3D GIS 场景，会用到一些 Cesium、Mapbox、3D tail模型、倾斜摄影，以及一些离线的方案、LOD方案等。光从技术栈上来看，就会发现很多很多。

◆ 架构复杂

然后再从架构上看，同样也是一样复杂。随便找一个日常的前端的架构，会发现需要进行很多的处理。每次都要去做这些工程的调整和配置，并且还要对大屏中使用到的控件进行一些优化处理，因为各个的控件在不同要求的屏上使用的层次深度也有所差异。

另外，我们对这种处理也不同，像一些兼容性渲染，多端适配，考虑到这些大屏有可能放到很大或是很小的屏幕上，多端的一些适配，对于一些通信的优化，动效的处理，包括实时性请求的一些处理，都是需要经过优化的，其中会很复杂。

◆ 部署复杂

除此之外，部署也很复杂，可以简单示意一下，还没有画那些像一些监控类的架构，或者是像一些 Docker 这些 Jenkins 自动化的一些东西，只是画了一下业务的逻辑架构。可以看到，我们有很多各种各样的端，像PC、H5、iOS、安卓这些小程序等等。

我们会有一些Nginx 的集群做静态服务，再做一些网关单点登录 SSO 集群。由于涉及到微服务，肯定会涉及到服务发现Nacos，以及dubbo、缓存、原数据存储、分布式文件存储，各个服务模块拆分调用关系就会很复杂。每次做的时候我们其实都是很难的，部署也很难。

◆ 痛点

站在工程的角度上看，也有很多痛点，应对需求、复杂度以及变化，归纳总结为以下几点：

1、人员大量浪费：无统一基础平台，导致大量工作重复开发、重复测试。无法沉淀业务、促进人员成长，造成人员浪费。

2、数据无法复用：同样的项目，不同的人员开发出来的数据格式完全不同。过于依赖开发人员的习惯，数据复用性较差。

3、效率低下：项目交付周期太长、人员成本太大。开发过程中大量的简单基础工作需要重复去完成，降低开发效率。

4、质量无法保障：项目质量不稳定。不同的开发人员的开发产物质量各不相同，开发质量无法得到保障。

5、人员成长缓慢：简单的增删改查、简单码页面，需要人员投入。优秀人员不愿意干，一般人员不放心。没有成长空间。

除了上述所说的几点，还有信息丢失问题。在此放置了一张图片。这是一档综艺节目《王牌对王牌》，相信很多朋友都看过，是从最左边同学依次把一个词或者一句话传递给最右边同学。

看过的小伙伴可能都清楚，到了最后，基本上要么得到的信息寥寥无几，要么可能都偏离得特别远了。其实在咱们与客户整条链路沟通上，或者我们内部沟通上，其实传递可能不比节目上人员少，甚至可能更多。我们传递的时候，往往会丢失很多信息，最终发现做了的东西，与客户要的其实差得很大。

低代码如何为企业赋能

基于以上痛点，我们想到的解决方案是引进一下低代码。引进低代码，先看下它的能力，看一下它是如何给企业进行赋能的。

低代码是可以快速实现拖拉拽的，像之前面对一些客户的频繁更改，能不能变成a，再能不能变成b，又或者再变回a。

对于这种情况，不用再如以往那般熬夜加班去改即可让售前或是客户经理一边拖一边做，基本上与客户一边聊着一边就能做完了。这能够很好地应对我们客户的频繁调整，也能快速得到反馈。

这两年除了低代码词炒得很热，还有一个叫敏捷，估计也是大家经常听说的。为什么会出现敏捷？因为不确定性太多，变化性太大，我们需要快速地得到反馈，进而做有价值的事情。有了低代码之后，这些问题迎刃而解，很快得到客户反馈后，从而用最短的时间做最有价值的事情。

此外，对于一些效能的提升，主要基于以下几点特性：

• 增效：可视化变成所见即所得，一站式开发无需搭建环境，通过拖拉拽的形式快速生成一整套解决方案。
• 高质量：开箱即用的高质量组件，同一套规则、同一套标准，经过多轮测试验证发版，稳定可靠。
• 可复用：会从原本一锤子的买卖，变成可以沉淀的资产，组件之间可以沉淀复用，数据方向可以规范标准。复用性强。
• 低门槛：由于低代码开发的特征，大大降低了开发的难度，使其可以非常快速搭建一套解决方案。无代码基础也可快速上手。

使用了低代码之后，不仅仅只是开发者能做了，还有很多非开发者也可以参与。如何为开发者进行赋能，应该也是很多开发者关注的问题。

低代码如何为开发者赋能

站在开发者角度一直在想，低代码都是给不会代码的人员用的，我会代码为什么还要用它？一起看下低代码如何为我们开发者进行赋能的。

◆ 开箱即用

第一个是开箱即用，万物解组件。组件化的概念一直都有，先拿前端来说，前端有很多各种各样的插件，就像 jQuery 或是各种 UI 库的出现，它做了很多组件化的东西，在慢慢地帮我们做一些基础的封装，以便于可以快速地使用。这就是在降低门槛，做一些组件化封装的事情。

站在后端的角度也一样。我们有各种各样的插件、工具库、框架可以用，就不必做基础了，低代码也是在用的。如此一来，是相同的思维做的。很多组件化的东西，我们无需再从 0 到 1 开发了，而是直接拖出来即可完成组件化。

组件会进行很多模式的抽取，各种各样的效果，包括模板也会进行很多沉淀。

◆ 随时随地

另外，我们可以随时随地去开发，原本开发要装各种各样的环境，如果是一台新电脑，光是装环境可能要装一天，其后才能把服务各方面跑起来，如果涉及到一些复杂的工程，可能一天还尚且不够。而如果我们变用了低代码，即可在线地实时开发，随时随地去开发，哪怕没有任何开发环境的一台电脑也可以操作。比较简单，同时互动时也比较方便。

◆ 能力复用

原本写完一个组件，或是写完一个工具方法，想给对方用该怎么办？一般提交到我们的代码仓库上，告诉对方我是在哪个仓库，哪个分支，哪个文件，下面多少行是我。这个方法怎么用，需要细致告知。而用低代码，只需点一下复制，基本上组件就复制出来并可以用了。

想去改什么也是单个小块的逻辑，无需看与块之外的一些代码了，所以也比较方便。而对于一些应用，它是直接可以将应用进行复制的。比如上图中应用里有两个组件是不想要的，其他都想要。只需将这两个剔除就行了，整个应用就能提升很高的效率。还有，减少发布流程。2022年除了敏捷我们听得多，还有 Devops 肯定也是。我们知道它可以通过很多自动化的工具替代人为的一些事情。

◆ 减少发布流程

还有，减少发布流程。2022年除了敏捷我们听得多，还有 Devops 肯定也是。我们知道它可以通过很多自动化的工具替代人为的一些事情。

如果通过低代码，也能够减少很多发布流程，因为低代码往往都是 APaaS 的应用平台，即发布就是应用即发布平台，是可以创建一个应用的，应用直接在平台上就能运行起来。对于前期的设计、编码、编译、测试、发布、监控这些都可以不用了，包括运维部署这些东西都可以省去，我们的发布流程上也大大提升了。

FlyFish低代码能力介绍

最后两点分别介绍下，先从 FlyFish 的低代码能力代码开始。 FlyFish 是由云智慧做的低代码，它可以通过拖拉拽的形式做出很多大屏。

目前已开源，在 GitHub 上能够搜到，此处我就不再详细说了。这一部分数据的流程图，我们可以看下数据是怎么来，如何最终呈现到大屏上的。它支持 Database 的数据可以直接连库，像正常的 JDBC 数据源，比如正常的MySQL、postgray、Mongo 等等都能去接。还有一些运维属性的，就像zabix、普罗米修斯这些数据也都能接入。

进行数据接入之后，通过 SQL 即可将表查出来。其后直接给上层组件用就好了。也可以通过 API 进行接入，调用 API 通过 JSONPath 的控件将数据进行屏蔽化，转成屏蔽化之后，直接变成表供上层组件去使用。同时也支持文件形式，像 CSV 文件或者 Excel 文件进行上传，传完之后通过 SQL 进行查询以供上层数据使用。这有一个视频（此处为截图，可在B站观看）可以给大家简单看一下。

如何从 0 到 1 去做大屏，思路是怎么做的？可以通过拖拉拽的形式将其拼凑出来。

◆ 架构

再分享下低代码的架构。先看组件，是一个很核心的，也叫物料，它其实是有一些设计在里边的。首先有一个config，其中包含的像一些宽高位置这些公有属性，在 config 里面所有的组件都是一样的。option 是组件自定义抽取的一些配置，也即它可以做哪些。

另外还支持一些自定义的 Code 代码，以及DataSource 数据的接入。同时可以通过event 调度中心进行事件的发布和订阅。这是观察者模式的一种思路。也支持 DataSource 全局数据集。

简单来说就是一个数据可以给两个组件去使用，甚至是更多。同时也支持自定义函数，写一些自定义的逻辑块。因为毕竟是低代码平台，所以一定是能写低代码的。这样也是可以通过组件进行发布，发出指令，通知对应的函数。同时也支持变量的监听，比如 a 组件去改变 a 变量， b 组件去监听 a 变量，当变量发生变化时，组建即可进行动作的执行。同时也做了很多工具上的处理，还有一些兼容优化性能的处理。同时也支持一些全局的配置，比如缩放比例，全局变量，以及交互和代码，自定义的代码，这些均可处理。

组件与组件之间是进行完全隔离的，组件与函数之间也是如此。

可以看到有一根虚线，组件里面我们可以很放心地用到的一些 CSS 或者是 JS，这些变量之间都不会进行污染。

◆ 能力

上述所说的是低代码渲染引擎的基础架构，现在看一下全局整个低代码平台的能力架构，大体分成了五部分。最下面是我们的数据源进行接入，支持从database直接进行数据查询，同时也支持通过HTTP接口的形式进行数据接入，以及file、zabbix、redis等多种方式。

到第二个数据接入之后，会进行一些加工，比如计算、清洗、转换等等。ETL 加工处理完成之后，会进行数据的存储，做一些聚合等等。存储完成之后给到上层进行分析，这时就可以基于数据做一些模型，做告警，做检索，做一些 AI 算法等等。再往上即可供上层应用去使用。

使用低代码运行一年之后的变化

最后再看一下云智慧用了低代码运行一年之后的变化。上述说了很多，都是介绍其能力和业务的变化。运行了一年之后，它到底是否好用，结论是什么？看一下实际情况。

用了一年之后，我们发现，针对相同的打平，对原本需要可能两周的工作量，通过 FlyFish 低代码能力，无需人员进行介入，直接一键生成。如果相同的大屏，直接点一下复制即可。数据对应地去做选择，切换成其他指标就 OK 了，很简单。

如果是相似大屏，比如一半我要，一半不要，一半的组件是想要留下的，还有一半可能要换一换组件的一些效果。这个复用直接50%，相同是100%，相似是50%。不过这是动态的，因为有的相似多，有的相似得少。如果既不是相同的大屏，也不相似，大屏则没有完全相似的。但如果出现类似的组件，也是可以完全复用的。我们去开发小的物料时，无需再从 0 到 1 去开发了，都是基于 0. 5 或者 0. 8 再去开发的。

再者，看看提效，我们在做大屏的整个链路上进行了提效。

原本做大屏是提一个工单，先去申请，再进行设计，设计完成之后，进入到研发环节进行开发设计，然后再进行code。其后我们进行编译测试，没问题再进行部署，运维监控起来。而现在用了低代码，便无需如此长的链路了，只需一个 Flyfish 即可完全搞定。

◆ 沉淀

再者，我们用了一年之后，发现做过的这些大屏都沉淀下来了，截止到目前，已沉淀 647 张大屏，含各种各样的效果。

还有组件，我们用得很多，也沉淀了很多，像2D、 3D 的都去沉淀了。像一些图表的这些遮住图、散点图、雷达图等一些基础的图表，像一些效果的，媒体的布局类的都进行了沉淀，共计 2676 个。

◆ 转变

此外，不止有提效的方式，也发现有了一些转变。最初只有开发同学才能够为可视化的打平做效果，而现在会发现，其实有 15% 左右是由客户成功经理去做的，也不止研发去做了，这就是降低门槛之后带来的一个好处。

还发现 15% 是由售前同学去做的，与客户在前期沟通的时候，即可通过低代码拖拉拽，快速做出来一个效果呈现给客户看，最终发现也有 8% 左右是由业务部门自己去做一些指标的可视化，这也是一种呈现。

用了一年之后发现，其实低代码真的能够在我们这些企业里面进行赋能，进行提效。在此也是想告诉大家，可以大胆试一试低代码。