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应用,而本地应用无论现在还是将来都仍会占据需要更多底层设备支持的领域(但也意味着空间将缩小)。
最新评论
- 相关文章
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
使用HTML5 Canvas实现的界面元素截屏功能
学习使用CSS制作进度条
进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope
深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...Three.js入门教程2 - 着色器(上)
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
更多...