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应用,而本地应用无论现在还是将来都仍会占据需要更多底层设备支持的领域(但也意味着空间将缩小)。
最新评论
- 相关文章
常用光照类型基本概念工作原理及其计算公式
在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
HTTP/2背景和新特性简介
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
更多...