導讀

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

在低代碼的實踐中，我們發(fā)現(xiàn)，除了前端可視化拖拽搭建技術(shù)，Serverless、智能化等技術(shù)都有助于低代碼的業(yè)務落地。本文將介紹高德低代碼系統(tǒng)架構(gòu)以及一些新技術(shù)的應用方法。

1.背景

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

首先，高德地圖客戶端采用自研跨端框架進行前端開發(fā)，框架基于JS引擎實現(xiàn)移動端原生應用跨平臺開發(fā)，具有動態(tài)化、高性能的特點。

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

為了解決這些問題，我們希望通過搭投技術(shù)提高推薦類業(yè)務的動態(tài)化能力并降低相應的開發(fā)成本。

2.可視化搭建

整套搭投系統(tǒng)，其實就是搭建 投放。其中搭建是系統(tǒng)的基石，搭建的本質(zhì)是通過可視化操作維護一份JSON格式的DSL schema，該schema基于一套標準的協(xié)議可以描述搭建的產(chǎn)物。

在相關(guān)領(lǐng)域，阿里集團已有多年積累，有代表性的產(chǎn)品包括阿里云釘釘?shù)囊舜钕到y(tǒng)和螞蟻的云鳳蝶系統(tǒng)。集團也沉淀了核心搭建引擎，低代碼搭建協(xié)議等工具，我們團隊也選擇基于阿里統(tǒng)一搭建引擎進行搭建平臺的建設(shè)。

針對高德客戶端自研框架開發(fā)環(huán)境，團隊開發(fā)了組件入料、樣式模擬器、設(shè)置器定制、模板管理系統(tǒng)、客戶端搭建渲染引擎等模塊。

一期建設(shè)時，我們選擇面向?qū)I(yè)開發(fā)者進行搭建平臺的建設(shè)，所以在搭建流程上非常類似前端開發(fā)的流程。前端可以在搭建畫布上為元素修改樣式，綁定事件，甚至手動編寫頁面生命周期。

在后期的實踐中，我們發(fā)現(xiàn)明確搭建系統(tǒng)最終的用戶群體是非常關(guān)鍵的。如果系統(tǒng)面向?qū)I(yè)前端開發(fā)，那么搭建就必須做到比專業(yè)研發(fā)手寫代碼高效，這對引擎的性能提出了很高的要求。

如果系統(tǒng)面向產(chǎn)品運營及其他非專業(yè)前端，那么系統(tǒng)的易用性就必須提高到首位，不應該讓一個運營同學研究什么是onClick，而應該先研發(fā)便捷的可拖拽組件讓運營同學只需要隨便綁定個數(shù)據(jù)就可以在搭建畫布上看到想要的所有效果。

3.投放

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

在沒有投放系統(tǒng)時，客戶端請求是一個標準的前中后端經(jīng)典模式，目的在于獲取服務數(shù)據(jù)。例如，高德地圖App發(fā)送請求打到高德網(wǎng)關(guān)，網(wǎng)關(guān)負責請求下游龐大的數(shù)據(jù)服務，對請求進行數(shù)據(jù)聚合并返回結(jié)果。

投放系統(tǒng)目的是把前端搭建的產(chǎn)物也聚合進服務請求，客戶端在請求數(shù)據(jù)的同時也在請求前端模板。架構(gòu)如下：

架構(gòu)思路是面向API，以API為維度分發(fā)卡片。

搭建平臺作為獨立應用負責搭建。把搭建產(chǎn)物和一個客戶端API綁定到一起后保存到服務域服務。服務應用再負責把卡片 API注冊到高德網(wǎng)關(guān)。高德網(wǎng)關(guān)接到一個API請求后，會查看該API是否在投放在線服務與某些搭建schema綁定注冊了。如果是，則在已有數(shù)據(jù)聚合邏輯中，把搭建schema聚合進返回結(jié)果對象中。

這套系統(tǒng)的優(yōu)點是：

• 高德網(wǎng)關(guān)繼續(xù)以API維度收口管控所有端內(nèi)流量；
  
• 完美匹配當前的高德網(wǎng)關(guān)架構(gòu)，開發(fā)成本低,穩(wěn)定性強。

這套系統(tǒng)的問題是：

• 高德網(wǎng)關(guān)僅覆蓋高德客戶端內(nèi)業(yè)務，還不支持高德端外眾多的H5運營活動。

4.Serverless技術(shù)在低代碼的應用

雖然系統(tǒng)成功落地并表現(xiàn)出了堅如磐石的穩(wěn)定性，但我們不滿足于此。為了支持更豐富的業(yè)務場景，我們決定對系統(tǒng)架構(gòu)做優(yōu)化升級。

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

所以，我們決定在全套鏈路中加入一層FaaS函數(shù)，也從那時起我們?yōu)楦叩麓钔镀脚_起名為Amap Lowcode。

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

• 自動擴容伸縮保障了該前端服務在十一峰值流量時的穩(wěn)定性；
  
• 無人值守運維為函數(shù)的維護節(jié)約了大量成本，函數(shù)發(fā)布上線調(diào)試監(jiān)控一步到位，非常便捷。

這套架構(gòu)的缺點是：

• 鏈路較長，業(yè)務研發(fā)上手難度較大

5.智能化技術(shù)在低代碼的應用

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

具體操作步驟主要分兩大部分。設(shè)計師在設(shè)計稿階段通過設(shè)計插件的輔助可以智能標注所設(shè)計區(qū)塊的組件名稱，并生成一個集成了相關(guān)數(shù)據(jù)的數(shù)字化設(shè)計稿。

開發(fā)人員拿到設(shè)計稿后，可以選擇一鍵跳轉(zhuǎn)到Lowcode搭建平臺。進入平臺后，樣式布局自動生成，直接省掉大部分設(shè)計稿還原時間。（下圖中的搭建內(nèi)容全部為自動生成）

隨后，經(jīng)過數(shù)據(jù)編排，F(xiàn)aaS投放等環(huán)節(jié)，就是我們在高德地圖首屏上滑后看到的場景推薦卡片。

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

由此一來，任何前端研發(fā)都可以通過智能化提高自己的開發(fā)效率。

智能化技術(shù)的加入，直接為低代碼平臺打開了想象力的大門。本著為業(yè)務方提供便捷體驗的原則，我們還相繼拓展出了智能預覽功能和標準投放位容器。

智能預覽可以根據(jù)設(shè)計稿的數(shù)據(jù)源智能選擇預覽上下文和環(huán)境，幫助業(yè)務方在實際頁面效果中預覽搭建產(chǎn)物效果。

標準投放位容器可以讓業(yè)務方僅輸入一個唯一id及少量配置信息就自動承接投放功能，一些業(yè)務在接入后，無需再開發(fā)客戶端代碼就可以完成客戶端迭代。

6.總結(jié)

高德Lowcode平臺共有四大特性：從第一天起，它就具備了面向toC客戶端的特性；在Serverless技術(shù)的幫助下，高德Lowcode平臺具備了同時支持自研框架和H5的雙技術(shù)棧能力特性；為了支撐運營活動同學的H5搭建，在搭建環(huán)節(jié)研發(fā)了簡易版搭建流程，平臺具備同時面向?qū)I(yè)研發(fā)和運營活動同學的特性；最后，設(shè)計稿一鍵轉(zhuǎn)化D2C等功能為平臺帶來了智能化的特性。

以上這些特性使得高德Lowcode平臺可以在同業(yè)中處于領(lǐng)先水平。最后，附送整套智能化搭投系統(tǒng)大圖：

期待與讀者們一起交流低代碼領(lǐng)域的相關(guān)經(jīng)驗和感想。如果你同樣對低代碼技術(shù)抱有熱忱，更歡迎你加入我們的團隊一同前進。我們團隊業(yè)務上負責駕車導航等高德地圖App核心場景，技術(shù)上在多個前端方向均有成果落地。感興趣的同學請發(fā)送簡歷到 gdtech@alibaba-inc.com，郵件主題為：姓名-技術(shù)方向-來自高德技術(shù)。

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