導(dǎo)讀

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

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

1.背景

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

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

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

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

2.可視化搭建

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

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

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

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

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

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

3.投放

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

隨后，經(jīng)過數(shù)據(jù)編排，F(xiàn)aaS投放等環(huán)節(jié)，就是我們?cè)诟叩碌貓D首屏上滑后看到的場(chǎng)景推薦卡片。

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

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

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

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

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

6.總結(jié)

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

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

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

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