当前位置: 首页 > Web前端 > JavaScript

低代码平台FlyFish在云智能上的实践探索

时间:2023-03-26 21:08:11 JavaScript

本文摘自FlyFish项目PMC王海虎在OpenTalk沙龙的主题演讲《低代码平台FlyFish在云智慧的落地实践探索》。项目PMC,云智能研发经理,全栈工程师,专注于可视化、3D引擎、3Dgis场景、低代码等方向。AlOps社区专家组成员。开源项目AntV贡献者,清华大学ThulabDWF项目开发者之一。低代码能解决什么问题?近年来,低代码逐渐成为技术圈的一个流行概念。有人说低代码代表了未来的发展方向,也有人说低代码并不能真正取代工程师。抛开这些争议不谈,我们还是从场景出发,看看低代码解决了哪些问题。作为一名工程师,尤其是前端工程师,在开发数据可视化项目时,是否遇到过以下问题?需求变更:风格、效果、光环、主题、配色、内容、交互效果等变化频繁应对复杂性:兼容性、性能、速度、实时性、高可用、持久化、鉴权、多主题、国际化。应对变化:语法糖、开发模式、框架、技术栈、版本更新、整体人员能力当你站在一个工程师的角度去看待过去的工作,你会发现这些场景带来了很多严重的问题和浪费人员:没有统一的基础平台,导致很多工作重复开发、重复测试。无法积累业务,促进人员成长,造成人员浪费。数据不能取:同一个项目,不同人员开发的数据格式完全不同。过于依赖开发者的习惯,数据复用性差。低效率:项目提前期太长,人员成本太高。开发过程中很多简单的基础工作需要反复做,降低了开发效率。质量无法保证:工程质量不稳定。不同开发商的开发产品质量参差不齐,开发质量无法保证。人员增长缓慢:简单的增删改查,简单的代码页需要人员投入。优秀的人员不愿意做,普通的人员也不放心。没有成长的空间。每一个新的技术概念火起来,背后一定是解决了之前的一个痛点,低代码也是如此。试想一下,我们以前做一个大屏数据可视化项目。我们的架构设计是什么?,到底是接入层,输出层,实现层,组件层,框架层,依赖层等等,如下图所示,每一层都有各种技术栈。而且里面有很多技术细节,上面说了很多增删改查。优秀的人员不愿意做,普通的人员也不放心。没有成长的空间。这严重拖慢了研发和项目交付的效率,低代码的出现就是为了解决这个问题,让你可以非常快速地构建解决方案。无需任何代码基础即可快速上手。在提高团队效率方面,由于使用了低代码平台,可视化成为所见即所得。一站式开发,无需搭建环境。通过搭载大量开箱即用的优质组件,我们可以通过拖拽的方式快速生成一整套解决方案。这样做的另一个好处是开发过程已经从一次性销售变成了可以重复使用的资产。组件可以复用,数据方向可以标准化,提高复用性。飞鱼简介飞鱼平台(FlyFish)是云智自主设计研发的低门槛、高扩展性的低代码应用开发平台,为数据可视化开发场景提供高效的一站式解决方案。飞鱼提供了丰富的组件库和应用模板,可以通过拖拽的方式完成数据可视化开发,零开发背景的用户也可以完成数据可视化开发。目前,FlyFish是开源的。感兴趣的同学可以访问GitHub/Gitee地址查看项目源码。GitHub地址:https://github.com/CloudWise-...Gitee地址:https://gitee.com/CloudWise/f...FlyFish是如何提升云智内部工程师效率的。组件化&配置不同大屏的效果差别很大,这方面不能统一,但是我们可以固定组件的样式,同时把一些常用的配置拉出来,比如颜色font等,这样工程师就可以复用过去积累的组件素材,快速开发大屏项目。在线开发传统的开发模式是本地开发,然后通过git将代码合并到某个仓库。这样做的缺点是大家必须在本地安装部署一个开发环境。Linux、Mac、Windows等不同系统部署方式也会有所不同。使用在线开发的好处是无需部署开发环境,开箱即用;代码拷贝共享方便,可以提高协同开发的效率。不同的项目,不同的场景,不同的问题场景是不一样的。飞鱼通过以往项目积累的丰富的大屏素材和组件模板,在不同的场景下提供不同的结局解决方案。原来同一个大屏需要两周的工作量,现在无需开发者权限,直接通过FlyFish拖拽即可,直接一键生成类似的大屏。最初是从零到一开发的,现在可以通过FlyFish进行复制,可以在现有的同类大屏上使用。直接在屏幕上开发相似的组件大屏风格完全不同,没有相似之处,但是有相似的组件,二次开发直接基于现成的组件FlyFish核心架构设计和进化核心架构在2D组件层面,FlyFish集成了D3、Echarts、Highcharts等组件集,3D组件主要包括3D模型、等面值、渲染体积等数据可视化算法。其他方面,在Vis引擎层面,FlyFish也将模块管理、组件管理、功能管理等功能组件设计组件抽象出来,相互隔离,并采用模块化的理念,让我们无需关注风格污染和范围污染。问题是Config作为组件的基础配置抽象,比如width和hightOption作为组件自定义抽象,一般作为组件样式配置DataSource作为组件数据抽象,一般存储组件的数据信息功能和概念数据集的功能。意思是:一个组件就是一个固定的代码逻辑。为了提高灵活性,对函数的概念进行了抽象。每个函数都有自定义代码块,可以根据不同的场景定义逻辑。数据集抽象的意义在于:每个组件都有完整的数据交互能力。在特定场景下,一个组件对应一个HTTP接口太浪费了。基于这种场景,可以抽象出数据集的概念,可以有多个组件。共享一个数据集。调度中心Event的所有组件和功能都是相互隔离的。为了让我们能够在组件、组件和功能之间进行通信,与数据源进行交互,调度中心Event的概念被抽象出来,可以通过TellEvent下发命令,Event会通知各个监控模块,所以作为通信机制的实现。熟悉Feiyu屏幕视角架构的同学都知道,Feiyu有两个文件,一个是Screen.js,一个是Editor.js,分别对应引擎能力和编辑器能力。看下面的架构图,可以发现从Screen的角度添加了引擎优化处理,以及Screen的一些属性。其中包括Screen自己的Config、Option和Code。此外,还抽象了序列化和反序列化、全局变量、缩放类型和全局ip端口。这些属性主要是为了辅助我们做一个完整的应用。一个应用本身有如下架构图,应用之间是相互独立的,不用担心污染。工具部分是Editor提供的能力。FlyFish未来架构的演进最后,在谈及FlyFish的未来演进时,王海虎也坦言,未来FlyFish将以以下方式专注于云编译:告别传统编译,拥抱云编译3D:上线3D引擎和3D编辑器结合飞鱼数据:数据接入、ETL、接口二次开发更多福利目前飞鱼的组件现金激励计划正在进行中,开发组件,领取1万元现金活动地址:http://bbs。aiops.cloudwise.co...同时,您也可以微信扫描下方二维码,关注【飞鱼】加入AIOps社区飞鱼开发者交流群,面对面交流与FlyFish项目的PMC一起~