写点什么

HTML5、Web 引擎与跨平台移动 App 开发

  • 2014-08-12
  • 本文字数:2895 字

    阅读完需:约 9 分钟

移动端跨平台应用开发是个有趣的话题。纵观该领域目前各个开发商提供的多种方案,大致可以分为三大类:

  1. 基于 HTML5 的方案。该方案以 PhoneGap / Cordova 为代表。其基本思路是针对 HTML5 标准目前功能上的不足,补充定义了一套比较实用的 API(比如硬件访问 / 系统交互等),然后基于平台上自带的 Web 引擎(比如 iOS 的 UIWebview 等),通过扩展机制实现了这些 API,在此基础上再提供一套应用打包部署系统。 Intel 的 XDK 也属于此类方案。
  2. 将 Native API 映射封装成统一语言的 API 的方案。该方案以 Titanium Xamarin 为代表,其中 Titanium 提供 JavaScript API,Xamarin 提供 C# API。这样的好处是可以较容易达到和 Native API 类似的能力,编程模型 / 方式也和原生应用相似。
  3. 有行业针对性的 HTML5 API 方案。比如 Ludei 的 CocoonJS 就是一个比较有意思的方案,它设计了一套专门针对 2D/3D 游戏开发的 API(支持 iOS 和 Android)。可以认为它是 HTML5 图形操作的子集(Canvas +WebGL),再加上一些扩展的 API 比如硬件访问能力 / 广告 / 应用内购买 / 社交网络整合等,以实现一个完整的游戏引擎。

本文重点介绍基于 HTML5 的方案相比其他方案的优缺点,如何实现更好的效果,以及目前的一些进展。

HTML5 方案的特点

原生 API 映射的方案,如 Titanium、Xamarin,其优点在于功能和性能与原生系统比较接近。但是,由于不同系统原生 API 设计上还是会有不少差异,API 的映射还是需要不少的权衡取舍。同时,由于这些 API 是这些厂商自定义的,谈不上什么标准,相应的开发资源(程序库 / 技术支持 / 社区等等)也相对有限。

而另一方面,标准化、开发资源的丰富则是 HTML5 方案最大的优点,同时第三方的 HTML5 框架工具比如 PhoneGap/Cordova 也极大促进了 HTML5 应用的发展,它们提供了方便的跨平台应用打包 / 发布服务、实用的 API、灵活的扩展机制、以及积累下来的丰富的第三方 API 实现。而上游的 W3C 一旦开始支持一些新的 API,PhoneGap/Cordova 也可以很快沿用这些标准的 API 将相关能力开放出去。

HTML5 方案的主要不足则在于功能和性能方面,这主要是因为 HTML5 应用的能力严重依赖于系统自带的 Web 引擎:iOS 的 UIWebview、Android 的 Webview 等,此类组件的 HTML5 能力相比 Safari for iOS、Chrome for Android 都要差一截。另外在 Android 平台上,由于系统碎片化比较严重,不同 Android 版本的 Webview 的 HTML5 能力也有较大差异,导致相应的 HTML5 应用一致性难以保证。

好消息是,现在已经出现一些第三方的 Web 引擎以提供比系统默认的 Webview 更好的功能和性能,而 PhoneGap/Cordova 也正在改进架构以便引入这些更好的第三方 Web 引擎。另外对于 Tizen、Firefox OS 这样本身就是 HTML5 Runtime 加上扩展 API 的系统而言,HTML5 应用是一等公民,在功能拓展方面相比 iOS、Android 上会增强不少。

而第三种方案,CocoonJS 的优点是专注于 2D/3D 游戏开发,画图性能很好,比如同时画 1000 个精灵也能达到 60FPS,这是绝大多数的浏览器 / 通用的 HTML5 引擎目前还做不到的。这个方案的缺点在于,由于它的画图操作简化了很多路经,它无法做到和 HTML5 DOM 元素的互操作,而且它的 HTML5 能力也只是一个子集,功能比较受限。目前 CocoonJS 针对 Android 也引入了另外一种模式 Webview+ 作为补充,Webview+ 基于 Chromium 的内核加上 Cordova API 的支持以实现更通用的 HTML5 能力。

总的来说,HTML5 应用的能力很大程度上依赖于 Web 引擎的能力。因此,无论是移动操作系统开发商还是开发工具的开发商,都持续在 Web 引擎的方向投入了更多的努力。

Web 引擎

Web 引擎目前大致可分为三种方式:

  1. 浏览器,比如 Safari/Chrome/UC Browser 等 ;
  2. 系统自带的 Webview 组件,比如上面提到的 iOS UIWebview 和 Android Webview
  3. 专门的 Web Engine,比如 Intel 的开源项目 Crosswalk 、Ludei 的 Webview+

浏览器方式很容易理解,一个 HTML5 应用就是一个 Web 页面,用户通过浏览器打开一个 URL,然后进入浏览器的全屏模式 /App 模式进行操作,或者是通过点击一个事先创建好的快捷方式打开应用。这种方式的性能取决于浏览器本身对 HTML5 的支持情况,一般来说要优于 Webview 组件的方式,但是问题在于不同的浏览器有差异,而且通过浏览器运行 HTML5 较难做到类似原生应用的体验(应用切换 / 权限管理 / 系统资源访问 / 整合等)以及丰富的 API 支持。

Webview 组件方式的一般用法是以 Hybrid 的方式发布 HTML5 应用,即上述提到的 PhoneGap/Cordova 方案所采用的方式。其问题已经在上面提到过,主要是 Webview 组件本身对 HTML5 的支持能力不足。

专门的 Web 引擎可以有较好的 HTML5 功能和性能支持,同时有较好一致性,类似原生应用的系统整合也可以做得较好。这种方式的缺点则在于开发者需要将 Web 引擎与应用程序一起打包,生成的应用大小会更大,因此有的 Web 引擎(如 Crosswalk)也提供了一种“共享模式”,让多个应用可以共享一个 Web 引擎,仅当应用第一次启动并且发现系统还没有相应 Web 引擎时才提示用户下载安装。

目前的发展趋势是:通过 PhoneGap/Cordova 方式得到丰富的 API 支持,通过专门开发的 Web 引擎去提升 HTML5 的能力。

Crosswalk 和 Ludei 的 Webview+ 在概念上比较类似。Webview+ 是闭源的,目前还不好评估;Crosswalk 由我所在的团队开发,是开源的(BSD 许可协议),基于 Chromium 内核,着重于对 HTML5 功能和性能的支持,发布周期为六周一次,支持 Cordova API。

目前 Crosswalk 正式支持的移动操作系统包括 Android 和 Tizen,在 Android 4.0 及以上的系统中使用 Crosswalk 的 Web 应用程序体验和原生应用没有区别。该引擎现在已经成为众多知名 HTML5 平台和应用的推荐引擎,包括 Google Mobile Chrome App Intel XDK Famo.us Construct2 等等,未来的 Cordova 4.0 也计划集成该 Web 引擎。不过比较遗憾的是,由于 iOS 的限制(iOS 不允许应用使用使用除 iOS UIWebView 之外第三方的 JIT–即时编译引擎),目前 Crosswalk 也没有办法提供直接的支持,但这也许会随着 HTML5 更广泛的进入移动市场而发生改变。

总结

现在的 HTML5 App(加上 API 扩展)已经可以胜任很多事了,比如教育类应用,休闲游戏等等。不过对于那些实时性要求比较高的、计算量大的(比如涉及大量的元素绘制,或并行计算等)、复杂的 3D 游戏,多人在线游戏 / 应用等还有不少差距。另外,工具方面,如何能够更高效的调试 / 开发 / 性能内存调优 HTML5 应用也是另外一个需要提高的地方。不过,这些方面也在不断的演进。相信不久的将来,HTML5 终会成为主流移动开发平台。

作者介绍

余枝强目前是英特尔开源技术中心的软件技术经理。 主要负责 HTML5 引擎 – Crosswalk 在安卓平台的开发,以及一些其他和 Web 有关的新兴技术的研发工作(如 HTML5 并行技术, 3D Camera 等)。他坚信 Web 是未来, 也非常希望和大家一起努力,让这个未来能够更快更好的到来。


感谢杨赛对本文的审校。

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

2014-08-12 01:3415451

评论

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

华秋干货分享:SMT钢网文件的DFA(可焊性)设计

华秋电子

GitHub上疯传数万次!蚂蚁内部绝密分布式高可用算法笔记太香了

Java 分布式 高可用 算法

应用部署引起上游服务抖动问题分析及优化实践方案

京东科技开发者

应用部署 jsf 企业号 4 月 PK 榜 上游服务抖动

后端开挂!一个接口实现CRUD操作,这款工具绝了!

Java你猿哥

Java 接口 后端 crud

人人自媒体的时代,程序员该如何利用好自己的优势?我记住了这些神器...

浅羽技术

工具 自媒体 写作技巧 三周年连更

华秋PCB生产工艺 | 第十二道主流程之FQC

华秋电子

被裁后,狂刷大牛分享的607页JUC源码分析笔记,立马拿蚂蚁offer

Java 高并发 JUC JCF 集合框架

业内首份!医疗数据安全政策汇编发布(附下载)

极盾科技

数据安全

【问题解决】解决 swagger2 默认地址失效

Java你猿哥

Java JAVA开发 swagger2 java项目

得帆云DeMDM,业内首家基于低代码技术构建的主数据管理平台

得帆信息

低代码 数据治理 数据清洗 主数据管理 主数据管理平台

【4.7-4.14】写作社区优秀技术博文一览

InfoQ写作社区官方

热门活动 优质创作周报

SLBR通过自校准的定位和背景细化来去除可见的水印

合合技术团队

人工智能 图像处理 水印消除

低成本,全流程!基于PaddleDepth和Paddle3D的三维视觉技术应用方案

飞桨PaddlePaddle

人工智能 飞桨 PaddlePaddle 三维视觉

如何在ABAP里用函数式编程思想打印出非波拉契Fibonacci(数列)

汪子熙

SAP abap Netweaver 思爱普 三周年连更

SpringBoot 集成 atomikos 实现分布式事务

华为19级大佬10年心血终成百页负载均衡高并发网关设计实战文档

Java 负载均衡 高并发 网关设计

从零学习SDK(6)调试和测试SDK的库

MobTech袤博科技

总结一下Redis的缓存雪崩、缓存击穿、缓存穿透

300+页!卷王级别Java面试宝典-阿里服务端开发与面试知识手册!

Java你猿哥

Java spring JVM 面经 SSM框架

文盘Rust -- 用Tokio实现简易任务池

京东科技开发者

rust runtime tokio 企业号 4 月 PK 榜

爆肝一月!527页文档详解SpringCloud微服务和分布式系统实践

小小怪下士

Java 分布式 微服务 后端 SpringCloud

EMQX Cloud BYOC版本发布:在您的云上体验全托管的MQTT消息服务

EMQ映云科技

物联网 IoT 云服务 mqtt 企业号 4 月 PK 榜

面对“失业焦虑”我们可以尝试自媒体分享| 社区征文

浅羽技术

三周年征文

活久见,java8 lamdba Collectors.toMap()报NPE

OpenHarmony社区运营报告(2023年3月)

OpenHarmony开发者

OpenHarmony

Java中的异常处理详解(try、catch、finally、throw、throws) | 社区征文

共饮一杯无

Java 异常处理 三周年连更

厚礼蟹!阿里最新SpringBoot核心笔记,一夜爆火于Github。

Java你猿哥

Java Spring Boot JAVA开发 SSM框架

揭开“虚拟化已死”的5大谎言与真相

科技热闻

高可靠多层板制造服务再获认可!华秋荣获创想三维优秀质量奖

华秋电子

BAT必刷!GitHub顶级“2023并发编程全优笔记”晋升公司架构组!

Java你猿哥

Java 多线程 面经 SSM框架 多线程并发

太强了!阿里技术官新产"Spring高级源码阅读指南",爆火全网

Java你猿哥

Java spring SSM框架 spring ioc spring aoc

HTML5、Web引擎与跨平台移动App开发_HTML5_余枝强_InfoQ精选文章