高德客户端低代码系统架构实践

​导读

过去的一段时间里，高德地图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]，邮件主题为：姓名-技术方向-来自高德技术。

我们还在路上，未来会更加努力，让出行更美好。