HTML5、Hybrid APP、Native APP对比和技术选型

techbrood 发表于 2016-10-17 23:09:00

标签: react native, cordova, html5, 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开发。如果预算不限,希望通过更多的渠道接触用户,则可同时招iOSAndroid和HTML5。

6. 是否想开放应用程序中的内容以提高SEO

如果是,建议选择使用HTML5开发。

7. 是否是“通用”应用程序

比如外卖、项目管理、电商、博客这些,建议使用Hybrid APP或HTML5。

8. 是否想设计个性化

如果是,建议使用HTML5和本地应用,Hybrid APP通常是长相雷同的。


最后,我个人认为Hybrid APP就像是特色社会主义,是和现状妥协的产物,将在HTML5初级阶段长期存在。

远方依然在纯HTML5应用,而本地应用无论现在还是将来都仍会占据需要更多底层设备支持的领域(但也意味着空间将缩小)。


possitive(13) views12352 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • 更多...