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

2023-10-27 14:50

本文主要是介绍低代码平台FlyFish在云智慧的落地实践探索,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

低代码能解决什么问题

近些年,低代码逐渐成为技术圈内的热门概念,有人说低代码代表着未来的开发方向,也有人说低代码并不能真正替代工程师。抛开这些争议不谈,我们不妨从场景出发,看看低代码到底解决了了哪些问题 身为一个工程师,特别是前端工程师,当你在开发一个数据可视化项目时,是否有遇到下面这些问题

  • 需求变更:频繁变更风格、效果、光晕、主题、配色、内容、交互特效等。
  • 应对复杂:兼容、性能、速度、实时性、高可用、持久化、鉴权、多主题、国际化。
  • 应对变化:语法糖、开发模式、框架、技术栈、版本更新、人员整体能力


当你站在工程师的视角去审视过往的工作,你会发现,这些场景都带来了很多严重的问题

  • 人员浪费:无统一基础平台,导致大量工作重复开发、重复测试。无法沉淀业务、促进人员成长,造成人员浪费。
  • 数据无法服用:同样的项目,不同的人员开发出来的数据格式完全不同。过于依赖开发人员的习惯,数据复用性较差。
  • 效率低下:项目交付周期太长、人员成本太大。开发过程中大量的简单基础工作需要重复去完成,降低开发效率。
  • 质量无法保障:项目质量不稳定。不同的开发人员的开发产物质量各不相同,开发质量无法得到保障。
  • 人员成长缓慢:简单的增删改查、简单码页面,需要人员投入。优秀人员不愿意干,一般人员不放心。没有成长空间。


每一种新型技术概念火起来,背后一定是解决了之前某个痛点问题,低代码也是如此。试想一下,以前我们要做一个数据可视化的大屏项目,我们的架构设计是什么?,是不是如下图所示的访问层、输出层、实现层、组件层、框架层、依赖层等等,每一层都有种来繁多的技术栈。


 而其中有许多的技术细节就如前面说的,有许多的增删改查,优秀人员不愿意干,一般人员不放心。没有成长空间。这个严重拖慢了研发和项目交付的效率,而低代码的出现,就是为了解决这个问题使你可以非常快速搭建一套解决方案。无代码基础也可快速上手。c6f5c9c2cc08accc961c30b5c90fb771.png 在增加团队效率方面,由于使用低代码平台,使得可视化变成所见即所得,一站式开发无需搭建环境,通过搭载海量开箱即用的高质量组件,我们可以通过拖拉拽的方式快速生成一整套解决方案。


 这样做的另一个好处是,开发过程从原本一锤子的买卖,变成可沉淀复用的资产。组件之间可以沉淀复用,数据方向可通过规范标准,提升复用性。

FlyFish简介

飞鱼平台(FlyFish)是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台,为数据可视化开发场景提供了高效的一站式解决方案。飞鱼提供丰富的组件和应用模板库,可通过拖拉拽的形式完成数据可视化开发,零开发背景的用户也可完成数据可视化开发工作。


目前FlyFish已经开源,感兴趣的同学可访问GitHub/Gitee地址查看项目源码GitHub 地址: https://github.com/CloudWise-OpenSource/FlyFishGitee 地址:https://gitee.com/CloudWise/fly-fish

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

组件化&配置化

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

在线开发

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

8e70d828d3c023295168b6d1d5036464.png

不同问题场景

针对不同项目、不同场景所产生的差异,FlyFish通过过往项目积累下来的丰富大屏素材与组件模版,在不同场景下给出不同的结局方案。

相同大屏

原本两周的工作量,现直接通过FlyFish拖拉拽,无需开发人员接入,直接一键生成 

相似大屏

原来是从零到一开发,现在可通过FlyFish复制,在已有的相似大屏上面直接开发 

相似组件

大屏样式完全不同,没有相似之处,但有相似的组件,直接基于现成组件进行二次开发

FlyFish核心架构设计与演进

核心架构

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

组件设计

组件之间相互隔离,采用的是模块化的概念,这样话我们就无需关注样式污染、作用域污染问题了

  1. Config 作为组件的基本配置抽象,如width、hight
  1. Option 作为组件自定义抽象,一般作为组件的样式配置
  1. DataSource 作为组件的数据抽象,一般存储组件的数据信息

b0590dac5d676f18f4afc280327c1e95.png

函数、数据集的概念

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

调度中心Event

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

Screen视角

熟悉飞鱼架构的同学都知道飞鱼有两个文件,一个是Screen.js、另一个Editer.js,分别对应引擎能力和编辑器能力。看下方架构图可以发现在Screen视角增加了引擎的优化处理,还有Screen身上的一些属性。其中包括Screen自身的Config、Option、Code,


除此之外还抽象出了序列化和反序列化、全局变量、缩放类型、全局ip Port,这些属性主要是辅助我们做出一个完整的应用,每一个应用自身都是如下的架构图,应用于应用之间是相互独立的,无需担心污染问题。 tool部分是Editer提供的能力。90cf81c65ee65b7c571ff9c51da16f4c.png

FlyFish未来架构演进

最后,在谈到FlyFish未来演进时,王海虎也坦言,未来FlyFish将在如下几个方便着重发力

  • 云编译:告别传统编译、拥抱云编译
  • 3D:结合FlyFish推出3D引擎、3D编辑器
  • 数据:数据接入、ETL、接口二次开发

更多福利

目前,FlyFish的组件现金激励计划正在进行中,开发组件,领取万元现金活动地址:http://bbs.aiops.cloudwise.com/t/Activity 

这篇关于低代码平台FlyFish在云智慧的落地实践探索的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/Sharon0408/article/details/125145361
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/286387

相关文章

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置(可选)启动服务应用场景

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内

pip install jupyterlab失败的原因问题及探索

《pipinstalljupyterlab失败的原因问题及探索》在学习Yolo模型时,尝试安装JupyterLab但遇到错误,错误提示缺少Rust和Cargo编译环境,因为pywinpty包需要它... 目录背景问题解决方案总结背景最近在学习Yolo模型,然后其中要下载jupyter(有点LSVmu像一个

Python中顺序结构和循环结构示例代码

《Python中顺序结构和循环结构示例代码》:本文主要介绍Python中的条件语句和循环语句,条件语句用于根据条件执行不同的代码块,循环语句用于重复执行一段代码,文章还详细说明了range函数的使... 目录一、条件语句(1)条件语句的定义(2)条件语句的语法(a)单分支 if(b)双分支 if-else(

MySQL数据库函数之JSON_EXTRACT示例代码

《MySQL数据库函数之JSON_EXTRACT示例代码》:本文主要介绍MySQL数据库函数之JSON_EXTRACT的相关资料,JSON_EXTRACT()函数用于从JSON文档中提取值,支持对... 目录前言基本语法路径表达式示例示例 1: 提取简单值示例 2: 提取嵌套值示例 3: 提取数组中的值注意

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》:本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先,从DeepSeek平台获取API密钥,用于身份验证。添加HTTP客户端依赖使用Jav

Java实现状态模式的示例代码

《Java实现状态模式的示例代码》状态模式是一种行为型设计模式,允许对象根据其内部状态改变行为,本文主要介绍了Java实现状态模式的示例代码,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来... 目录一、简介1、定义2、状态模式的结构二、Java实现案例1、电灯开关状态案例2、番茄工作法状态案例

C++实现封装的顺序表的操作与实践

《C++实现封装的顺序表的操作与实践》在程序设计中,顺序表是一种常见的线性数据结构,通常用于存储具有固定顺序的元素,与链表不同,顺序表中的元素是连续存储的,因此访问速度较快,但插入和删除操作的效率可能... 目录一、顺序表的基本概念二、顺序表类的设计1. 顺序表类的成员变量2. 构造函数和析构函数三、顺序表