共计 2902 个字符，预计需要花费 8 分钟才能阅读完成。
导读
过来的一段时间里，高德地图 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，邮件主题为：姓名 - 技术方向 - 来自高德技术。
咱们还在路上，将来会更加致力，让出行更美妙。