一、背景簡介

站長工作臺，致力于為京東物流所有站長、運營管理人員提供高效工作平臺，擁有多元化的業(yè)務形態(tài)。我們力求提升團隊研發(fā)效率、實現(xiàn)敏捷業(yè)務交付，以打造一支具備靈活性、高度協(xié)作和強適應能力的敏捷團隊。

二、提效案例描述

2.1、痛點分析

站長工作臺的報表頁面和任務卡片頁面，大多數(shù)的UI風格和交互方式一致，面對新業(yè)務訴求時，開發(fā)人員難以避免重復工作，從而導致團隊開發(fā)效率降低、代碼質(zhì)量難把控以及項目維護困難等諸多問題。

2.2、解決方案

根據(jù)業(yè)務場景，構(gòu)建一套低代碼工具鏈，涵蓋代碼編輯器、版本管理、解析器、能力編排等，提供可視化開發(fā)能力、預設組件、集成部署等功能。借助圖形化界面和組件，助力開發(fā)人員加速應用程序開發(fā)進程，迅速響應業(yè)務需求并及時交付。

三、案例實踐步驟

3.1、關(guān)鍵設計及實踐方式

低代碼工具鏈以表單驅(qū)動數(shù)據(jù)為核心，通過界面化的低成本交互方式加上少量的膠水代碼進行業(yè)務分析，滿足開發(fā)需求并提供高效、靈活和可維護的需求開發(fā)體驗。其主要架構(gòu)為自定義DSL、頁面編輯器、組件庫、屬性管理、渲染器、部署發(fā)布、物料管理等模塊。

各模塊的主要職責如下：

1.DSL：DSL作為低代碼工具鏈的核心，涵蓋組件描述協(xié)議、頁面描述協(xié)議及字段邏輯協(xié)議等，旨在實現(xiàn)對工具鏈的約束與擴展。在擴展物料過程中，需遵循相應的DSL規(guī)范；在預覽和發(fā)布階段，通過DSL生成JSON；同時，編輯器和解析器間亦依賴DSL進行通信。

2.頁面編輯器：頁面編輯器包含豐富的原子組件；通過可視化方式選擇組件或頁面模版，在畫板上進行頁面的編排，組合拼裝后將根據(jù)頁面包含的DOM元素、樣式、方法等信息，生成JSON格式的DSL。

3.屬性管理：屬性管理提供三種基本設置：樣式、數(shù)據(jù)綁定和觸發(fā)器與事件。樣式功能用于設置頁面或組件的外觀和行為；數(shù)據(jù)綁定功能可將頁面元素與數(shù)據(jù)模型中的字段進行綁定，以實現(xiàn)數(shù)據(jù)的顯示和操作；觸發(fā)器和事件設置則可綁定在特定條件下執(zhí)行的方法。

4.渲染器：工具鏈編輯器和渲染器秉持著數(shù)據(jù)驅(qū)動視圖的思想，根據(jù)DSL協(xié)議，遞歸解析存儲的JSON文件動態(tài)生成頁面。編輯頁面時能夠?qū)崟r模擬最新運行效果，用于及時調(diào)整配置以達到最貼合業(yè)務需求的水準。

5.部署發(fā)布：部署發(fā)布是將最終將生成的DSL存儲至OSS，并生成新頁面的URL地址，根據(jù)新頁面的地址能夠獲取DSL，經(jīng)解析器解析，通過按需加載頁面元素的方式向用戶展示。

6.物料管理：工具鏈提供物料管理功能，用于管理應用程序開發(fā)中使用的各種資源和組件，允許開發(fā)者跟蹤和管理不同版本的組件和應用程序，以確保團隊協(xié)作時的一致性和可追溯性。同時提供可重用的表單和模版，使開發(fā)者能快速創(chuàng)建數(shù)據(jù)輸入和報表顯示的界面。

低代碼工具鏈的整體目標是為了提效，所以在方案設計過程中我們也特別關(guān)注工具的易用性和可擴展性，同時也要保障不會因為工具鏈的引入，影響工作臺原本的高可用性。

3.1.1、核心功能

低代碼工具鏈的核心功能由一系列關(guān)鍵組件構(gòu)成，這些組件負責處理應用程序的設計、開發(fā)、部署和運行等各個環(huán)節(jié)，包括通信協(xié)議、可視化編輯器、數(shù)據(jù)模型、業(yè)務邏輯、渲染器、部署以及版本控制等功能。以下僅對關(guān)鍵模塊進行簡單介紹：

1.頁面描述協(xié)議DSL設計

我們選型了JSON作為頁面描述協(xié)議，而沒有使用看來起描述能力更強的XML，主要因為使用JSON作為頁面描述協(xié)議不僅有助于提高可讀性、靈活性、可擴展性，同時JSON實現(xiàn)了與JavaScript的天然集成和RESTful API的兼容性。這為開發(fā)者提供了更直觀、方便、跨平臺的開發(fā)體驗。頁面UI組件樹 JSON 可視為SchemaNodeTree，每個 SchemaNode 結(jié)構(gòu)針對組件屬性和事件分別進行處理。

1.可視化編輯器

從組件庫、信息集、功能到UI，提供了友好的可視化編輯器，不涉及代碼的編寫，集成了可供UI運轉(zhuǎn)的所有配置。開發(fā)者只需要簡單掌握相關(guān)概念，通過簡單操作就能快速搭建頁面。具體功能如下：

?組件庫：包括豐富的預設組件：如按鈕、表格、表單、業(yè)務卡片等，用戶可從組件庫中選擇適當?shù)慕M件制作頁面。

?實時預覽：本功能有助于迅速調(diào)整和優(yōu)化設計，達到所見即所得的效果。

?布局工具：支持布局工具，允許開發(fā)者配置頁面的結(jié)構(gòu)和排列方式，如網(wǎng)格布局。

?動態(tài)數(shù)據(jù)綁定：允許開發(fā)者通過簡單的配置將用戶界面元素與數(shù)據(jù)模型中的字段進行綁定，實現(xiàn)動態(tài)數(shù)據(jù)展示。

?事件觸發(fā)器：通過綁定事件，開發(fā)者能夠定義在用戶交互或瀏覽器事件發(fā)生時執(zhí)行的操作。如點擊、頁面初始化后、表單提交、分頁切換等事件。

?版本管理：記錄和管理設計的歷史版本，允許開發(fā)者回溯到之前的設計狀態(tài)，有助于追蹤和恢復變更。

在DSL的約束下，首先，我們將建立一個組件構(gòu)造映射表，專門用于存放組件名稱及其對應的構(gòu)造方法。其次，我們實現(xiàn)了一個構(gòu)建引擎，核心功能是讀取由DSL轉(zhuǎn)換而來的ComponentNode，然后采用遞歸深度遍歷的方式，持續(xù)讀取ComponentNode及其子節(jié)點，以獲取相應組件的構(gòu)造方法，進而將ComponentNode構(gòu)建為VueNode。最后，為減少功能代碼的重復，并便于未來擴展，我們采用了切面設計方案，將處理流程中的部分環(huán)節(jié)納入切面，從而實現(xiàn)靈活處理的目標，同時便于外部調(diào)用者進行定制開發(fā)。

1.數(shù)據(jù)引擎

數(shù)據(jù)引擎創(chuàng)建元數(shù)據(jù)模型，賦予業(yè)務編排能力，運用抽象流程節(jié)點，實現(xiàn)自定義任務、觸發(fā)規(guī)則及閉環(huán)規(guī)則。研發(fā)團隊可持續(xù)擴展微流程節(jié)點，以滿足多樣化業(yè)務場景需求。

1.渲染器設計

低代碼工具鏈中的渲染器是一個關(guān)鍵的組件，負責將可視化編輯器中定義的組件、布局和樣式信息轉(zhuǎn)換為實際的UI元素；其提供的實時渲染功能，使開發(fā)者在編輯器中得到即時反饋；動態(tài)數(shù)據(jù)綁定，確保渲染的UI元素能夠與應用程序的數(shù)據(jù)模型同步更新。

在底層，我們實現(xiàn)了一個組件池，由統(tǒng)一的ComponentManager負責全局管理。其上是擴展層，對應各個組件的實現(xiàn)。例如，Parsers負責將 SchemaNode 解析為相應組件，并賦予組件個性化能力；Validators實現(xiàn)了驗證邏輯；Actions負責處理事件，我們封裝了諸如獲取參數(shù)、調(diào)用接口、數(shù)據(jù)設置等能力。最上層提供對外接口，負責呈現(xiàn)整個引擎的渲染結(jié)果。

3.1.2、容災方案

對于非低代碼模塊，前端頁面由瀏覽器加載代碼資源進行渲染和框架構(gòu)建，通過異步調(diào)用各種遠程接口來加載數(shù)據(jù)。在這種情況下，我們只需關(guān)注代碼質(zhì)量，確保即使請求無數(shù)據(jù)，頁面結(jié)構(gòu)也能正常渲染。從用戶的角度來看，系統(tǒng)始終可用，而不會出現(xiàn)白屏等故障。

當使用工具鏈生成前端頁面后，頁面主體描述邏輯由瀏覽器加載代碼資源轉(zhuǎn)移到遠端存儲OSS上。為此，我們重點考慮了OSS故障的場景。整體的處理邏輯如下：

在頁面制作和發(fā)布過程中，我們會將數(shù)據(jù)雙寫入OSS，生成兩個不同的文件地址A和B。在使用OSS時，我們會優(yōu)先選擇地址A。當A出現(xiàn)故障時，系統(tǒng)將切換到地址B，并繼續(xù)使用B，雙寫地址間的切換。只要A和B不同時出現(xiàn)故障，整個系統(tǒng)的可用性就能得到很好的保障。

3.1.3、接入方式

對接工程能力：引入依賴，僅需四行代碼即可實現(xiàn)站長工作臺引入依賴文件

import pageBuilder from '@xxx/page-builder'import '@xxxx/page-builder/page-builder/page-builder.css'Vue.use(pageBuilder, { registerComponents: { AreaCondition: NewAreaCondition } });

<page-builder :url="'http://test.xxxxx.com/name/jsonName.json'"></page-builder>

3.2、平臺使用展示

（脫敏后，內(nèi)部系統(tǒng)頁面暫不展示，僅闡述流程）

3.2.1、頁面制作

編排頁面基礎結(jié)構(gòu) ->進行頁面基礎配置 ->頁面元素事件定義 ->頁面元素綁定事件

3.2.2、頁面發(fā)布

頁面預覽制作出來的頁面，確認效果符合預期 ->一鍵頁面發(fā)布，并獲取訪問該頁面的URL地址

3.2.3、任務引擎發(fā)布

創(chuàng)建任務 -> 配置任務觸發(fā)規(guī)則、閉環(huán)規(guī)則 ->生成任務

3.3、實踐亮點

四、提效達成效果

4.1、效能提升

工具鏈于2023年7月投入使用，自投入使用以來，本部門的需求交付周期得到了顯著改善，自5月到9月以來，需求的全周期交付指標從21.06天縮短至14.71天。同時，需求吞吐量也實現(xiàn)了大幅度提升，除去618封板期間的特殊變化，月均吞吐量從245個增至275個。

4.2、人效提升

在Q3季度，我們利用站長工作臺的前端低代碼工具，高效完成了7個報表類需求和5個任務卡片類需求的開發(fā)。報表和卡片的開發(fā)時間從2天降至4小時，工作臺新增的待辦任務類型需求交付周期從7天大幅縮短至2.5天。

同時后臺數(shù)據(jù)引擎的使用，高效完成了11個業(yè)務需求的開發(fā)，平均每個需求最多可節(jié)省0.5-3人/日的開發(fā)時間，進一步提高了研發(fā)效率，以達成需求吞吐量提升和敏捷交付業(yè)務需求的期望。

4.3、影響力

4.3.1、使用推廣效果

工具鏈投入使用后，在物流側(cè)進行分享，目前已用于三個敏捷團隊，后續(xù)推廣動作正在籌備中?，F(xiàn)已承接需求23個。

4.3.2、技術(shù)分享推廣

1、收錄于京東物流技術(shù)月報

2、于物流前端通道進行精品課分享

五、總結(jié)及后續(xù)規(guī)劃

低代碼工具鏈以"特定領域場景Low Code -> 映射和建模 -> 可視化搭建系統(tǒng)"為核心鏈路，不斷標準化開發(fā)流程，為團隊提高了整體研發(fā)效率，并實現(xiàn)了業(yè)務需求的快速交付。使團隊的敏捷交付能力躍升至一個全新的高度。

后續(xù)規(guī)劃：

技術(shù)能力

?前端低代碼和后端低代碼實現(xiàn)無縫銜接，進一步提升頁面開發(fā)效率

?實現(xiàn)組件間優(yōu)雅地互聯(lián)互通，打通和其它平臺的連通性，敏捷實現(xiàn)復雜頁面的構(gòu)建

?打造組件生態(tài)，支持外部研發(fā)進行組件擴展

團隊交付

?從通用報表頁和任務卡片頁的低代碼生成中汲取經(jīng)驗。轉(zhuǎn)變?yōu)橥ㄓ么a生成平臺，服務于物流領域所有前端研發(fā)人員

?改變產(chǎn)研協(xié)作模式，從需求交付型走向持續(xù)創(chuàng)作型

?提升團隊的需求交付能力，達到新的高度，為業(yè)務發(fā)展賦予新的能量

作者：京東物流 郭長沙

來源：京東云開發(fā)者社區(qū) 自猿其說 Tech 轉(zhuǎn)載請注明來源