您的位置:  首页 > 技术杂谈 > 正文

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

2022-06-06 12:00 https://my.oschina.net/yunzhihui/blog/5534895 云智慧AIOps社区 次阅读 条评论
本文由FlyFish项目PMC王海虎参加OpenTalk沙龙的主题演讲《低代码平台FlyFish在云智慧的落地实践探索》转录而来,AIOps社区在征得本人授权后发布
讲师简介:
王海虎,开源项目FlyFish项目PMC,云智慧研发经理,全栈工程师,主攻可视化、3D引擎、3D gis场景、低代码等方向。AlOps社区专家团成员。开源项目AntV贡献者,清华大学Thulab的DWF项目开发者之一。

低代码能解决什么问题

近些年,低代码逐渐成为技术圈内的热门概念,有人说低代码代表着未来的开发方向,也有人说低代码并不能真正替代工程师。抛开这些争议不谈,我们不妨从场景出发,看看低代码到底解决了了哪些问题
 
身为一个工程师,特别是前端工程师,当你在开发一个数据可视化项目时,是否有遇到下面这些问题
  • 需求变更:频繁变更风格、效果、光晕、主题、配色、内容、交互特效等。
  • 应对复杂:兼容、性能、速度、实时性、高可用、持久化、鉴权、多主题、国际化。
  • 应对变化:语法糖、开发模式、框架、技术栈、版本更新、人员整体能力
 
当你站在工程师的视角去审视过往的工作,你会发现,这些场景都带来了很多严重的问题
  • 人员浪费:无统一基础平台,导致大量工作重复开发、重复测试。无法沉淀业务、促进人员成长,造成人员浪费。
  • 数据无法服用:同样的项目,不同的人员开发出来的数据格式完全不同。过于依赖开发人员的习惯,数据复用性较差。
  • 效率低下:项目交付周期太长、人员成本太大。开发过程中大量的简单基础工作需要重复去完成,降低开发效率。
  • 质量无法保障:项目质量不稳定。不同的开发人员的开发产物质量各不相同,开发质量无法得到保障。
  • 人员成长缓慢:简单的增删改查、简单码页面,需要人员投入。优秀人员不愿意干,一般人员不放心。没有成长空间。
 
每一种新型技术概念火起来,背后一定是解决了之前某个痛点问题,低代码也是如此。试想一下,以前我们要做一个数据可视化的大屏项目,我们的架构设计是什么?,是不是如下图所示的访问层、输出层、实现层、组件层、框架层、依赖层等等,每一层都有种来繁多的技术栈。
 
而其中有许多的技术细节就如前面说的,有许多的增删改查,优秀人员不愿意干,一般人员不放心。没有成长空间。这个严重拖慢了研发和项目交付的效率,而低代码的出现,就是为了解决这个问题,使你可以非常快速搭建一套解决方案。无代码基础也可快速上手。
 
在增加团队效率方面,由于使用低代码平台,使得可视化变成所见即所得,一站式开发无需搭建环境,通过搭载海量开箱即用的高质量组件,我们可以通过拖拉拽的方式快速生成一整套解决方案。
 
这样做的另一个好处是,开发过程从原本一锤子的买卖,变成可沉淀复用的资产。组件之间可以沉淀复用,数据方向可通过规范标准,提升复用性。

FlyFish简介

飞鱼平台(FlyFish)是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台,为数据可视化开发场景提供了高效的一站式解决方案。飞鱼提供丰富的组件和应用模板库,可通过拖拉拽的形式完成数据可视化开发,零开发背景的用户也可完成数据可视化开发工作。目前FlyFish已经开源,感兴趣的同学可访问GitHub/Gitee地址查看项目源码
GitHub 地址: https://github.com/CloudWise-OpenSource/FlyFish
Gitee 地址: https://gitee.com/CloudWise/fly-fish

FlyFish如何为云智慧内部工程师提效

组件化&配置化

不同大屏之间的效果是千差万别的,这方面无法做到统一,但是我们可以将组件的样式固定下来,同时,将常用的一些配置抽离出来,比如字体的颜色等。这样工程师就可以复用过往沉淀下来的组件素材,快速开发一张大屏项目。

在线开发

传统的开发模式是本地开发,然后将代码都通过git合并到某个仓库中,这样做的缺点是每个人本地都要安装部署一套开发环境,不同系统如Linux、Mac、Windows之间部署方式也会有所差别。使用在线开发的好处在于无须部署开发环境,开箱即用;代码复制、分享方便,可以提升协同开发效率。

不同问题场景

针对不同项目、不同场景所产生的差异,FlyFish通过过往项目积累下来的丰富大屏素材与组件模版,在不同场景下给出不同的结局方案。
相同大屏
原本两周的工作量,现直接通过FlyFish拖拉拽,无需开发人员接入,直接一键生成
相似大屏
原来是从零到一开发,现在可通过FlyFish复制,在已有的相似大屏上面直接开发
相似组件
大屏样式完全不同,没有相似之处,但有相似的组件,直接基于现成组件进行二次开发

FlyFish核心架构设计与演进

核心架构

在2D组件层面,FlyFish集成了D3、Echarts、Highcharts等组件集,3D组件主要包含了3D模型、等面值、渲染体等数据可视化算法。其他方面,FlyFish在Vis引擎层面,还抽象了模块管理、组件管理、函数管理等功能

组件设计

组件之间相互隔离,采用的是模块化的概念,这样话我们就无需关注样式污染、作用域污染问题了
  1. Config 作为组件的基本配置抽象,如width、hight
  1. Option 作为组件自定义抽象,一般作为组件的样式配置
  1. DataSource 作为组件的数据抽象,一般存储组件的数据信息

函数、数据集的概念

函数概念抽象出来的意义是:组件是固定的代码逻辑,为了提高灵活性,抽象了函数的概念,每一个函数里面都有自定义的代码快,可以根据场景不同来定义逻辑。
数据集抽象出来的意义是:每一个组件都具备数完整的据交互能力,在特有的场景下一个组件对应一个HTTP接口太过浪费,基础此场景问题抽象出数据集概念,可以有多个组件共用一个数据集。
 

调度中心Event

所有的组件、函数相互之间都是隔离的,为了让我们组件与组件、组件与函数之间进行通信、组件与数据源进行交互,抽象了调度中心Event的概念,可以通过发出指令告诉Event,由Event来通知各个监听模块,从而达到通信机制。

Screen视角

熟悉飞鱼架构的同学都知道飞鱼有两个文件,一个是Screen.js、另一个Editer.js,分别对应引擎能力和编辑器能力。看下方架构图可以发现在Screen视角增加了引擎的优化处理,还有Screen身上的一些属性。其中包括Screen自身的Config、Option、Code,除此之外还抽象出了序列化和反序列化、全局变量、缩放类型、全局ip Port,这些属性主要是辅助我们做出一个完整的应用,每一个应用自身都是如下的架构图,应用于应用之间是相互独立的,无需担心污染问题。 tool部分是Editer提供的能力。

FlyFish未来架构演进

最后,在谈到FlyFish未来演进时,王海虎也坦言,未来FlyFish将在如下几个方便着重发力
  • 云编译:告别传统编译、拥抱云编译
  • 3D:结合FlyFish推出3D引擎、3D编辑器
  • 数据:数据接入、ETL、接口二次开发

更多福利

目前,FlyFish的组件现金激励计划正在进行中,开发组件,领取万元现金
活动地址: http://bbs.aiops.cloudwise.com/t/Activity
 
同时,您也可以微信扫描识别下方二维码,备注【飞鱼】加入 AIOps 社区飞鱼开发者交流群,与 FlyFish 项目 PMC 面对面交流~
 
展开阅读全文
  • 0
    感动
  • 0
    路过
  • 0
    高兴
  • 0
    难过
  • 0
    搞笑
  • 0
    无聊
  • 0
    愤怒
  • 0
    同情
热度排行
友情链接