桔妹導讀：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.
技術架構和跨端體系
如下圖所示，我們拋棄了業界其他跨端框架普遍採用的 DSL+VDOM 的技術實現，以換取接近原生的開發體驗和性能。但同時，我們也提供了具有響應式開發能力的 Tenon Framework，完全兼容 Vue 3.0 開發框架，緊貼 W3C 標準，遵從網頁開發各項規則，可以輕鬆移植 Web 組件，擁抱 Web 生態（Tenon for React 開發中）。
除此之外，我們還提供了完善的工具套件和一站式發佈管理平臺—— Hummer Nest。輕鬆實現 Hummer 應用的持續集成和交付，並實現對發佈版本進行線上跟蹤，統計版本覆蓋率和激活率等。平臺還具有線上崩潰信息的上報和報警能力，能夠輕鬆進行應用質量管控，提升應用穩定性。
Hummer技術架構圖
▍ 案例展示
目前 Hummer 已在聚合收銀SDK、代駕司機端&乘客端、跑腿騎手端、貨運司機端&貨主端、兩輪車運營位、國際化外賣客戶端等集團內多個業務線中進行了大規模落地並穩定運行，以下是部分滴滴線上業務的 Hummer 頁面截圖，效果和原生幾乎無異。
界面效果圖（圖中數據已作特殊處理，僅供介紹使用）
4.
結束語
5.
關於我們
官方 Github 地址：https://github.com/didi/Hummer
官方郵箱：[email protected]
Hummer QQ 交流羣 (851327307)
更多資訊，歡迎關注【普惠產品技術團隊】公衆號
開源團隊
▬
延伸閱讀
▬
內容編輯 | Sherry聯繫我們 | [email protected]