簡介

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

平臺功能主要分為以下幾項：

1、組件（Mcomponent）

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

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

視圖布局

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

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

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

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

組件制作

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

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

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

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

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

如果想展示一些表格信息，最簡單的操作就是導入一個常用查詢的表格，如下圖。

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

理念

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

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

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

生態(tài)

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

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

優(yōu)勢

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

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

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