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

​導讀

過去的一段時間裏，高德地圖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核心場景，技術上在多個前端方向均有成果落地。感興趣的同窗請發送簡歷到 gdtech@alibaba-inc.com，郵件主題爲：姓名-技術方向-來自高德技術。

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