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

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

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

业务背景

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

技术优势

正如 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 等。

技术架构和跨端体系

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 页面截图，效果和原生几乎无异。

界面效果图（图中数据已作特殊处理，仅供介绍使用）

结束语

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

头图：Unsplash

作者：Danny Yuandong

原文：https://mp.weixin.qq.com/s/GjajcAFKnSvEatnhsGhpdA

原文：滴滴开源轻量级跨端开发框架：Hummer

来源：滴滴技术 - 微信公众号 [ID：didi_tech]

转载：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。