揭開NoahV智慧運維前端框架的神祕面紗

AIOps智慧運維發表於2019-10-30
運維前端框架

作者簡介：莫海豔 百度資深前端研發工程師
百度智慧運維（Noah）產品前端技術方向負責人，在運維資料視覺化、中後臺前端解決方案等方向上，有著豐富的實踐經驗。

乾貨概覽

眾所周知，前端有三大主流框架：Vue、React、Angular，這些前端框架可以幫助我們快速搭建專案，但是我們在實際專案中往往還需要投入很大精力去使用其他程式碼庫與應用作為補充支援（如：需要一些基礎的UI元件庫，需要HTTP請求庫等），另外，在實際應用到不同領域時，會有很多重複性的開發工作。

正因為上述原因，我們構建了自己的智慧運維前端框架——NoahV（現已開源），它可以結合運維業務場景，提供常用的運維元件庫及工具，比如：表格、表單、趨勢圖、資料請求、資料模擬等等。除了上面提到的一些視覺化元件，NoahV還特別提供了佈局應用，我們的佈局應用除了左-右，上-下佈局，還有運維領域中經典的左側服務樹與右側應用的互動佈局。此外，我們還把資料請求、資料互動與元件結合，並用配置化的開發模式來大幅度降低二次開發的成本。下面，我們就來詳細介紹NoahV是如何幫助開發人員快速提升研發效率的。

NoahV把後端工程師變成了全棧

1.表格元件

在運維業務中，表格通常用來展示一些運維物件、運維事件列表（比如上線任務列表、監控任務列表、監控報警事件列表等）。但是運維的表格與基礎表格不同的是，有一些運維物件，如圖1，上線模板表格，除了渲染上線模板的列表資訊，還需要按模板名稱、建立時間進行篩選(圖1.b)，對具體的一條模板資訊進行編輯或者刪除操作(圖1.c)。所以運維業務中的表格應用通常包含了增刪改查的操作，這類操作雖然簡單，對於非前端人員上手這類開發還是需要一定的前端知識。我們在NoahV中把表格元件做了進一步的增強，用配置化實現資料展示，資料操作等行為的開發，讓非前端開發人員輕鬆上手。

圖片 1.png

具體的配置看下圖：
圖片 2.png

  • columns：表格每列的資料定義，對應圖1.a
  • url: 表格資料請求的url，對應圖1.a
  • method: 表格資料請求的方式，對應圖1.a
  • items: 表格篩選的互動，對應圖1.b
  • action: 表格編輯，刪除的資料互動，對應圖1.c

在前後端分離的開發模式中，前端需要後端提供資料，但是後端通常還沒開發完畢，這個時候前端就需要按照固定的資料結構自己來模擬資料。模擬資料其實是一個很繁瑣的工作，比如上面的表格這類應用，在我們的實際業務場景中，需求還挺多的，模擬資料就是一個重複性的工作。在NoahV中，我們就用NoahV Mockup工具來生成這類重複性的應用。

noahv cli就是我們的命令列工具，裡面包含了NoahV Mockup模組，這個模組有一個命令就是noahv create命令，當執行noahv create，提示輸入模擬資料的介面名稱，這個介面名稱由一個具體的檔案路徑+檔名稱組成，比如輸入api/table, 會自動在mockup目錄下生成api資料夾，同時會在api資料夾中建立table模擬資料。

備註：使用noahv create之前需要安裝noahv cli命令列工具，更詳細的使用步驟，請檢視我們的文件中心（ https://baidu.github.io/NoahV）。

2.佈局應用

表格是前端的一個常用應用，當然還有一些如表單應用、列表應用等等，但是這些應用都不能成為獨立的頁面。這個獨立的頁面是包含了導航、麵包屑、內容體，有的頁面還會有更復雜的佈局。所以前端應該如何佈局，是很多開發人員關心的問題。

2.1 上-下佈局

我們常用的頁面佈局有上-下佈局，或者左-右佈局模式。通常上-下佈局中的上就是頭部導航，下就是內容體，頭部導航又有一級導航、二級導航之類，登入/退出等。這類共性的佈局需求，我們在NoahV中也做了統一的封裝，就是導航配置，我們先看下導航配置出來的效果圖。

圖片 3.png

a對應logo，b對應導航選單，c對應登入，d對應麵包屑，e對應內容體。

我們來看下通過怎樣的配置來實現上面的介面：

圖片 4.png

  • 圖4中的logo是對圖3.a logo的配置
  • header是對圖3.b的選單導航配置
  • login是對圖3.c的登入配置
  • separator是對圖3.d麵包屑的配置，hasBread可以配置是否需要麵包屑

2.2 左-右佈局

前面說到除了上-下這類佈局，還有左-右這類情況，顧名思義，就是左側導航，右側內容體，通常情況下，頭部導航與左側導航有聯動，其實看圖4的導航配置中，看到有個type型別，type型別這裡有兩種值: header/header-sidebar，看具體的值就能對應上header-sidebar就是頭部導航與左側導航的情況。我們直接把圖4中的type值改為header-sidebar，就得到下圖的佈局介面：

圖片 5.png

2.3 自定義佈局擴充套件

當然，頁面佈局遠不止這兩種情況，比如在運維場景中，我們有很多互動是對服務的某個節點做操作，所以就有左側是服務樹，右側是服務節點對應的應用。這類佈局就需要前端開發人員自己做自定義的佈局開發。我們在佈局的入口頁面做了普通佈局與自定義佈局的開關，可以在兩種模式中進行切換。我們提供了自定義佈局的layout檔案，如果需要自定義模式就把這個檔案引入，並使用即可。

NoahV可擴充套件性是前端工程師的利器

上面詳細介紹了NoahV中表格元件，佈局元件如何幫助開發人員解決效率問題，接下來我們從架構上對NoahV做一個更全面的介紹。以下是NoahV的架構圖：

圖片 6.png

從這個架構圖看，NoahV由三個部分組成，第一個是NoahV的架構主體，第二個是NoahV的工具，第三個是NoahV的規範。

架構主體是NoahV的主要部分，由底層依賴、元件、場景、頁面、系統組成。NoahV又提供了開發階段的專案初始化、頁面建立、資料模擬，還有聯調階段、釋出階段的工具。架構主體與工具都遵循我們的開發規範、UI規範、API規範。下面我們來詳細介紹NoahV的這三個部分。

1.NoahV架構主體

NoahV架構主體分成5層，第一層是NoahV的底層依賴Vue JS。第二層是元件，我們通常說的元件就是基礎UI元件，比如Element UI，Iview之類的元件庫，比如Input, Select等等，把基礎UI元件與我們的運維物件、運維操作結合，就是我們的運維UI元件，比如前面介紹的表格元件。在運維業務中，我們的儀表盤，除了有趨勢圖、柱狀圖之類的基礎UI元件或運維UI元件，還需要趨勢圖元件的佈局、儀表盤展示等，我們把這些若干個元件放在一起，就是我們的場景。基礎UI元件、運維UI元件、場景的組裝就是我們的頁面。通過導航、路由等把各個頁面結合，就形成了一個完整的系統。

接下來我們來看下NoahV在開發、聯調、釋出階段都有哪些工具。

2.NoahV的工具

2.1 開發階段

當專案進入開發階段的時候，我們用專案初始化工具來初始化專案，開發者也可以根據自己的需要用頁面建立工具來建立頁面、元件等，生成的頁面與元件都可以用配置化的方式來開發，當然開發者也可以按照前面講的佈局那樣用擴充套件的方式來做自定義開發。在開發階段我們還需要使用模擬資料，所以NoahV用資料模擬工具來自動生成模擬介面。有了資料，就需要資料請求，對於資料請求，市面上有Fetch、Axios等一些高效的HTTP庫，但是在實際的業務場景中，我們需要處理如Restful介面的支援，未登入的跳轉，全域性loading等等需求，這些在Fetch、Axios是沒有封裝的，所以NoahV的NoahV Request對這些需求做了一定的整合封裝，而且還能通過Request Hook提供hook入口，讓開發者在請求前與請求成功以後的資料適配與轉換。

關於NoahV Request更細的使用細節，請檢視我們的使用文件（ https://baidu.github.io/NoahV...）。

2.2 聯調階段

當開發完成以後，就進入了前後聯調階段。當前端與後端進行聯調的時候，前端專案通常是有自己的服務，所以在呼叫後端介面的時候，會有跨域資料訪問的問題，為了解決跨域問題，在專案初始化的時候，NoahV引入了代理功能，可以將瀏覽器的的請求代理到目標Server上，從而繞過瀏覽器同源策略的安全限制，實現跨域資料訪問，只需在devProxy中加入相關配置即可。最後在專案釋出的時候，前端釋出成靜態的檔案，通過後端服務可以直接訪問這些檔案，所以代理服務就不需要了。

2.3 釋出階段

對於釋出階段的編譯釋出，我們結合Webpack與Babel實現NoahV的開發階段，釋出階段的構建與編譯，裡面安裝了通用的Webpack Loader與Weback Plugin去解析相應的檔案，我們還新增如資料統計之類的Webpack Plugin，開發人員無需關心具體的編譯過程。NoahV還提供了Webpack 與Typescript的環境配置，所以開發人員可以根據自己的專案需要去選擇自己需要的開發環境。

3.NoahV規範

上面的基礎UI元件、運維UI元件、場景、頁面以及我們的一些開發工具生成的相關應用都遵循我們的開發規範、UI規範、API規範。我們用命令列工具來實現應用的初始化，頁面的建立等等，頁面建立的時候自動新增頁面的路由。所以命令列工具自動把頁面建立、頁面佈局、頁面導航、以及頁面路由等的邏輯自動化、規範化了。同時，像元件、頁面佈局、頁面導航、頁面路由這些元素都是可配置的，這些配置讓非前端開發人員輕鬆上手，開發人員還可以根據專案的實際需求做自定義的擴充套件開發。

前面對NoahV做了這麼多的介紹，下面我們來看看如何使用NoahV。

如何使用NoahV

在開始之前，確保正確安裝和配置了 Node.js v6.5 或以上。

如何安裝：

npm install noahv-cli -g

noahv –help

執行noahv –help，會得到如下介面：

圖片 7.png

步驟一：初始化頁面

mkdir project && cd project && noahv init

如果建立儀表盤應用採用：noahv init --dashboard

如果想使用Typescript開發應用採用：noahv init --ts

用noahv start來啟動應用

啟動應用以後，會看到如下的介面：

圖片 8.png

步驟二：建立頁面

noahv create list

NoahV目前的建立功能包含有noahv create action | list | filterList | form | chart | api | test, 更詳細的細節請參考我們的使用文件。

關於noahv-mockup、noahv-request、noahv-test等等也請參考我們的使用文件（ https://baidu.github.io/NoahV...）。

當建立相應的應用的時候，控制檯介面會有相應的提示：

圖片 9.png

步驟三：釋出專案

sh build.sh

執行build指令碼，會自動對整個使用的專案進行打包編譯。

總 結

前面對NoahV運維前端框架做了整體介紹，它在我們的實際專案中，大幅提升了運維產品的研發效率。同時，通過NoahV框架，我們的產品易用性和體驗一致性也得到了大幅加強。

更詳細的介紹與使用細節請檢視： https://baidu.github.io/NoahV

NoahV現已開源，Github地址：https://github.com/baidu/NoahV

大家有任何疑問或者想要了解更多，可以直接後臺聯絡我們，有小編在等著和大家交流~

溫馨提示

如果你喜歡本文，請分享到朋友圈，想要獲得更多資訊，請關注我們！
如果你有任何問題歡迎留言諮詢~
如果想試用我們的企業級運維平臺NoahEE，請聯絡郵箱：noah_bd@baidu.com

相關文章