文章轉(zhuǎn)載至：滴滴技術(shù) - 滴滴開(kāi)源輕量級(jí)跨端開(kāi)發(fā)框架：Hummer
歷時(shí)兩年的深度打磨，滴滴普惠泛前端團(tuán)隊(duì)和滴滴 R-Lab 泛前端團(tuán)隊(duì)聯(lián)合打造的超輕量級(jí)動(dòng)態(tài)化跨端開(kāi)發(fā)框架 —— Hummer，終于開(kāi)源啦。
它由極具精簡(jiǎn)的 Hummer Core 和高可擴(kuò)展的 Tenon Reactive Framework 組成。目前該方案已在滴滴聚合收銀臺(tái)、代駕司機(jī)端、代駕乘客端、跑腿騎手端、跑腿商戶端、貨運(yùn)司機(jī)端、貨主端、兩輪車(chē)、外賣(mài)等集團(tuán)內(nèi)多個(gè)業(yè)務(wù)線中進(jìn)行了大規(guī)模落地并穩(wěn)定運(yùn)行。
1. 業(yè)務(wù)背景
過(guò)去兩年隨著業(yè)務(wù)多品類、多場(chǎng)景的快速拓展，對(duì)研發(fā)團(tuán)隊(duì)的吞吐能力提出了更高的要求。如何在保持團(tuán)隊(duì)整體規(guī)模不變的前提下更高效地支撐業(yè)務(wù)的快速發(fā)展，成為了團(tuán)隊(duì)的首要考量，而跨端開(kāi)發(fā)則成為了我們的首要選擇。在調(diào)研了業(yè)界眾多跨端方案之后，發(fā)現(xiàn)在包體積控制、整體穩(wěn)定性，以及上手成本等方面，都無(wú)法很好地滿足我們的需求。在此背景下，普惠泛前端團(tuán)隊(duì)和 R-Lab 泛前端團(tuán)隊(duì)進(jìn)行了深入地合作，于 2018 年年底發(fā)起了 Hummer 跨端技術(shù)項(xiàng)目，旨在以較低成本的投入，產(chǎn)出一款具有高生產(chǎn)效率的動(dòng)態(tài)化跨端開(kāi)發(fā)框架，有效整合團(tuán)隊(duì)內(nèi)部前端和終端開(kāi)發(fā)資源，真正提升團(tuán)隊(duì)整體的開(kāi)發(fā)效率。
2. 技術(shù)優(yōu)勢(shì)
正如 Hummer（蜂鳥(niǎo)）的名字一樣，具有小巧輕盈的體態(tài)，迅猛強(qiáng)健的翅膀，以及色彩艷麗的外表。
- 超輕量：小于 1M 的編譯產(chǎn)物，能以極低的包體積成本接入到 App 中，打造極致輕量?jī)?yōu)勢(shì)；
- 易上手：Hummer API + Tenon Reactive Framework，兼顧客戶端和前端的開(kāi)發(fā)體驗(yàn)，造就極低的學(xué)習(xí)門(mén)檻；
- 高可用：已在滴滴內(nèi)部多個(gè)業(yè)務(wù)中得到完整驗(yàn)證，整體 Crash 率低于 0.01%；
- 高性能：基于原生組件和模塊，可以最大化利用原生渲染的性能優(yōu)勢(shì)以及平臺(tái)能力；
- 跨平臺(tái)：一套代碼可以編譯并運(yùn)行于 iOS 和 Android 平臺(tái)，使用 Tenon 可以快速兼容基于Vue 開(kāi)發(fā)的 Web 應(yīng)用；
- 動(dòng)態(tài)化：利用 JavaScript（以下簡(jiǎn)稱JS）解釋執(zhí)行的特性，可以快速部署動(dòng)態(tài)頁(yè)面，配合Hummer Nest 平臺(tái)可以實(shí)現(xiàn)云端發(fā)布；
簡(jiǎn)單演示
為了讓大家對(duì) Hummer 有一個(gè)直觀的了解，先來(lái)感受一下分別使用 Hummer API 和 Tenon 開(kāi)發(fā)的 HelloWorld 頁(yè)面對(duì)應(yīng)的代碼。
如上圖所示，Hummer 同時(shí)支持偏向原生開(kāi)發(fā)體驗(yàn)的 Hummer API 開(kāi)發(fā)模式和偏向前端開(kāi)發(fā)體驗(yàn)的 Tenon（兼容 Vue）開(kāi)發(fā)模式，在不久的將來(lái)，我們還將支持更多開(kāi)發(fā)框架，如 React、Angular等。
技術(shù)架構(gòu)和跨端體系
Hummer 以 JS 引擎為基石，在保持對(duì) JS 引擎最少特性依賴的前提下，實(shí)現(xiàn)了類似 React Native 的 Fabric 引擎直通架構(gòu)，使原生對(duì)象和JS對(duì)象能夠相互調(diào)動(dòng)，實(shí)現(xiàn)了同步視圖渲染，使其充分利用原生渲染的性能優(yōu)勢(shì)（目前已支持 JavaScriptCore、V8、Hermers、QuickJS 等業(yè)內(nèi)知名 JS 引擎）。同時(shí)，通過(guò)組件自渲染能力，幾乎完美控制視圖渲染的每一個(gè)細(xì)節(jié)，再配合經(jīng)過(guò)調(diào)優(yōu)的 Yoga 布局引擎，抹平了兩端視圖布局差異，使兩端視圖保持了高度一致（性能更佳的自研布局引擎開(kāi)發(fā)中）。
如下圖所示，我們拋棄了業(yè)界其他跨端框架普遍采用的 DSL+VDOM 的技術(shù)實(shí)現(xiàn)，以換取接近原生的開(kāi)發(fā)體驗(yàn)和性能。但同時(shí)，我們也提供了具有響應(yīng)式開(kāi)發(fā)能力的 Tenon Framework，完全兼容 Vue 3.0 開(kāi)發(fā)框架，緊貼 W3C 標(biāo)準(zhǔn)，遵從網(wǎng)頁(yè)開(kāi)發(fā)各項(xiàng)規(guī)則，可以輕松移植 Web 組件，擁抱 Web 生態(tài)（Tenon for React 開(kāi)發(fā)中）。
除此之外，我們還提供了完善的工具套件和一站式發(fā)布管理平臺(tái)—— Hummer Nest。輕松實(shí)現(xiàn) Hummer 應(yīng)用的持續(xù)集成和交付，并實(shí)現(xiàn)對(duì)發(fā)布版本進(jìn)行線上跟蹤，統(tǒng)計(jì)版本覆蓋率和激活率等。平臺(tái)還具有線上崩潰信息的上報(bào)和報(bào)警能力，能夠輕松進(jìn)行應(yīng)用質(zhì)量管控，提升應(yīng)用穩(wěn)定性。
案例展示
目前 Hummer 已在聚合收銀SDK、代駕司機(jī)端&乘客端、跑腿騎手端、貨運(yùn)司機(jī)端&貨主端、兩輪車(chē)運(yùn)營(yíng)位、國(guó)際化外賣(mài)客戶端等集團(tuán)內(nèi)多個(gè)業(yè)務(wù)線中進(jìn)行了大規(guī)模落地并穩(wěn)定運(yùn)行，以下是部分滴滴線上業(yè)務(wù)的 Hummer 頁(yè)面截圖，效果和原生幾乎無(wú)異。
4. 結(jié)束語(yǔ)
Hummer 是一個(gè)非常年輕的跨端開(kāi)發(fā)框架，目前仍處于高速發(fā)展期，非常需要大家的寶貴意見(jiàn)和建議，歡迎大家積極使用和反饋，同時(shí)也非常歡迎大家積極參與到 Hummer 的建設(shè)中來(lái)，一起把 Hummer 打造得更好更完善，期待大家的 PRs 和 issues。我們希望 Hummer 可以成為大家在開(kāi)發(fā)客戶端時(shí)的首選跨端開(kāi)發(fā)框架，能切實(shí)幫助大家節(jié)省開(kāi)發(fā)成本，提升開(kāi)發(fā)效率。
5. 關(guān)于我們
官方網(wǎng)站：https://hummer.didi.cn
官方 Github 地址：https://github.com/didi/Hummer
官方郵箱：hummer@didiglobal.com
Hummer QQ 交流群 (851327307)
更多資訊，歡迎關(guān)注【普惠產(chǎn)品技術(shù)團(tuán)隊(duì)】公眾號(hào)
