AI 年度盘点与2025发展趋势展望,50+案例解析亮相AICon 了解详情
写点什么

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

  • 2014-12-26
  • 本文字数:2536 字

    阅读完需:约 8 分钟

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 )关注我们,并与我们的编辑和其他读者朋友交流。

2014-12-26 21:213941

评论

发布
暂无评论
发现更多内容

逻辑数据编织平台现代企业数据管理和分析的理想选择

Aloudata

数据仓库 数据分析 数据虚拟化 Data Fabric 数据编织

API接口对电商的影响

高端章鱼哥

500种专业级Lut调色集合包

理理

Clicker for Netflix—— 提升奈飞观影体验!

Rose

Mac蓝光高清播放工具 Blu-ray Player Pro v3.3.22中文版

Rose

一文介绍MySQL架构

伤感汤姆布利柏

人到一定年纪,要学会远离多巴胺

禅道项目管理

项目管理 多巴胺 中年人 上瘾模型 延迟满足

双十一购物攻略:如何利用爬虫技术获取历史价格趋势,理性购物不踩雷

EquatorCoco

爬虫 双十一

KubeEdge 1.19.0版本发布!更完备的节点设备能力,全新的Dashboard体验

华为云原生团队

云计算 容器 云原生

小红书笔记详情探索、用户分析及API接口技术交流

代码忍者

API 接口 pinduoduo API

Comprehensive Comparison of Qualcomm IPQ9554 and IPQ9514 Chips: Choosing in the WiFi 7 Era

wifi6-yiyi

WiFi7

做ppt去哪找模板?这5个模板网站值得推荐!

职场工具箱

效率工具 职场 PPT模板 办公软件 AI生成PPT

ps2019cc安装教程 附Photoshop cc 2019 激活工具

Rose

Clicker for YouTube mac版 YouTube视频播放器

Rose

mac电脑哪款PDF编辑软件好用?推荐Adobe Acrobat Pro DC Mac 版

Rose

二十载岁月如磐,一位高校女教师的技术坚守之路

华为云开发者联盟

鸿蒙 云主机 昇腾 AI 大底座

做了5年Java后端开发,靠着这份面试题跟答案,我从12K变成了30K

采菊东篱下

java面试

唯品会商品详情API接口的深度探索与应用实例

代码忍者

API 接口 pinduoduo API

1000%增长!我仅用一个小时搞定!AI智能体+AI小程序=MVP王炸组合!

陈宇明

腾讯健康:我们有 40% 的代码是 AI 写的

cloud studio AI应用

HTTP和HTTPS的区别

秃头小帅oi

js 数字计算的精度问题

不在线第一只蜗牛

JavaScript 前端

Luminar Neo:超多功能的照片编辑神器来袭

Rose

探秘 Parallels Desktop 18虚拟机:为何它是 Mac 用户的福音?

Rose

SoundSource 5:Mac 音频控制器,重塑你的听觉世界!

Rose

电商在经济下行中如何利用小程序提升人效并实现多端引流?

Geek_2305a8

上了ERP,还要上MES?这其中有什么门道?

积木链小链

ERP mes

申请亚马逊商品详情API需要多少钱

代码忍者

API 接口 API 测试 pinduoduo API

非凸科技支持第49届ICPC亚洲区域赛南京站成功举行

非凸科技

#编程 ICPC

QCN6224: Unlocking Long-Range IoT Potential for Smart Applications

wallyslilly

QCN6224

家居艺术新篇章:东芝艺术电视LA,定义生活美学新高度

Geek_2d6073

Supersonic框架宣称iOS和Android混合应用也能有原生性能_Android/iOS_Sergio De Simone_InfoQ精选文章