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

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 过去的一段时间里,高德地图App大前端团队一直在对前端低代码搭投技术进行探索,目前已经在客户端多个业务场景落地,充分验证了搭投技术支撑业务快速迭代的潜力。

导读

过去的一段时间里,高德地图App大前端团队一直在对前端低代码搭投技术进行探索,目前已经在客户端多个业务场景落地,充分验证了搭投技术支撑业务快速迭代的潜力。


在低代码的实践中,我们发现,除了前端可视化拖拽搭建技术,Serverless、智能化等技术都有助于低代码的业务落地。本文将介绍高德低代码系统架构以及一些新技术的应用方法。


image.png


1.背景

开始之前,先简单介绍下高德搭投的技术背景。


首先,高德地图客户端采用自研跨端框架进行前端开发,框架基于JS引擎实现移动端原生应用跨平台开发,具有动态化、高性能的特点。


另一方面,在实际业务开发中,客户端各业务线面临越来越重的推荐类卡片(或页面)需求。推荐类需求特点是重展示,轻交互,快速迭代。尤其对迭代速度要求非常强,很多卡片要不断微调以适应市场和业务需求。这对前端技术的动态能力提出了新的要求,也带来了不少问题:


image.pngimage.gif


为了解决这些问题,我们希望通过搭投技术提高推荐类业务的动态化能力并降低相应的开发成本。


2.可视化搭建

整套搭投系统,其实就是搭建+投放。其中搭建是系统的基石,搭建的本质是通过可视化操作维护一份JSON格式的DSL schema,该schema基于一套标准的协议可以描述搭建的产物。


在相关领域,阿里集团已有多年积累,有代表性的产品包括阿里云钉钉的宜搭系统和蚂蚁的云凤蝶系统。集团也沉淀了核心搭建引擎,低代码搭建协议等工具,我们团队也选择基于阿里统一搭建引擎进行搭建平台的建设。


针对高德客户端自研框架开发环境,团队开发了组件入料、样式模拟器、设置器定制、模板管理系统、客户端搭建渲染引擎等模块。


一期建设时,我们选择面向专业开发者进行搭建平台的建设,所以在搭建流程上非常类似前端开发的流程。前端可以在搭建画布上为元素修改样式,绑定事件,甚至手动编写页面生命周期。


image.pngimage.gif


在后期的实践中,我们发现明确搭建系统最终的用户群体是非常关键的。如果系统面向专业前端开发,那么搭建就必须做到比专业研发手写代码高效,这对引擎的性能提出了很高的要求。


如果系统面向产品运营及其他非专业前端,那么系统的易用性就必须提高到首位,不应该让一个运营同学研究什么是onClick,而应该先研发便捷的可拖拽组件让运营同学只需要随便绑定个数据就可以在搭建画布上看到想要的所有效果。


3.投放

不难看出如果仅有搭建,无法在客户端渲染搭建schema。一个强大的投放系统成为了随之而来的重大需求,我们也开始把重点从搭建这个单一维度上升到全链路能力的建设。


在没有投放系统时,客户端请求是一个标准的前中后端经典模式,目的在于获取服务数据。例如,高德地图App发送请求打到高德网关,网关负责请求下游庞大的数据服务,对请求进行数据聚合并返回结果。


image.gifimage.png


投放系统目的是把前端搭建的产物也聚合进服务请求,客户端在请求数据的同时也在请求前端模板。架构如下:


image.pngimage.gif


架构思路是面向API,以API为维度分发卡片。


搭建平台作为独立应用负责搭建。把搭建产物和一个客户端API绑定到一起后保存到服务域服务。服务应用再负责把卡片+API注册到高德网关。高德网关接到一个API请求后,会查看该API是否在投放在线服务与某些搭建schema绑定注册了。如果是,则在已有数据聚合逻辑中,把搭建schema聚合进返回结果对象中。


这套系统的优点是:


  • 高德网关继续以API维度收口管控所有端内流量;


  • 完美匹配当前的高德网关架构,开发成本低,稳定性强。


这套系统的问题是:


  • 高德网关仅覆盖高德客户端内业务,还不支持高德端外众多的H5运营活动。


4.Serverless技术在低代码的应用

虽然系统成功落地并表现出了坚如磐石的稳定性,但我们不满足于此。为了支持更丰富的业务场景,我们决定对系统架构做优化升级。


彼时,Node.js  Serverless技术逐渐进入了我们的视野。Node.js  Serverless的目标之一就是解决重数据逻辑的编排问题,让前端业务有机会对数据进行业务处理。这正是投放服务亟需补充的能力,如果可以通过一个统一的FaaS函数做搭建投放,就可以对接各路数据源,自研框架和H5同时支持的需求也可以满足了。


所以,我们决定在全套链路中加入一层FaaS函数,也从那时起我们为高德搭投平台起名为Amap Lowcode。


image.pngimage.gif


通过一层FaaS函数,投放既可以成为原有链路的下游服务,也可以直接为H5运营活动提供前端页面。在应用Serverless的技术中,我们总结出两大收益:


  • 自动扩容伸缩保障了该前端服务在十一峰值流量时的稳定性;


  • 无人值守运维为函数的维护节约了大量成本,函数发布上线调试监控一步到位,非常便捷。


这套架构的缺点是:

  • 链路较长,业务研发上手难度较大


5.智能化技术在低代码的应用

随着业务的大规模接入,我们收到了大量关于链路复杂、上手难度大的反馈。我们也在思考如何通过技术手段提供便捷的搭建体验。智能化技术由此进入了我们的视野。我们与高德设计师团队、阿里集团智能化团队深度合作,率先在搭建平台落地了智能D2C能力。


具体操作步骤主要分两大部分。设计师在设计稿阶段通过设计插件的辅助可以智能标注所设计区块的组件名称,并生成一个集成了相关数据的数字化设计稿。


image.gifimage.png


开发人员拿到设计稿后,可以选择一键跳转到Lowcode搭建平台。进入平台后,样式布局自动生成,直接省掉大部分设计稿还原时间。(下图中的搭建内容全部为自动生成)


image.gifimage.png



随后,经过数据编排,FaaS投放等环节,就是我们在高德地图首屏上滑后看到的场景推荐卡片。

image.png

image.gif


另外,我们还研发了schema to code功能。如果一个前端业务还不能应用搭投的投放链路,也可以选择在搭建阶段一键导出代码。


由此一来,任何前端研发都可以通过智能化提高自己的开发效率。


智能化技术的加入,直接为低代码平台打开了想象力的大门。本着为业务方提供便捷体验的原则,我们还相继拓展出了智能预览功能标准投放位容器


智能预览可以根据设计稿的数据源智能选择预览上下文和环境,帮助业务方在实际页面效果中预览搭建产物效果。


标准投放位容器可以让业务方仅输入一个唯一id及少量配置信息就自动承接投放功能,一些业务在接入后,无需再开发客户端代码就可以完成客户端迭代。


6.总结

高德Lowcode平台共有四大特性:从第一天起,它就具备了面向toC客户端的特性;在Serverless技术的帮助下,高德Lowcode平台具备了同时支持自研框架和H5的双技术栈能力特性;为了支撑运营活动同学的H5搭建,在搭建环节研发了简易版搭建流程,平台具备同时面向专业研发和运营活动同学的特性;最后,设计稿一键转化D2C等功能为平台带来了智能化的特性。


以上这些特性使得高德Lowcode平台可以在同业中处于领先水平。最后,附送整套智能化搭投系统大图:


image.pngimage.gif


期待与读者们一起交流低代码领域的相关经验和感想。如果你同样对低代码技术抱有热忱,更欢迎你加入我们的团队一同前进。我们团队业务上负责驾车导航等高德地图App核心场景,技术上在多个前端方向均有成果落地。感兴趣的同学请发送简历到 gdtech@alibaba-inc.com,邮件主题为:姓名-技术方向-来自高德技术。

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


你可能还想看:

八个维度对低代码能力度量模型的思考

玩转新技术栈!高德大前端演进历程(视频)


相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
13天前
|
人工智能 数据可视化 数据处理
从拖拽到架构:低代码如何兼顾速度、灵活性与可控边界
在敏捷开发背景下,低代码技术已从工具层面演进为架构级交付要素,重构IT治理与系统边界管理。它推动开发职能在专业开发者、业务人员与运维管理者之间重新分配,带来灵活性的同时也引发架构平衡、系统可维护性与治理统一等挑战。唯有在清晰架构与治理规则下,低代码才能真正成为敏捷开发的助推器,而非技术债务来源。本文深入探讨低代码在可视化工作流、模型驱动开发、数据处理、AI融合、插件生态、开放架构与企业功能等方面的技术实现与业务价值。
从拖拽到架构:低代码如何兼顾速度、灵活性与可控边界
|
8天前
|
数据采集 运维 数据可视化
AR 运维系统与 MES、EMA、IoT 系统的融合架构与实践
AR运维系统融合IoT、EMA、MES数据,构建“感知-分析-决策-执行”闭环。通过AR终端实现设备数据可视化,实时呈现温度、工单等信息,提升运维效率与生产可靠性。(238字)
|
22天前
|
数据采集 存储 运维
MyEMS:技术架构深度剖析与用户实践支持体系
MyEMS 是一款开源能源管理系统,采用分层架构设计,涵盖数据采集、传输、处理与应用全流程,支持多协议设备接入与多样化能源场景。系统具备高扩展性与易用性,结合完善的文档、社区、培训与定制服务,助力不同技术背景用户高效实现能源数字化管理,降低使用门槛与运维成本,广泛适用于工业、商业及公共机构等场景。
48 0
|
13天前
|
消息中间件 缓存 监控
中间件架构设计与实践:构建高性能分布式系统的核心基石
摘要 本文系统探讨了中间件技术及其在分布式系统中的核心价值。作者首先定义了中间件作为连接系统组件的"神经网络",强调其在数据传输、系统稳定性和扩展性中的关键作用。随后详细分类了中间件体系,包括通信中间件(如RabbitMQ/Kafka)、数据中间件(如Redis/MyCAT)等类型。文章重点剖析了消息中间件的实现机制,通过Spring Boot代码示例展示了消息生产者的完整实现,涵盖消息ID生成、持久化、批量发送及重试机制等关键技术点。最后,作者指出中间件架构设计对系统性能的决定性影响,
|
28天前
|
数据可视化 数据处理 数据库
从技术架构到经济价值:低代码在企业开发中的成本节约潜力
在企业数字化转型中,如何兼顾系统稳定性、扩展性与开发效率,成为关键挑战。低代码平台通过组件化设计、模型驱动开发与自动化运维等技术,实现高效开发与低成本维护,助力企业快速响应业务需求。
|
28天前
|
前端开发 Java 开发者
MVC 架构模式技术详解与实践
本文档旨在全面解析软件工程中经典且至关重要的 MVC(Model-View-Controller) 架构模式。内容将深入探讨 MVC 的核心思想、三大组件的职责与交互关系、其优势与劣势,并重点分析其在现代 Web 开发中的具体实现,特别是以 Spring MVC 框架为例,详解其请求处理流程、核心组件及基本开发实践。通过本文档,读者将能够深刻理解 MVC 的设计哲学,并掌握基于该模式进行 Web 应用开发的能力。
177 1
|
2月前
|
存储 自然语言处理 前端开发
百亿级知识库解决方案:从零带你构建高并发RAG架构(附实践代码)
本文详解构建高效RAG系统的关键技术,涵盖基础架构、高级查询转换、智能路由、索引优化、噪声控制与端到端评估,助你打造稳定、精准的检索增强生成系统。
263 2
|
边缘计算 Kubernetes 物联网
Kubernetes 赋能边缘计算:架构解析、挑战突破与实践方案
在物联网和工业互联网快速发展的背景下,边缘计算凭借就近处理数据的优势,成为解决云计算延迟高、带宽成本高的关键技术。而 Kubernetes 凭借统一管理、容器化适配和强大生态扩展性,正逐步成为边缘计算的核心编排平台。本文系统解析 Kubernetes 适配边缘环境的架构分层、核心挑战与新兴解决方案,为企业落地边缘项目提供实践参考。
83 0
|
10月前
|
弹性计算 API 持续交付
后端服务架构的微服务化转型
本文旨在探讨后端服务从单体架构向微服务架构转型的过程,分析微服务架构的优势和面临的挑战。文章首先介绍单体架构的局限性,然后详细阐述微服务架构的核心概念及其在现代软件开发中的应用。通过对比两种架构,指出微服务化转型的必要性和实施策略。最后,讨论了微服务架构实施过程中可能遇到的问题及解决方案。
|
11月前
|
Cloud Native Devops 云计算
云计算的未来:云原生架构与微服务的革命####
【10月更文挑战第21天】 随着企业数字化转型的加速,云原生技术正迅速成为IT行业的新宠。本文深入探讨了云原生架构的核心理念、关键技术如容器化和微服务的优势,以及如何通过这些技术实现高效、灵活且可扩展的现代应用开发。我们将揭示云原生如何重塑软件开发流程,提升业务敏捷性,并探索其对企业IT架构的深远影响。 ####
253 3

热门文章

最新文章