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中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。