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

​导读

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

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