高德客戶端低程式碼系統架構實踐

導讀

過去的一段時間裡，高德地圖App大前端團隊一直在對 前端低程式碼搭投技術進行探索，目前已經在客戶端多個業務場景落地，充分驗證了搭投技術支撐業務快速迭代的潛力。

在低程式碼的實踐中，我們發現，除了前端視覺化拖拽搭建技術，Serverless、智慧化等技術都有助於低程式碼的業務落地。本文將介紹高德低程式碼系統架構以及一些新技術的應用方法。

1.背景

開始之前，先簡單介紹下高德搭投的技術背景。

首先，高德地圖客戶端採用自研跨端框架進行前端開發，框架基於JS引擎實現移動端原生應用跨平臺開發，具有動態化、高效能的特點。

另一方面，在實際業務開發中，客戶端各業務線面臨越來越重的推薦類卡片（或頁面）需求。推薦類需求特點是重展示，輕互動，快速迭代。尤其對迭代速度要求非常強，很多卡片要不斷微調以適應市場和業務需求。這對前端技術的動態能力提出了新的要求，也帶來了不少問題：

為了解決這些問題，我們希望透過搭投技術提高推薦類業務的動態化能力並降低相應的開發成本。

2.視覺化搭建

整套搭投系統，其實就是搭建+投放。其中搭建是系統的基石，搭建的本質是透過視覺化操作維護一份JSON格式的DSL schema，該schema基於一套標準的協議可以描述搭建的產物。

在相關領域，阿里集團已有多年積累，有代表性的產品包括阿里雲釘釘的宜搭系統和螞蟻的雲鳳蝶系統。集團也沉澱了核心搭建引擎，低程式碼搭建協議等工具，我們團隊也選擇基於阿里統一搭建引擎進行搭建平臺的建設。

針對高德客戶端自研框架開發環境，團隊開發了元件入料、樣式模擬器、設定器定製、模板管理系統、客戶端搭建渲染引擎等模組。

一期建設時，我們選擇面向專業開發者進行搭建平臺的建設，所以在搭建流程上非常類似前端開發的流程。前端可以在搭建畫布上為元素修改樣式，繫結事件，甚至手動編寫頁面生命週期。

在後期的實踐中，我們發現明確搭建系統最終的使用者群體是非常關鍵的。如果系統面向專業前端開發，那麼搭建就必須做到比專業研發手寫程式碼高效，這對引擎的效能提出了很高的要求。

如果系統面向產品運營及其他非專業前端，那麼系統的易用性就必須提高到首位，不應該讓一個運營同學研究什麼是onClick，而應該先研發便捷的可拖拽元件讓運營同學只需要隨便繫結個資料就可以在搭建畫布上看到想要的所有效果。

3.投放

不難看出如果僅有搭建，無法在客戶端渲染搭建schema。一個強大的投放系統成為了隨之而來的重大需求，我們也開始把重點從搭建這個單一維度上升到全鏈路能力的建設。

在沒有投放系統時，客戶端請求是一個標準的前中後端經典模式，目的在於獲取服務資料。例如，高德地圖App傳送請求打到高德閘道器，閘道器負責請求下游龐大的資料服務，對請求進行資料聚合並返回結果。

投放系統目的是把前端搭建的產物也聚合進服務請求，客戶端在請求資料的同時也在請求前端模板。架構如下：

架構思路是面向API，以API為維度分發卡片。

搭建平臺作為獨立應用負責搭建。把搭建產物和一個客戶端API繫結到一起後儲存到服務域服務。服務應用再負責把卡片+API註冊到高德閘道器。高德閘道器接到一個API請求後，會檢視該API是否在投放線上服務與某些搭建schema繫結註冊了。如果是，則在已有資料聚合邏輯中，把搭建schema聚合進返回結果物件中。

這套系統的優點是：

• 高德閘道器繼續以API維度收口管控所有端內流量；
• 完美匹配當前的高德閘道器架構，開發成本低,穩定性強。

這套系統的問題是：

• 高德閘道器僅覆蓋高德客戶端內業務，還不支援高德端外眾多的H5運營活動。

4.Serverless技術在低程式碼的應用

雖然系統成功落地並表現出了堅如磐石的穩定性，但我們不滿足於此。為了支援更豐富的業務場景，我們決定對系統架構做最佳化升級。

彼時，Node.js Serverless技術逐漸進入了我們的視野。Node.js Serverless的目標之一就是解決重資料邏輯的編排問題，讓前端業務有機會對資料進行業務處理。這正是投放服務亟需補充的能力，如果可以透過一個統一的FaaS函式做搭建投放，就可以對接各路資料來源，自研框架和H5同時支援的需求也可以滿足了。

所以，我們決定在全套鏈路中加入一層FaaS函式，也從那時起我們為高德搭投平臺起名為Amap Lowcode。

透過一層FaaS函式，投放既可以成為原有鏈路的下游服務，也可以直接為H5運營活動提供前端頁面。在應用Serverless的技術中，我們總結出兩大收益：

• 自動擴容伸縮保障了該前端服務在十一峰值流量時的穩定性；
• 無人值守運維為函式的維護節約了大量成本，函式釋出上線除錯監控一步到位，非常便捷。

這套架構的缺點是：

• 鏈路較長，業務研發上手難度較大

5.智慧化技術在低程式碼的應用

隨著業務的大規模接入，我們收到了大量關於鏈路複雜、上手難度大的反饋。我們也在思考如何透過技術手段提供便捷的搭建體驗。智慧化技術由此進入了我們的視野。我們與高德設計師團隊、阿里集團智慧化團隊深度合作，率先在搭建平臺落地了智慧D2C能力。

具體操作步驟主要分兩大部分。設計師在設計稿階段透過設計外掛的輔助可以智慧標註所設計區塊的元件名稱，並生成一個整合了相關資料的數字化設計稿。

開發人員拿到設計稿後，可以選擇一鍵跳轉到Lowcode搭建平臺。進入平臺後，樣式佈局自動生成，直接省掉大部分設計稿還原時間。（下圖中的搭建內容全部為自動生成）

隨後，經過資料編排，FaaS投放等環節，就是我們在高德地圖首屏上滑後看到的場景推薦卡片。

另外，我們還研發了schema to code功能。如果一個前端業務還不能應用搭投的投放鏈路，也可以選擇在搭建階段一鍵匯出程式碼。

由此一來，任何前端研發都可以透過智慧化提高自己的開發效率。

智慧化技術的加入，直接為低程式碼平臺開啟了想象力的大門。本著為業務方提供便捷體驗的原則，我們還相繼擴充出了 智慧預覽功能和 標準投放位容器。

智慧預覽可以根據設計稿的資料來源智慧選擇預覽上下文和環境，幫助業務方在實際頁面效果中預覽搭建產物效果。

標準投放位容器可以讓業務方僅輸入一個唯一id及少量配置資訊就自動承接投放功能，一些業務在接入後，無需再開發客戶端程式碼就可以完成客戶端迭代。

6.總結

高德Lowcode平臺共有四大特性：從第一天起，它就具備了面向toC客戶端的特性；在Serverless技術的幫助下，高德Lowcode平臺具備了同時支援自研框架和H5的雙技術棧能力特性；為了支撐運營活動同學的H5搭建，在搭建環節研發了簡易版搭建流程，平臺具備同時面向專業研發和運營活動同學的特性；最後，設計稿一鍵轉化D2C等功能為平臺帶來了智慧化的特性。

以上這些特性使得高德Lowcode平臺可以在同業中處於領先水平。最後，附送整套智慧化搭投系統大圖：

期待與讀者們一起交流低程式碼領域的相關經驗和感想。如果你同樣對低程式碼技術抱有熱忱，更歡迎你加入我們的團隊一同前進。我們團隊業務上負責駕車導航等高德地圖App核心場景，技術上在多個前端方向均有成果落地。感興趣的同學請傳送簡歷到  ，郵件主題為：姓名-技術方向-來自高德技術。

我們還在路上，未來會更加努力，讓出行更美好。