前端测试框架搭建（一套移动端高性能高可用的动态化跨端开发框架）

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个跨端开发框架，支持 Android 和 iOS 应用——Hummer。

前端测试框架搭建（一套移动端高性能高可用的动态化跨端开发框架）(1)

Hummer 是一套高性能高可用的跨端开发框架，一套代码可以同时支持开发 Android 和 iOS 应用。现已经支持 Vue/React/TypeScript/JavaScript 四种语法，面向大前端开发人员，总有一款适合你。

技术优势

正如 Hummer（蜂鸟）的名字一样，具有小巧轻盈的体态，迅猛强健的翅膀，以及色彩艳丽的外表。

超轻量：小于 1M 的编译产物，能以极低的包体积成本接入到 App 中，打造极致轻量优势；
易上手： Hummer API Tenon Reactive Framework，兼顾客户端和前端的开发体验，造就极低的学习门槛；
高可用：已在滴滴内部多个业务中得到完整验证，整体 Crash 率低于 0.01%；
高性能：基于原生组件和模块，可以最大化利用原生渲染的性能优势以及平台能力；
跨平台：一套代码可以编译并运行于 iOS 和 Android 平台，使用 Tenon 可以快速兼容基于 Vue 开发的 Web 应用；
动态化：利用 JavaScript 解释执行的特性，可以快速部署动态页面，配合 Hummer Nest 平台可以实现云端发布；

架构设计

Hummer 整体的架构设计，和业界其他基于JS引擎的跨端框架基本一致。利用 JS引擎（Android 端用的是 QuickJS，iOS 端用的是 JavaScriptCore），作为JS和客户端之间的桥梁，JS代码通过 JS引擎调用到原生的组件和方法，同时利用 Flex布局引擎 来渲染页面。

Hummer & Tenon：

Hummer 通过 Hummer Core 把两大引擎联系在一起，同时对外暴露一套 Hummer API，来为JS侧提供 Hummer 内置的视图组件和功能组件。从这个架构设计可以看出，我们抛弃了业界其他动态化跨端框架普遍使用的DSL层和VDOM层，因此原生 Hummer 不具备前端开发常用的响应式编程的能力，但同时换来的是接近原生开发的体验和性能。当然 Hummer 也是支持响应式编程的开发方式的，我们以原生 Hummer 为基础，在此之上开发了一套基于MVVM架构的开发框架 —— Tenon，通过 Tenon，可以把使用 Vue.js 编写的代码，转换成原生 Hummer 的代码。因此，Hummer 实际上同时支持两种开发模式：

偏原生开发习惯的原生 Hummer 开发模式；
偏前端开发习惯的 MVVM 开发模式；

并且可以在同一个项目中进行混合开发，能很好地整合客户端和前端的开发资源，使所有人同时参与同一个项目的开发工作，并尽量保留原先的开发习惯。

DevTools：

Hummer 通过内置的各种开发者工具帮助开发者更加方便地通过 Hummer 来开发应用，比如内置的CLI脚手架工具，可以方便地创建项目和打包项目，配合 SDK 内置的 Debugger 工具和 VSCode 插件，可以使开发者方便地进行源代码调试，从而提升整体的开发体验。

Hummer Nest：

Hummer Nest 是一套用于自动化打包和发布 Hummer 应用的一站式开发管理平台，可以有效提升 Hummer 在业务开发过程中的持续交付能力。Hummer Nest 还提供了对业务和技术相关的关键数据的监控和报警策略，协助开发者开发出更加高质量的应用。

前端测试框架搭建（一套移动端高性能高可用的动态化跨端开发框架）(2)

简单演示

简单感受一下分别使用 Hummer API 和 Tenon 开发的 HelloWorld 页面对应的代码，以及分别在 Android 和 iOS 设备上运行的最终效果。

前端测试框架搭建（一套移动端高性能高可用的动态化跨端开发框架）(3)

代码

前端测试框架搭建（一套移动端高性能高可用的动态化跨端开发框架）(4)

运行效果

使用 Hummer

安装 Hummer CLI：

npm install @hummer/cli -g

新建项目：

hummer init // 输出以下内容，选择其中一种模块工程 ? Which template do you want init? template-vue // Tenon-Vue 模板工程，通过 Vue 框架来做业务开发 template-react // Tenon-React 模板工程，通过 React 框架来做业务开发 ❯ template-ts // Hummer 模板工程，通过 TS 或 JS 来做业务开发 template-library // 组件库模板工程，用于创建 Hummer 或 Tenon 的组件库 template-android // Android 原生模板工程 template-ios // iOS 原生模板工程 // 接着输出以下内容，这里可以输入项目名称，按回车可直接使用默认值 ? Project Name (template-ts) // 接着输出以下内容，这里可以输入项目描述，按回车可直接使用默认值 ? Description (Hummer Project) // 接着输出以下内容，这里可以输入项目作者，按回车可直接使用默认值 ? Author (XiaoFeng <bbssyyuui@qq.com>)

编译打包：

hummer build

Android 集成示例

添加 Hummer SDK 依赖：

dependencies { implementation 'io.github.didi.hummer:hummer:0.4.2' //版本号需自行替换成当前的最新发布版本 }

初始化 Hummer SDK：

@Override public void onCreate() { super.onCreate(); Hummer.init(this); }

实现 Hummer 容器：

public class HummerSinglePageActivity extends HummerActivity { @Override protected NavPage getPageInfo() { // URL来源一：通过Intent传入 // return super.getPageInfo(); // URL来源二：assets文件路径 // return new NavPage("HelloWorld.js"); // URL来源三：手机设备文件路径 // return new NavPage("/sdcard/HelloWorld.js"); // URL来源四：网络url return new NavPage("http://x.x.x.x:8000/index.js"); } }

案例

前端测试框架搭建（一套移动端高性能高可用的动态化跨端开发框架）(5)