H5和原生APP之间的区别

最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊。产品上线后,带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持android和IOS两种不同的APP,大大降低了开发成本。可实际的工作中却发现并不是如此,既不省事儿,又有很多BUG,而且各种css的兼容性的问题一大堆,更不要说动画点不到这些问题啦,真是一个坑比一个坑深啊。即使如此,虽然还是有很多问题没有很好的解决,为什么还是有很多H5汇合APP开发的人呢。这里要提到一个刚刚当了奶爸不久的扎克伯格——小扎同学。

早在2010年的时候,那个时候HTML5刚刚兴起不久,乔布斯就说HTML5将会成为取代Flash的下一个技术浪潮,从那个时候开始,很多大公司和有想法的创业公司都在试水并尝试不断的推动HTML5的发展。这里面就以Facebook的创始人最为炙热。他提出一定要尽可能的利用HTML5和Web App来打破iOS和Android的垄断,Facebook在信息浪潮的年代竟然用长达2年的时间潜心研发HTML5,投注大量的精力和物力。最终因HTML5自身技术问题导致经常出现bug,那对Facebook来说影响是不可估量的,因此差点引发被雅虎收购的命运。好在到2012年因为公司对市场上所有JS MVC框架都不满意以后,再加上借着重构Instagram网站的机会,才决定自己写一套,这个时候才从HTML5转向原生应用。

那说到H5和原生APP的差异,那什么是原生APP,什么是web APP?看到一个前辈解释的特别好,在这里和大家分享。

Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。

原生APP又称Native App,该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

那除了定义中提到两者的构成部分和读取数据的不同以外,还有哪些方面有区别呢?偶从以下几个方面简单阐述一下:

1、开发方面的区别(这个地方太专业啦,请教了团队的开发小伙伴)

目前React Native开发越来越火,微信小程序是基于React Native开发的,体验接近原生APP,发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件,也能顺利发布到苹果APP store。

移动Web App

  1、因为运行在移动设备的浏览器上,所以只需要一个开发项目

  2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)

  3、这里可没有标准的SDK,基本任意选择别忘了有一些跨平台的开发工具,比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

  1、每一种移动操作系统都需要独立的开发项目

  2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

  3、需要使用各自的软件开发包,开发工具以及各自的控件

2、能力方面的区别

移动Web App

  只能使用有限的移动硬件设备功能。

原生App

  能够与移动硬件设备的底层功能,比如个人信息,摄像头以及重力加速器等等。对于这一点感触很深刻,2016年做新年H5营销小活动的时候,就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

  移动Web App

  1、从移动设备上的浏览器访问

  2、不需要安装额外的软件

  3、软件更新只需要服务器就够了

  4、因为现在没有什么商品或卖场提供这种App,不过一般都是嵌套在系统内部,或者内部系             统中使用

    5、跨平台开发,用户不需要去卖场来下载安装App

6、需要过度依赖网络,没有任何缓存数据

7、任何时候都可以发布App,因为根本不需要官方卖场的审核

  8、如果你已经有了一个Web App,你可以使用 responsive web design来辅助改进(这也是优势?)

9、所有的用户都是用同样的版本

  原生App

  1、直接下载到设备

  2、以独立的应用程序运行(并不需要浏览器)

  3、用户必须手动去下载并安装这些原生App

  4、有一些商店与卖场来帮助用户寻找你的App,app store里面应有尽有。

  5、原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;

  6、手机用户无法上网也可访问APP应用中以前下载的数据。

  7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

  8、APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。

9、用户可以*地选择是否更新软件版本,所以会出现不同用户同时使用不同版本的情况

 关于两者的交互方式不同的地方,回头令起篇幅再述……

即使两者之间有很大的区别,即使H5有一大堆的坑和问题,但是仍旧不妨碍移动WEB无所不在,移动web是目前唯一的支持各种设备访问的平台,也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与PC系统任务有效的结合在一起。而原生native app可以充分利用设备的特性,这一点是它得天独厚的优势。所以,对于一个对于决策者来说,如果你是要做一款体验更好的产品的话,那Native App不妨是最佳的选择。当然如果你想尽快让你的产品占住一席之地的话,力求快速开发、低成本、多平台等等的话,那技术还有很多问题都没有很好解决的H5,也是不错的选择。正式因为它有复杂多变的CSS样式消耗了大量性能,它才有一个更有竞争力的优势——它带来了多样性的排版,能够细致到每一个字宽行高和风格的像素级处理,能够给你带来不一样的图文汇合的排版。我想这些更是H5的优异之处吧。

上一篇:解析JSON 注意解析数据为一个对象的情况.--加一下说明


下一篇:深入浅出CSS(二):关于雪碧图、background-position与steps函数的三角恋情