導讀
過去的一段時間裏，高德地圖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]，郵件主題爲：姓名-技術方向-來自高德技術。
我們還在路上，未來會更加努力，讓出行更美好。
