簡(jiǎn)介

MPlatform，是 OpsMind 一個(gè)快速搭建 WEB 站點(diǎn)的平臺(tái)。在開發(fā)過程中，只需要進(jìn)行簡(jiǎn)單的組件拼接，就能完成整站的搭建任務(wù)，與傳統(tǒng)開發(fā)方式相比，省去了很多編寫代碼的工作量。MPlatform 的前身為 OpsMind dashboard，當(dāng)時(shí)的開發(fā)平臺(tái)性能差、卡頓嚴(yán)重、配置繁瑣，隨著客戶需求的不斷增加，經(jīng)過開發(fā)團(tuán)隊(duì)長(zhǎng)時(shí)間的摸索和開發(fā)，MPlatform 誕生了，相比于之前的版本，MPlatform 借鑒了各大現(xiàn)代框架的設(shè)計(jì)思想，極大的提高了用戶在使用上的體驗(yàn)，它把已有的組件有結(jié)構(gòu)的組織在一起，使用拖拽的方式組裝成最終的頁面。

平臺(tái)功能主要分為以下幾項(xiàng)：

1、組件（Mcomponent）

2、用于組裝組件的編輯器可視化界面

3、基于 OpsMind 自研的 CMDB 和 Workflow 提供數(shù)據(jù)的展示和修改

視圖布局

用于組裝組件的編輯器如下圖所示，它主要包含幾個(gè)模塊：

1、左側(cè)為組件樹的展示和修改，由內(nèi)置的各個(gè)組件組裝而成。MPlatform 為組件樹提供了豐富的操作選項(xiàng)。除了添加、拷貝粘貼、預(yù)覽、刪除等功能，還可以通過拖動(dòng)組件在組件樹中的位置，即時(shí)的在預(yù)覽區(qū)域展示出效果。

2、預(yù)覽區(qū)塊占據(jù)了頁面的右半邊部分。在組件樹中，每個(gè)組件都可以單獨(dú)預(yù)覽。組件的預(yù)覽，顯示的是這個(gè)組件及其子組件共同作用的效果。預(yù)覽根組件，能看到完整的頁面。也可以通過右上角的按鈕進(jìn)行完整頁面的預(yù)覽。

3、右側(cè)頁面屬性配置，都有可配置的屬性，面板可以對(duì)左側(cè)選中的組件進(jìn)行配置。如，配置按鈕組件的顏色、大小等，都取決于組件開發(fā)者對(duì)該組件的預(yù)留項(xiàng)。

組件制作

OpsMind 內(nèi)置一套 UI 組件庫，可以滿足日常的頁面需求，如組件無法滿足需求或者有一些特定場(chǎng)景的組件需求時(shí)，可能需要自己動(dòng)手去編寫一些組件了。

下圖展示了一個(gè)組件的腳本編輯區(qū)域

獲取服務(wù)器數(shù)據(jù)

MPlatform 已和 OpsMind 的 CMDB、Workflow 等系統(tǒng)的數(shù)據(jù)打通，所以在 MPlatform 里獲取 CMDB 的數(shù)據(jù)或者觸發(fā)工作流的任務(wù)是很容易的。

對(duì)于 MPlatfrom來說，CMDB中的對(duì)象都是一種資源，每種資源都有不同的組件來進(jìn)行可視化展示。

如果想展示一些表格信息，最簡(jiǎn)單的操作就是導(dǎo)入一個(gè)常用查詢的表格，如下圖。

如果想列舉一些人員、服務(wù)器、部門的關(guān)系，可能是這樣的。

理念

相比于傳統(tǒng)的開發(fā)模式，前端需要搭建開發(fā)環(huán)境、編寫組件、梳理業(yè)務(wù)邏輯、聯(lián)調(diào)后端接口、發(fā)布上線等一系列繁瑣的工作，中間一個(gè)環(huán)節(jié)的出錯(cuò)，就會(huì)引發(fā)項(xiàng)目的延期、功能的不穩(wěn)定等一系列問題。

這時(shí)候，MPlatform 應(yīng)運(yùn)而生，對(duì)原本混沌的 JavaScript 代碼按照標(biāo)準(zhǔn)模式進(jìn)行組織和分類。據(jù)此來構(gòu)建出的 Web App，不僅提高了系統(tǒng)的可維護(hù)性，并且便于和其他開發(fā)者進(jìn)行溝通，從而形成一個(gè)巨大的開發(fā)鏈條。借助其他開發(fā)者提供的一批模塊，使我們能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯，同時(shí)降低代碼冗余、開發(fā)成本和潛在風(fēng)險(xiǎn)。

基于模塊化開發(fā)的大體思路。我們?cè)趯?duì)一堆看似雜亂無章的 DOM 結(jié)構(gòu)進(jìn)行歸納、總結(jié)、提煉，使之成為一個(gè)個(gè)獨(dú)立的組件。數(shù)個(gè)組件的協(xié)同工作，呈現(xiàn)出一個(gè)完整的頁面。

生態(tài)

在運(yùn)維領(lǐng)域的前端開發(fā)實(shí)踐中，MPlatform 已經(jīng)成為大量業(yè)務(wù)系統(tǒng)開發(fā)的軸心一環(huán)。在存在 CMDB 中的數(shù)據(jù)進(jìn)行組織和整理，形成最終的用戶可見頁面過程中，不僅推動(dòng)了運(yùn)維監(jiān)控系統(tǒng)整體視覺和交互規(guī)范的逐漸完善，也使其在前端技術(shù)中得到落實(shí)。

當(dāng)前市面上存在著比較多的前端組件化框架，大多門檻較高。MPlatform 提供更低廉、簡(jiǎn)潔的使用方式組裝大量重復(fù)存在而交互樣式較為單一的業(yè)務(wù)系統(tǒng)，實(shí)現(xiàn)了自己的模塊管理機(jī)制。

優(yōu)勢(shì)

1、平臺(tái)化的規(guī)范了交互方式、頁面及組件樣式。非常適合交互樣式比較固定的業(yè)務(wù)系統(tǒng)。

2、簡(jiǎn)易高效的界面搭建，節(jié)省了大量的開發(fā)時(shí)間和精力。

3、使用了可視化的編輯模式，所見即所得。極大的降低了前端開發(fā)的學(xué)習(xí)成本和門檻。團(tuán)隊(duì)中其他角色的成員，也能夠輕松簡(jiǎn)易地上手。