OpsMind 前端低代码开发平台--MPlatform

原创
2021/01/25 10:48
阅读数 1K

简介

MPlatform,是 OpsMind 一个快速搭建 WEB 站点的平台。在开发过程中,只需要进行简单的组件拼接,就能完成整站的搭建任务,与传统开发方式相比,省去了很多编写代码的工作量。MPlatform 的前身为 OpsMind dashboard,当时的开发平台性能差、卡顿严重、配置繁琐,随着客户需求的不断增加,经过开发团队长时间的摸索和开发,MPlatform 诞生了,相比于之前的版本,MPlatform 借鉴了各大现代框架的设计思想,极大的提高了用户在使用上的体验,它把已有的组件有结构的组织在一起,使用拖拽的方式组装成最终的页面。

平台功能主要分为以下几项:

1、组件(Mcomponent)

2、用于组装组件的编辑器可视化界面

3、基于 OpsMind 自研的 CMDB 和 Workflow 提供数据的展示和修改

视图布局

用于组装组件的编辑器如下图所示,它主要包含几个模块:

1、左侧为组件树的展示和修改,由内置的各个组件组装而成。MPlatform 为组件树提供了丰富的操作选项。除了添加、拷贝粘贴、预览、删除等功能,还可以通过拖动组件在组件树中的位置,即时的在预览区域展示出效果。

2、预览区块占据了页面的右半边部分。在组件树中,每个组件都可以单独预览。组件的预览,显示的是这个组件及其子组件共同作用的效果。预览根组件,能看到完整的页面。也可以通过右上角的按钮进行完整页面的预览。

3、右侧页面属性配置,都有可配置的属性,面板可以对左侧选中的组件进行配置。如,配置按钮组件的颜色、大小等,都取决于组件开发者对该组件的预留项。

组件制作

OpsMind 内置一套 UI 组件库,可以满足日常的页面需求,如组件无法满足需求或者有一些特定场景的组件需求时,可能需要自己动手去编写一些组件了。

下图展示了一个组件的脚本编辑区域

获取服务器数据

MPlatform 已和 OpsMind 的 CMDB、Workflow 等系统的数据打通,所以在 MPlatform 里获取 CMDB 的数据或者触发工作流的任务是很容易的。

对于 MPlatfrom来说,CMDB中的对象都是一种资源,每种资源都有不同的组件来进行可视化展示。

如果想展示一些表格信息,最简单的操作就是导入一个常用查询的表格,如下图。 

如果想列举一些人员、服务器、部门的关系,可能是这样的。

理念

相比于传统的开发模式,前端需要搭建开发环境、编写组件、梳理业务逻辑、联调后端接口、发布上线等一系列繁琐的工作,中间一个环节的出错,就会引发项目的延期、功能的不稳定等一系列问题。

这时候,MPlatform 应运而生,对原本混沌的 JavaScript 代码按照标准模式进行组织和分类。据此来构建出的 Web App,不仅提高了系统的可维护性,并且便于和其他开发者进行沟通,从而形成一个巨大的开发链条。借助其他开发者提供的一批模块,使我们能够专注于业务逻辑,同时降低代码冗余、开发成本和潜在风险。

基于模块化开发的大体思路。我们在对一堆看似杂乱无章的 DOM 结构进行归纳、总结、提炼,使之成为一个个独立的组件。数个组件的协同工作,呈现出一个完整的页面。

生态

在运维领域的前端开发实践中,MPlatform 已经成为大量业务系统开发的轴心一环。在存在 CMDB 中的数据进行组织和整理,形成最终的用户可见页面过程中,不仅推动了运维监控系统整体视觉和交互规范的逐渐完善,也使其在前端技术中得到落实。

当前市面上存在着比较多的前端组件化框架,大多门槛较高。MPlatform 提供更低廉、简洁的使用方式组装大量重复存在而交互样式较为单一的业务系统,实现了自己的模块管理机制。

优势

1、平台化的规范了交互方式、页面及组件样式。非常适合交互样式比较固定的业务系统。

2、简易高效的界面搭建,节省了大量的开发时间和精力。

3、使用了可视化的编辑模式,所见即所得。极大的降低了前端开发的学习成本和门槛。团队中其他角色的成员,也能够轻松简易的上手。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部