《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個跨端開發(fā)框架，支持 Android 和 IOS 應(yīng)用——Hummer。
Hummer 是一套高性能高可用的跨端開發(fā)框架，一套代碼可以同時支持開發(fā) Android 和 iOS 應(yīng)用。現(xiàn)已經(jīng)支持 Vue/React/TypeScript/JAVAScript 四種語法，面向大前端開發(fā)人員，總有一款適合你。
技術(shù)優(yōu)勢
正如 Hummer（蜂鳥）的名字一樣，具有小巧輕盈的體態(tài)，迅猛強(qiáng)健的翅膀，以及色彩艷麗的外表。
- 超輕量： 小于 1M 的編譯產(chǎn)物，能以極低的包體積成本接入到 App 中，打造極致輕量優(yōu)勢；
- 易上手： Hummer API + Tenon Reactive Framework，兼顧客戶端和前端的開發(fā)體驗，造就極低的學(xué)習(xí)門檻；
- 高可用： 已在滴滴內(nèi)部多個業(yè)務(wù)中得到完整驗證，整體 Crash 率低于 0.01%；
- 高性能： 基于原生組件和模塊，可以最大化利用原生渲染的性能優(yōu)勢以及平臺能力；
- 跨平臺： 一套代碼可以編譯并運(yùn)行于 iOS 和 Android 平臺，使用 Tenon 可以快速兼容基于 Vue 開發(fā)的 Web 應(yīng)用；
- 動態(tài)化： 利用 JavaScript 解釋執(zhí)行的特性，可以快速部署動態(tài)頁面，配合 Hummer Nest 平臺可以實(shí)現(xiàn)云端發(fā)布；
架構(gòu)設(shè)計
Hummer 整體的架構(gòu)設(shè)計，和業(yè)界其他基于JS引擎的跨端框架基本一致。利用JS引擎（Android 端用的是 QuickJS，iOS 端用的是 JavaScriptCore），作為JS和客戶端之間的橋梁，JS代碼通過 JS引擎 調(diào)用到原生的組件和方法，同時利用Flex布局引擎來渲染頁面。
Hummer & Tenon：
Hummer 通過 Hummer Core 把兩大引擎聯(lián)系在一起，同時對外暴露一套 Hummer API，來為JS側(cè)提供 Hummer 內(nèi)置的視圖組件和功能組件。從這個架構(gòu)設(shè)計可以看出，我們拋棄了業(yè)界其他動態(tài)化跨端框架普遍使用的DSL層和VDOM層，因此原生 Hummer 不具備前端開發(fā)常用的響應(yīng)式編程的能力，但同時換來的是接近原生開發(fā)的體驗和性能。當(dāng)然 Hummer 也是支持響應(yīng)式編程的開發(fā)方式的，我們以原生 Hummer 為基礎(chǔ)，在此之上開發(fā)了一套基于MVVM架構(gòu)的開發(fā)框架 —— Tenon，通過 Tenon，可以把使用 Vue.js 編寫的代碼，轉(zhuǎn)換成原生 Hummer 的代碼。因此，Hummer 實(shí)際上同時支持兩種開發(fā)模式：
- 偏原生開發(fā)習(xí)慣的原生 Hummer 開發(fā)模式；
- 偏前端開發(fā)習(xí)慣的 MVVM 開發(fā)模式；
并且可以在同一個項目中進(jìn)行混合開發(fā)，能很好地整合客戶端和前端的開發(fā)資源，使所有人同時參與同一個項目的開發(fā)工作，并盡量保留原先的開發(fā)習(xí)慣。
DevTools：
Hummer 通過內(nèi)置的各種開發(fā)者工具幫助開發(fā)者更加方便地通過 Hummer 來開發(fā)應(yīng)用，比如內(nèi)置的CLI腳手架工具，可以方便地創(chuàng)建項目和打包項目，配合 SDK 內(nèi)置的 Debugger 工具和 VSCode 插件，可以使開發(fā)者方便地進(jìn)行源代碼調(diào)試，從而提升整體的開發(fā)體驗。
Hummer Nest：
Hummer Nest 是一套用于自動化打包和發(fā)布 Hummer 應(yīng)用的一站式開發(fā)管理平臺，可以有效提升 Hummer 在業(yè)務(wù)開發(fā)過程中的持續(xù)交付能力。Hummer Nest 還提供了對業(yè)務(wù)和技術(shù)相關(guān)的關(guān)鍵數(shù)據(jù)的監(jiān)控和報警策略，協(xié)助開發(fā)者開發(fā)出更加高質(zhì)量的應(yīng)用。
簡單演示
簡單感受一下分別使用 Hummer API 和 Tenon 開發(fā)的 HelloWorld 頁面對應(yīng)的代碼，以及分別在 Android 和 iOS 設(shè)備上運(yùn)行的最終效果。
代碼
運(yùn)行效果
使用 Hummer
安裝 Hummer CLI：
npm install @hummer/cli -g
新建項目：
hummer init // 輸出以下內(nèi)容，選擇其中一種模塊工程 ? Which template do you want init? template-vue // Tenon-Vue 模板工程，通過 Vue 框架來做業(yè)務(wù)開發(fā) template-react // Tenon-React 模板工程，通過 React 框架來做業(yè)務(wù)開發(fā) ? template-ts // Hummer 模板工程，通過 TS 或 JS 來做業(yè)務(wù)開發(fā) template-library // 組件庫模板工程，用于創(chuàng)建 Hummer 或 Tenon 的組件庫 template-android // Android 原生模板工程 template-ios // iOS 原生模板工程 // 接著輸出以下內(nèi)容，這里可以輸入項目名稱，按回車可直接使用默認(rèn)值 ? Project Name (template-ts) // 接著輸出以下內(nèi)容，這里可以輸入項目描述，按回車可直接使用默認(rèn)值 ? Description (Hummer Project) // 接著輸出以下內(nèi)容，這里可以輸入項目作者，按回車可直接使用默認(rèn)值 ? Author (XiaoFeng )
編譯打包：
hummer build
Android 集成示例
添加 Hummer SDK 依賴：
dependencies { implementation 'io.github.didi.hummer:hummer:0.4.2' //版本號需自行替換成當(dāng)前的最新發(fā)布版本 }
初始化 Hummer SDK：
@Override public void onCreate() { super.onCreate(); Hummer.init(this); }
實(shí)現(xiàn) Hummer 容器：
public class HummerSinglePageActivity extends HummerActivity { @Override protected NavPage getPageInfo() { // URL來源一：通過Intent傳入 // return super.getPageInfo(); // URL來源二：assets文件路徑 // return new NavPage("HelloWorld.js"); // URL來源三：手機(jī)設(shè)備文件路徑 // return new NavPage("/sdcard/HelloWorld.js"); // URL來源四：網(wǎng)絡(luò)url return new NavPage("http://x.x.x.x:8000/index.js"); } }
案例
開源協(xié)議：Apache2.0
開源地址：https://github.com/didi/Hummer
