高德用戶端低代碼系統架構實踐

​導讀

過去的一段時間裡，高德地圖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核心場景，技術上在多個前端方向均有成果落地。感興趣的同學請發送履歷到 [email protected]，郵件主題為：姓名-技術方向-來自高德技術。

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