乐趣区

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

简介

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、应用了可视化的编辑模式,所见即所得。极大的升高了前端开发的学习老本和门槛。团队中其余角色的成员,也可能轻松繁难的上手。

退出移动版