滴滴开源轻量级跨端开发框架:Hummer

2024-03-12 07:10

本文主要是介绍滴滴开源轻量级跨端开发框架:Hummer,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

桔妹导读:Hummer 是滴滴普惠泛前端团队和滴滴R-Lab泛前端团队联合打造的超轻量级动态化跨端开发框架,目前已在滴滴内部多个业务线完成了大规模落地。本篇我们将从业务背景和技术优势对Hummer进行整体介绍。

历时两年的深度打磨,滴滴普惠泛前端团队和滴滴 R-Lab 泛前端团队联合打造的超轻量级动态化跨端开发框架 —— Hummer,终于开源啦。

它由极具精简的 Hummer Core 和高可扩展的 Tenon Reactive Framework 组成。目前该方案已在滴滴聚合收银台、代驾司机端、代驾乘客端、跑腿骑手端、跑腿商户端、货运司机端、货主端、两轮车、外卖等集团内多个业务线中进行了大规模落地并稳定运行。

1. 

业务背景

过去两年随着业务多品类、多场景的快速拓展,对研发团队的吞吐能力提出了更高的要求。如何在保持团队整体规模不变的前提下更高效地支撑业务的快速发展,成为了团队的首要考量,而跨端开发则成为了我们的首要选择。在调研了业界众多跨端方案之后,发现在包体积控制、整体稳定性,以及上手成本等方面,都无法很好地满足我们的需求。在此背景下,普惠泛前端团队和 R-Lab 泛前端团队进行了深入地合作,于 2018 年年底发起了 Hummer 跨端技术项目,旨在以较低成本的投入,产出一款具有高生产效率的动态化跨端开发框架,有效整合团队内部前端和终端开发资源,真正提升团队整体的开发效率。

2. 

技术优势

正如 Hummer(蜂鸟)的名字一样,具有小巧轻盈的体态,迅猛强健的翅膀,以及色彩艳丽的外表。

  • 超轻量:小于 1M 的编译产物,能以极低的包体积成本接入到 App 中,打造极致轻量优势;

  • 易上手:Hummer API + Tenon Reactive Framework,兼顾客户端和前端的开发体验,造就极低的学习门槛;

  • 高可用:已在滴滴内部多个业务中得到完整验证,整体 Crash 率低于 0.01%;

  • 高性能:基于原生组件和模块,可以最大化利用原生渲染的性能优势以及平台能力;

  • 跨平台:一套代码可以编译并运行于 iOS 和 Android 平台,使用 Tenon 可以快速兼容基于Vue 开发的 Web 应用;

  • 动态化:利用 JavaScript(以下简称JS)解释执行的特性,可以快速部署动态页面,配合Hummer Nest 平台可以实现云端发布;

 简单演示

为了让大家对 Hummer 有一个直观的了解,先来感受一下分别使用 Hummer API 和 Tenon 开发的 HelloWorld 页面对应的代码。

demo代码及效果展示图

如上图所示,Hummer 同时支持偏向原生开发体验的 Hummer API 开发模式和偏向前端开发体验的 Tenon(兼容 Vue)开发模式,在不久的将来,我们还将支持更多开发框架,如 React、Angular等。

3. 

技术架构和跨端体系

Hummer 以 JS 引擎为基石,在保持对 JS 引擎最少特性依赖的前提下,实现了类似 React Native 的 Fabric 引擎直通架构,使原生对象和JS对象能够相互调动,实现了同步视图渲染,使其充分利用原生渲染的性能优势(目前已支持 JavaScriptCore、V8、Hermers、QuickJS 等业内知名 JS 引擎)。同时,通过组件自渲染能力,几乎完美控制视图渲染的每一个细节,再配合经过调优的 Yoga 布局引擎,抹平了两端视图布局差异,使两端视图保持了高度一致(性能更佳的自研布局引擎开发中)。

如下图所示,我们抛弃了业界其他跨端框架普遍采用的 DSL+VDOM 的技术实现,以换取接近原生的开发体验和性能。但同时,我们也提供了具有响应式开发能力的 Tenon Framework,完全兼容 Vue 3.0 开发框架,紧贴 W3C 标准,遵从网页开发各项规则,可以轻松移植 Web 组件,拥抱 Web 生态(Tenon for React 开发中)。 

除此之外,我们还提供了完善的工具套件和一站式发布管理平台—— Hummer Nest。轻松实现 Hummer 应用的持续集成和交付,并实现对发布版本进行线上跟踪,统计版本覆盖率和激活率等。平台还具有线上崩溃信息的上报和报警能力,能够轻松进行应用质量管控,提升应用稳定性。

Hummer技术架构图

 案例展示

目前 Hummer 已在聚合收银SDK、代驾司机端&乘客端、跑腿骑手端、货运司机端&货主端、两轮车运营位、国际化外卖客户端等集团内多个业务线中进行了大规模落地并稳定运行,以下是部分滴滴线上业务的 Hummer 页面截图,效果和原生几乎无异。

界面效果图(图中数据已作特殊处理,仅供介绍使用)

4. 

结束语

Hummer 是一个非常年轻的跨端开发框架,目前仍处于高速发展期,非常需要大家的宝贵意见和建议,欢迎大家积极使用和反馈,同时也非常欢迎大家积极参与到 Hummer 的建设中来,一起把 Hummer 打造得更好更完善,期待大家的 PRs 和 issues。我们希望 Hummer 可以成为大家在开发客户端时的首选跨端开发框架,能切实帮助大家节省开发成本,提升开发效率。

5. 

关于我们

官方网站:https://hummer.didi.cn

官方 Github 地址:https://github.com/didi/Hummer

官方邮箱:hummer@didiglobal.com

Hummer QQ 交流群 (851327307)

更多资讯,欢迎关注【普惠产品技术团队】公众号

开源团队

延伸阅读


内容编辑 | Sherry联系我们 | DiDiTech@didiglobal.com

这篇关于滴滴开源轻量级跨端开发框架:Hummer的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/800482

相关文章

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依

基于Python开发PPTX压缩工具

《基于Python开发PPTX压缩工具》在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,不便于传输和存储,所以本文将使用Python开发一个PPTX压缩工具,需要的可以了解下... 目录引言全部代码环境准备代码结构代码实现运行结果引言在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”,帮你按时关掉电脑,而且全程不需要你多做

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo