HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。
比如Apache的Cordova(也就是以前的PhoneGap),其软件架构如下:
Cordova的工作原理是生成一个内置webview控件的容器app(这是个本地app),然后在webview中运行html/css/js的代码,
如需调用本地服务如相机/传感器,则通过JS本地桥接器来执行。
这种方式的混合APP本地化的比例很小,本质上和Web程序更为接近,因此性能不佳。
为了追求更好的性能和本地化体验,有些框架扔掉了WebView,而直接提供了UI组件的JS接口,架构如下:
这种混合APP本质上更接近移动本地应用,也因此需要针对不同的平台做定制开发。
后面这种解决方案主流的有微软的Xamarin、Facebook的React Native、Google的NativeScript。
那么在客户想要移动应用的时候,究竟该怎么选择呢?
基本上我们要准备一些问题,来帮助客户搞清楚实际想要的是什么,然后提出自己的建议。
1. 是否需要发布到应用商店
如果是,那么应该选择移动本地应用或Hybrid APP。
2. 是否要给APP定价
如果是,同上,只有应用商店才支持下载付费。
3. 是否需要调用传感器、相机等底层本地接口
如果是,同上,因为纯HTML5无法访问这些接口。
4. 性能是否是第一考虑要素
如果是,同上,因为用HTML5开发一个FPS游戏,操作响应会比较糟糕。
5. 项目预算
如果预算有限,那么可以优先选择使用HTML5开发。如果预算不限,希望通过更多的渠道接触用户,则可同时招iOS、Android和HTML5。
6. 是否想开放应用程序中的内容以提高SEO
如果是,建议选择使用HTML5开发。
7. 是否是“通用”应用程序
比如外卖、项目管理、电商、博客这些,建议使用Hybrid APP或HTML5。
8. 是否想设计个性化
如果是,建议使用HTML5和本地应用,Hybrid APP通常是长相雷同的。
最后,我个人认为Hybrid APP就像是特色社会主义,是和现状妥协的产物,将在HTML5初级阶段长期存在。
远方依然在纯HTML5应用,而本地应用无论现在还是将来都仍会占据需要更多底层设备支持的领域(但也意味着空间将缩小)。


最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
使用HTML5 Canvas实现的界面元素截屏功能
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
更多...