歷時兩年的深度打磨伏嗜，滴滴普惠泛前端團隊和滴滴 R-Lab 泛前端團隊聯(lián)合打造的超輕量級動態(tài)化跨端開發(fā)框架 —— Hummer遍膜，終于開源啦汉买。
它由極具精簡的 Hummer Core 和高可擴展的 Tenon Reactive Framework 組成壤蚜。目前該方案已在滴滴聚合收銀臺、代駕司機端伟件、代駕乘客端、跑腿騎手端议经、跑腿商戶端斧账、貨運司機端谴返、貨主端、兩輪車咧织、外賣等集團內多個業(yè)務線中進行了大規(guī)模落地并穩(wěn)定運行嗓袱。
業(yè)務背景
過去兩年隨著業(yè)務多品類、多場景的快速拓展习绢，對研發(fā)團隊的吞吐能力提出了更高的要求渠抹。如何在保持團隊整體規(guī)模不變的前提下更高效地支撐業(yè)務的快速發(fā)展，成為了團隊的首要考量毯炮，而跨端開發(fā)則成為了我們的首要選擇逼肯。在調研了業(yè)界眾多跨端方案之后，發(fā)現(xiàn)在包體積控制桃煎、整體穩(wěn)定性棉圈，以及上手成本等方面决乎，都無法很好地滿足我們的需求。在此背景下，普惠泛前端團隊和 R-Lab 泛前端團隊進行了深入地合作蛙婴，于 2018 年年底發(fā)起了 Hummer 跨端技術項目，旨在以較低成本的投入菌赖，產出一款具有高生產效率的動態(tài)化跨端開發(fā)框架汗贫，有效整合團隊內部前端和終端開發(fā)資源，真正提升團隊整體的開發(fā)效率耿战。
技術優(yōu)勢
正如 Hummer（蜂鳥）的名字一樣蛋叼，具有小巧輕盈的體態(tài)，迅猛強健的翅膀剂陡，以及色彩艷麗的外表狈涮。
超輕量：小于 1M 的編譯產物，能以極低的包體積成本接入到 App 中鸭栖，打造極致輕量優(yōu)勢歌馍；
易上手：Hummer API + Tenon Reactive Framework，兼顧客戶端和前端的開發(fā)體驗晕鹊，造就極低的學習門檻松却；
高可用：已在滴滴內部多個業(yè)務中得到完整驗證，整體 Crash 率低于 0.01%溅话；
高性能：基于原生組件和模塊晓锻，可以最大化利用原生渲染的性能優(yōu)勢以及平臺能力；
跨平臺：一套代碼可以編譯并運行于 iOS 和 Android 平臺飞几，使用 Tenon 可以快速兼容基于 Vue 開發(fā)的 Web 應用带射；
動態(tài)化：利用 JavaScript（以下簡稱 JS）解釋執(zhí)行的特性，可以快速部署動態(tài)頁面循狰，配合 Hummer Nest 平臺可以實現(xiàn)云端發(fā)布窟社；
▍ 簡單演示
為了讓大家對 Hummer 有一個直觀的了解券勺，先來感受一下分別使用 Hummer API 和 Tenon 開發(fā)的 HelloWorld 頁面對應的代碼。
demo 代碼及效果展示圖
如上圖所示灿里，Hummer 同時支持偏向原生開發(fā)體驗的 Hummer API 開發(fā)模式和偏向前端開發(fā)體驗的 Tenon（兼容 Vue）開發(fā)模式关炼，在不久的將來，我們還將支持更多開發(fā)框架匣吊，如 React儒拂、Angular 等。
技術架構和跨端體系
Hummer 以 JS 引擎為基石色鸳，在保持對 JS 引擎最少特性依賴的前提下社痛，實現(xiàn)了類似 React Native 的 Fabric 引擎直通架構，使原生對象和 JS 對象能夠相互調動命雀，實現(xiàn)了同步視圖渲染蒜哀，使其充分利用原生渲染的性能優(yōu)勢（目前已支持 JavaScriptCore、V8吏砂、Hermers撵儿、QuickJS 等業(yè)內知名 JS 引擎）。同時狐血，通過組件自渲染能力淀歇，幾乎完美控制視圖渲染的每一個細節(jié)，再配合經過調優(yōu)的 Yoga 布局引擎匈织，抹平了兩端視圖布局差異浪默，使兩端視圖保持了高度一致（性能更佳的自研布局引擎開發(fā)中）。
如下圖所示缀匕，我們拋棄了業(yè)界其他跨端框架普遍采用的 DSL+VDOM 的技術實現(xiàn)纳决，以換取接近原生的開發(fā)體驗和性能。但同時弦追，我們也提供了具有響應式開發(fā)能力的 Tenon Framework岳链，完全兼容 Vue 3.0 開發(fā)框架花竞，緊貼 W3C 標準劲件，遵從網頁開發(fā)各項規(guī)則，可以輕松移植 Web 組件约急，擁抱 Web 生態(tài)（Tenon for React 開發(fā)中）零远。
除此之外，我們還提供了完善的工具套件和一站式發(fā)布管理平臺—— Hummer Nest厌蔽。輕松實現(xiàn) Hummer 應用的持續(xù)集成和交付牵辣，并實現(xiàn)對發(fā)布版本進行線上跟蹤，統(tǒng)計版本覆蓋率和激活率等奴饮。平臺還具有線上崩潰信息的上報和報警能力纬向，能夠輕松進行應用質量管控择浊，提升應用穩(wěn)定性。
Hummer 技術架構圖
▍ 案例展示
目前 Hummer 已在聚合收銀 SDK逾条、代駕司機端 &乘客端琢岩、跑腿騎手端、貨運司機端 &貨主端师脂、兩輪車運營位担孔、國際化外賣客戶端等集團內多個業(yè)務線中進行了大規(guī)模落地并穩(wěn)定運行，以下是部分滴滴線上業(yè)務的 Hummer 頁面截圖吃警，效果和原生幾乎無異糕篇。
結束語
Hummer 是一個非常年輕的跨端開發(fā)框架，目前仍處于高速發(fā)展期酌心，非常需要大家的寶貴意見和建議拌消，歡迎大家積極使用和反饋，同時也非常歡迎大家積極參與到 Hummer 的建設中來谒府，一起把 Hummer 打造得更好更完善拼坎，期待大家的 PRs 和 issues。我們希望 Hummer 可以成為大家在開發(fā)客戶端時的首選跨端開發(fā)框架完疫，能切實幫助大家節(jié)省開發(fā)成本泰鸡，提升開發(fā)效率。
