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) views12292 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

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

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

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

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

  • HTTP/2背景和新特性简介

    在前面的一篇文章中已经介绍了

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

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

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

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...