Supersonic 框架宣称 iOS 和 Android 混合应用也能有原生性能

AppGyver 日前宣布了一个全新的用于开发Android 和iOS 混合（Hybrid）移动应用的Supersonic 框架，并且承诺提供“真正的原生性能”，AppGyver 说，这得益于一个全新设计的实现混合应用的方式。Supersonic 也和其自家的跨平台混合应用IDE Steroids 做了集成。

Supersonic 以 CSS 框架 Ionic 和 Cordova 为基础，但是它采用了另类的方式来混合使用 HTML5 代码和原生代码，被称之为多页面应用架构。这将给 UI 性能和处理页面复杂度带来好处，AppGyver 说，因而比其他竞争方案有明显的性能优势。

Supersonic 用它自己的方式来使用原生 UI 元素或 HTML/CSS 元素，因此像页面切换、模态对话框、导航栏、Tab 栏、绘图以及其它一些 UI 元素是完全原生的，这保证了整体的原生性能和用户体验。

为了了解更多关于 Supersonic 的信息，InfoQ 采访了 AppGyver 的开发总监 Harri Sarsa。

InfoQ：您能够介绍 Supersonic 内部架构的更多细节吗？

Harri：在原生层面上，我们有 AppGyver Wrapper，它是我们自己的 Objective-C 或者 Java 原生运行时，负责为 HTML5 内容提供真正的原生功能支持。它包含了一个微调过的 Cordova 但完全兼容 Cordova 插件。它还包含了一个宿主（Host）程序，通过 API 提供原生 UI 调用和导航功能，这是其他 Wrapper 所没有的；另外它还能让你通过本地服务器的方式去拿资源文件而不是通过文件系统去拿。

在 Wrapper 之上，我们有 Supersonic 框架，它包含了我们修改过的 Ionic，提供了很好的 CSS 框架，更重要的是，它还包含 JavaScript API 和项目结构能够让你访问原生级别的增强功能。不仅所有的 Cordova 核心 API 可供使用，而且还包括 Supersonic 专有的 API 去访问原生 UI 组件。比如说，我们没有使用绝对定位“position: absolute”的一个 div 结点作为顶部导航栏，而是使用原生的导航栏，这意味着它总能够保证在正确的位置。我们使用 HTML5 的 Web Components 来启用原生元素，例如，原生导航栏就是使用一个 Web Component 来实现的。

除此之外，Supersonic 还是独立于前端框架的，你可以使用你喜欢的任何框架。不过我们非常喜欢 AngularJS，因此有很多例子都是用 Angular 实现的。

在这些 UI 之上是 Supersonic 数据层，能够实现“三向数据绑定（three-way data binding）”，让你的 View 始终和数据保持同步，包括在 Controller 中和后台服务中。Supersonic 数据层支持任何 REST 后端，你也可以通过我们免费提供的开发时数据库快速开始。

InfoQ：Supersonic 的多页面架构的优势是什么？

Harri：移动应用的构建和现在的 Web 应用有根本的不同。对大多数移动应用来说，在同一时间通常只有一个 View 出现在屏幕上，而不是像一个单页面 Web 程序（比如 Gmail）中一样包含复杂的，不断变化的 UI。你可以在多个 View 之间进行导航，比如从列表页面到详细内容页面。在一个完全的原生应用中，你创建应用的“Storyboard（故事板）”，原生的导航框架会负责这些 View 的切换，导航历史管理，共享 View 之间的数据，维护不可见的 View 的状态等等。

因为所有其它的混合应用框架受限于仅仅呈现唯一的 WebView，所以类似 Ionic 的框架只能使用单页面程序的方式：你只有一个 app.html 文件，然后 AngularJS 或其它的方案负责操作 DOM 来实现页面切换，展现新内容，维护导航历史等等。

在 Supersonic 中，我们把 App 分割成多个 HTML 页面，因而可以利用上高性能的原生导航。因此，当你从列表 View 切换到详细信息 View，没有任何 DOM 发生变化。取而代之的是，比如说你有一个汽车列表的 HTML 页面 cars/index.html，当点击列表中的某一辆车，列表页面的 JavaScript Controller 调用 API 将另外一个负责汽车具体信息的显示页面 cars/show.html 推入原生的导航栈，同时自然的提供了流畅的原生动画切换效果。这意味着最初的 index.html 存在于 show.html 之下，这很好的维护了导航状态。而且原生的返回按钮能够让你正确的返回。

同样的例子还包括抽屉式 / 侧栏菜单、Tab 导航等等，对它们的操作都无需发生任何 DOM 重绘。比如 Tab 页面切换能够瞬间完成，它完全由手机的 GPU 和 UI 引擎实现而不是由 WebKit 实现。

InfoQ：您能够简要的介绍下 Supersonic 的工具吗？

Harri：Supersonic 工具叫做 Steroids。基本上，你有一个基于 Node.js 的 CLI（命令行界面）可以创建新的 Supersonic 项目，生成代码结构，调试 Web 代码，启动 iOS 或 Android 模拟器，通过 Bower 和 npm 来管理依赖，查看设备上的日志等等。这个 CLI 同时支持 OS X，Windows 和 Linux。

整个开发的核心是一个名为 Scanner 的 App，你可以从 App Store 或者 Google Play 去下载。它能够和 Steroids 开发服务器一起工作，开发服务器也是通过 CLI 来启动。你通过扫描二维码来连接 Scanner 和你的电脑。然后 Scanner 从你的电脑下载 HTML5 内容和配置，并在你的设备上运行。这就让你的开发过程无需启动 XCode 或者 Android Studio（这也意味着你可以在 Windows 上进行 iOS 开发）。Scanner 应用包含了所有 AppGyver Wrapper 的原生代码，从而你的应用看上去完全是一个独立的编译过的 App。

本地开发结束后，你可以将应用部署在云上，从而够访问我们的 Build 服务。Build 服务可以 build 一个独立的二进制程序，让你能够将其提交到应用市场。

InfoQ：Supersonic 的发展方向是什么？

Harri：我们即将做的一些事情包括 Xcode 和 Android Studio 本地 Build，这可以加快插件开发；Supersonic 数据层的更多功能，比如即插即用的登录界面，一些 Steroids 和其他框架一起使用的例子，这些框架可以提供比如推送通知等新功能。

长远来看，我们希望 Supersonic 成为最好的混合应用开发框架，拥有能和原生 App 媲美的跨平台 App，同时还拥有深度而强大的数据集成。我们相信这种组合原生 +HTML5 的方式是正确的方向。

要了解更多 Supersonic 的信息，可以参考 AppGyver 提供的在线文档，以及一系列关于用户界面、数据绑定、工具使用的视频。

查看英文原文： http://www.infoq.com/news/2014/12/supersonic-hybrid-apps-dev

感谢郭蕾对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ）或者腾讯微博（ @InfoQ ）关注我们，并与我们的编辑和其他读者朋友交流。