優(yōu)維低代碼：解析構(gòu)件開發(fā) Step by Step
低代碼是優(yōu)維科技長(zhǎng)期深耕的技術(shù)板塊，在漫長(zhǎng)的創(chuàng)業(yè)周期中，我們通過不斷實(shí)踐積累和迭代優(yōu)化，沉淀出EasyMABuilder前端低代碼平臺(tái)，迄今已成功賦能大量?jī)?yōu)質(zhì)用戶，為多個(gè)行業(yè)帶來前所未有的輕盈體驗(yàn)。
EasyMABuilder成功的背后，是優(yōu)維人數(shù)年的技術(shù)探索和EasyOps產(chǎn)品哲學(xué)的落地，蘊(yùn)含了主創(chuàng)團(tuán)隊(duì)對(duì)低代碼生態(tài)的深度思考和實(shí)踐創(chuàng)新。
我們特別推出低代碼專題撰稿計(jì)劃，以專欄系列文章的形式解構(gòu)低代碼在DevOps領(lǐng)域的技術(shù)表現(xiàn)。
上一篇文章，我們講述了在 EasyMABuilder 中如何通過表達(dá)式和微應(yīng)用函數(shù)來進(jìn)行數(shù)據(jù)處理，讓低代碼平臺(tái)也獲得了與專業(yè)代碼媲美的編寫代碼的能力和體驗(yàn)，不過這些代碼僅限于數(shù)據(jù)加工，它無(wú)法參與 UI 界面相關(guān)的工作，雖然 EasyMABuilder 提供了數(shù)百個(gè)開箱即用的構(gòu)件，并提供了在微應(yīng)用層面封裝模板的能力，但對(duì)于 UI 界面，總有更個(gè)性化的場(chǎng)景和需求，對(duì)此，我們提供了用戶編寫新構(gòu)件的能力，并提供配套的腳手架工具來方便用戶更快捷的編寫新構(gòu)件。
01 準(zhǔn)備
開始前，我們需要準(zhǔn)備本地開發(fā)環(huán)境。
- NodeJS (>=14)；
- Yarn (1.x)，安裝方式：執(zhí)行 npm install -g yarn；
- Lerna，安裝方式：執(zhí)行 npm install -g lerna。
02 創(chuàng)建一個(gè)新的構(gòu)件項(xiàng)目
開發(fā)者可以按需創(chuàng)建自己的構(gòu)件項(xiàng)目，每個(gè)項(xiàng)目中可以包含多個(gè)構(gòu)件包，每個(gè)構(gòu)件包又可以定義多個(gè)構(gòu)件。
使用優(yōu)維官方提供的 CLI 工具即可一鍵生成新的構(gòu)件項(xiàng)目：
這個(gè)新生成的項(xiàng)目已經(jīng)初始化提供了構(gòu)建、測(cè)試、打包、代碼靜態(tài)檢查等現(xiàn)代化的前端工程化配置，如果我們將項(xiàng)目托管在 GitHub 上，還可以開箱即用地使用包括持續(xù)集成和依賴更新等在內(nèi)的自動(dòng)化工作流。
03 創(chuàng)建一個(gè)新的構(gòu)件包
初始化的項(xiàng)目還沒有任何構(gòu)件包，我們先使用項(xiàng)目中內(nèi)置的腳手架工具創(chuàng)建一個(gè)：
- 運(yùn)行 yarn yo；
- 選擇 a new package of bricks；
- 輸入構(gòu)件包的名稱，例如 my-bricks；
- 然后，我們可以選擇同時(shí)創(chuàng)建一個(gè)構(gòu)件，本文為了演示我們先選擇跳過。
新的構(gòu)件包的代碼就已經(jīng)初始化完成，其中的各種工程配置文件可以按需自由調(diào)整。
04 創(chuàng)建一個(gè)新構(gòu)件
構(gòu)件包有了，我們?cè)賱?chuàng)建一個(gè)新的構(gòu)件：
- 運(yùn)行 yarn yo；
- 選擇 a new brick；
- 輸入構(gòu)件的名稱，例如 hello-world。
05 編寫構(gòu)件
初始化的構(gòu)件主要包含以下文件：
這個(gè)構(gòu)件已經(jīng)可以使用，我們先啟動(dòng)開發(fā)版本的構(gòu)建：
然后打開一個(gè)新的終端來啟動(dòng)開發(fā)服務(wù)：
接著就可以在我們的微應(yīng)用中使用該構(gòu)件了：
不過這個(gè)構(gòu)件還只是一個(gè)空殼，我們接下來完善它。假設(shè)我們的需求是做一個(gè)按鈕構(gòu)件，簡(jiǎn)單做下修改：
保存后，本地頁(yè)面將立即更新：
06 屬性
我們?cè)僮寴?gòu)件支持一個(gè)“按鈕類型”的屬性：
最后修改我們的應(yīng)用編排，設(shè)置一個(gè)按鈕類型：
07 事件
我們?cè)贋樗砑右粋€(gè)點(diǎn)擊事件：
最后修改我們的應(yīng)用編排，綁定一個(gè)按鈕事件：
點(diǎn)擊該按鈕，將彈出提示信息：
至此，我們完成了基本的構(gòu)件能力的開發(fā)。
