关于前端:低代码平台FlyFish在云智慧的落地实践探索

2次阅读

共计 2960 个字符,预计需要花费 8 分钟才能阅读完成。

本文由 FlyFish 我的项目 PMC 王海虎加入 OpenTalk 沙龙的主题演讲《低代码平台 FlyFish 在云智慧的落地实际摸索》转录而来,AIOps 社区在征得自己受权后公布

讲师简介:
王海虎,开源我的项目 FlyFish 我的项目 PMC,云智慧研发经理,全栈工程师,主攻可视化、3D 引擎、3D gis 场景、低代码等方向。AlOps 社区专家团成员。开源我的项目 AntV 贡献者,清华大学 Thulab 的 DWF 我的项目开发者之一。

低代码能解决什么问题

近些年,低代码逐步成为技术圈内的热门概念,有人说低代码代表着将来的开发方向,也有人说低代码并不能真正代替工程师。抛开这些争议不谈,咱们无妨从场景登程,看看低代码到底解决了了哪些问题

身为一个工程师,特地是前端工程师,当你在开发一个数据可视化我的项目时,是否有遇到上面这些问题

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

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

  • 人员节约:无对立根底平台,导致大量工作反复开发、反复测试。无奈积淀业务、促成人员成长,造成人员节约。
  • 数据无奈服用:同样的我的项目,不同的人员开发进去的数据格式齐全不同。过于依赖开发人员的习惯,数据复用性较差。
  • 效率低下:我的项目交付周期太长、人员老本太大。开发过程中大量的简略根底工作须要反复去实现,升高开发效率。
  • 品质无奈保障:我的项目品质不稳固。不同的开发人员的开发产物品质各不相同,开发品质无奈失去保障。
  • 人员成长迟缓:简略的增删改查、简略码页面,须要人员投入。优良人员不违心干,个别人员不释怀。没有成长空间。

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

而其中有许多的技术细节就如后面说的,有许多的增删改查,优良人员不违心干,个别人员不释怀。没有成长空间。这个重大拖慢了研发和我的项目交付的效率,而低代码的呈现,就是为了解决这个问题使你能够十分疾速搭建一套解决方案。无代码根底也可疾速上手。

在减少团队效率方面,因为应用低代码平台,使得可视化变成所见即所得,一站式开发无需搭建环境,通过搭载海量开箱即用的高质量组件,咱们能够通过利落拽的形式疾速生成一整套解决方案。

这样做的另一个益处是,开发过程从本来一锤子的交易,变成可积淀复用的资产。组件之间能够积淀复用,数据方向可通过标准规范,晋升复用性。

FlyFish 简介

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

目前 FlyFish 曾经开源,感兴趣的同学可拜访 GitHub/Gitee 地址查看我的项目源码
GitHub 地址:https://github.com/CloudWise-…
Gitee 地址:https://gitee.com/CloudWise/f…

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

组件化 & 配置化

不同大屏之间的成果是千差万别的,这方面无奈做到对立,然而咱们能够将组件的款式固定下来,同时,将罕用的一些配置抽离进去,比方字体的色彩等。这样工程师就能够复用过往积淀下来的组件素材,疾速开发一张大屏我的项目。

在线开发

传统的开发模式是本地开发,而后将代码都通过 git 合并到某个仓库中,这样做的毛病是每个人本地都要装置部署一套开发环境,不同零碎如 Linux、Mac、Windows 之间部署形式也会有所差异。应用在线开发的益处在于毋庸部署开发环境,开箱即用;代码复制、分享不便,能够晋升协同开发效率。

不同问题场景

针对不同我的项目、不同场景所产生的差别,FlyFish 通过过往我的项目积攒下来的丰盛大屏素材与组件模版,在不同场景下给出不同的终局计划。

雷同大屏
本来两周的工作量,现间接通过 FlyFish 利落拽,无需开发人员接入,间接一键生成

类似大屏
原来是从零到一开发,当初可通过 FlyFish 复制,在已有的类似大屏下面间接开发

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

FlyFish 外围架构设计与演进

外围架构

在 2D 组件层面,FlyFish 集成了 D3、Echarts、Highcharts 等组件集,3D 组件次要蕴含了 3D 模型、等面值、渲染体等数据可视化算法。其余方面,FlyFish 在 Vis 引擎层面,还形象了模块治理、组件治理、函数治理等性能

组件设计

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

  1. Config 作为组件的根本配置形象,如 width、hight
  2. Option 作为组件自定义形象,个别作为组件的款式配置
  3. 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.co…

同时,您也能够微信扫描辨认下方二维码,备注【飞鱼】退出 AIOps 社区飞鱼开发者交换群,与 FlyFish 我的项目 PMC 面对面交换~

正文完
 0