Hybrid APP基础篇(一)->什么是Hybrid App

时间 2019-11-20 标签 hybrid app 基础什么

说明

Hybrid APP是目前普遍流行的一种APP开发模式,本文对其作简单介绍git

前言

参考来源

前人栽树,后台乘凉,本文参考了如下来源github

楔子

如今概念上的APP诞生是在Google推出Android,Apple推出iOS后,从这时候开始,就有了App开发工程师这个职位,好比Android工程师,iOS工程师(固然了,一些被历史淘汰的,好比Symbian,win phone就暂不算进来了)web

最开的App开发只有原生开发这个概念,但自从H5普遍流行后,一种效率更高的开发模式Hybrid应运而生,它就是"Hybrid模式",本文针对这种模式作简单介绍小程序

Hybrid发家史

忽然兴盛的H5

Html5是在2014年9月份正式发布的,这一次的发布作了一个最大的改变就是-"从之前的XML子集升级成为一个独立集合",也就是说,HTML5和以前的HTML是有很大区别的,此次本身再也不是某门派的弟子传人了,而是成为了开宗立派的祖师爷api

子Html5发布开始,就慢慢开始掀起了一股H5狂潮,好比"微信朋友圈小游戏","围住神经猫"之类的,可是真正HTML5大火之际,应该算是2015以后了,为何,首先咱们来看下谷歌公布的2015年2月份的Android系统版本分布状况微信

从上图中咱们能够看到Android4.0以上的市场占有率已经接近90%,特别是4.4以上的比重已经超过40%了,也就是说,咱们这时候开发就已经几乎能够不考虑4.0如下的系统了,而4.0以上H5的支持是要远远高于4.0如下的。因此这时候就可使用H5技术了架构

H5大行其道

咱们先看下谷歌2016年4月份公布的Android系统占有率app

咱们能够看到,几乎全部的设备都是4.0以上了,并且4.4以上已经超过70%,特别是5.0以上都已经超过40%了,而Android 4.4以上对H5的支持就已经很不错了,因此咱们几乎以及能够肆无忌惮的使用H5了

H5渗入APP开发

咱们都知道,原生APP开发中有一个webview的组件(Android中是webview,iOS7如下有UIWebview,7以上有WKWebview),这个组件能够加载Html文件。

在Html5没有兴盛以前,加载的Html每每只能用来作一些简单的静态资源显示,可是H5大行其道之后,Html5中有不少新增的功能,炫酷的效果,特别是iOS中H5支持一直都很良好,Android 4.4以上支持也足够,因此这时候发现能够将一些主要的逻辑都用H5页面来编写,而后原生直接用webview加载显示,这样大大提升了开发效率,并且体验也很不错

Hybrid的兴盛

所谓Hybrid,即混合开发,意味着半原生半Web,其实在H5兴盛以前,Hybrid模式就已经比较成熟了,可是一直不愠不火(由于系统的一些如今以及html自己功能的限制)

可是自从H5兴盛以后,你们发现原来不少功能均可以用web来实现,而后原生做为容器显示,因此为了提升开发效率,愈来愈多的人使用Hybrid模式进行开发,愈来愈多的Hybrid开发框架,愈来愈多的前端专职成为Hybrid开发,也就是说Hybrid也随之兴盛起来了

Hybrid概述

Hybrid定义

前面有提到Hybrid这种模式,那么它是怎么样定义的呢？怎么样的开发模式才算是Hybrid模式呢?

Hybrid是半Native半web开发模式
Hybrid模式中,底层功能API均由原生容器经过某种方式提供,而后业务逻辑由H5页面完成,最终原生容器加载H5页面,完成整个App
成熟的Hybrid模式意味着业务逻辑均由H5实现
一款成熟的Hybrid框架,意味着各类类型的api都很完善,那么这时候几乎全部与业务相关的逻辑都是放在H5页面中的,原生只做为容器存在
成熟的Hybrid模式可复用性很是高,能够跨平台开发
成熟的Hybrid框架,那么原生只会提供底层API,也就是说全部的业务是H5完成,不论是什么项目,业务只由H5实现,这时候就能够发现,业务代码是能够跨平台的,也就是说,开发一次,就能够和各自原生容器结合,组成两种原生安装包了,达到了跨平台开发效果

Hybrid App的类型划分

上面提到过Hybrid的定义,但实际上,根据Native和web的混合程度,Hybrid也能够再次细分为多种类型(参考百科上的说法)

多View混合型
这种模式主要特色是将webview做为Native中的一个view组件,当须要的时候在独立运行显示,也就是说主体是Native,web技术只是起来一些补充做用

这种模式几乎就是原生开发,没有下降什么难度,到了16年几乎已经没人使用了
单View混合型
这种模式是在同一个view内,同时包括Native view和webview(互相之间是层叠的关系),好比一些应用会用H5来加载百度地图做为整个页面的主体内容,而后再webview之上覆盖一些原生的view,好比搜索什么的

这种模式开发完成后体验较好,可是开发成本较大,通常适合一些原生人员使用
Web主体型
这种模式算是传统意义上的Hybrid开发,不少Hybrid框架都是基于这种模式的,好比PhoneGap,AppCan,Html5+等

这种模式的一个最大特色是,Hybrid框架已经提供各类api,打包工具,调试工具,而后实际开发时不会使用到任何原生技术,实际上只会使用H5和js来编写,而后js能够调用原生提供的api来实现一些拓展功能。每每程序从入口页面,到每个功能都是h5和js完成的

理论上来讲,这种模式应该是最佳的一种模式(由于用H5和js编写最为快速,可以调用原生api,功可以完善),可是因为一些webview自身的限制,致使了这种模式在性能上损耗不小,包括在一些内存控制上的不足,因此致使体验要逊色于原生很多

固然了,若是能解决体验差问题,这种模式应当是最优的(好比因为iOS对H5支持很好,iOS上的体验就很不错)
多主体共存型（灵活型）
这种模式的存在是为了解决web主体型的不足,这种模式的一个最大特色是,原生开发和h5开发共存,也就是说,对于一些性能要求很高的页面模块,用原生来完成,对于一些通用型模块,用h5和js来完成

这种模式通用有跨平台特性,并且用户体验号,性能高,不逊色与原生,可是有一个很大的限制就是,采用这种模式须要必定的技术前提

也就是说这种模式不一样于web主体型能够直接用第三方框架,这种模式通常是一些有技术支持的公司本身实现的,包括H5和原生的通讯,原生API提供,容器的一些处理所有由原生人员来完成,因此说,使用这种技术的前提是得有专业的原生人员(包括Android,iOS)以及业务开发人员(原生开发负责功能,前端解决简单通用h5功能)

固然了,若是技术上没有问题,用这种方案开发出来的App体验是很好的,并且性能也不逊色原生,因此是一种很优的方案

Hybrid架构

基本原理

以下图,痛过JSBridge,H5页面能够调用Native的api,Native也可调用H5页面的方法或者通知H5页面回调

内部的实现原理流程

知道了Hybrid的基本原理,那么Hybrid模式内部是如何实现的呢?H5和Native直接的通讯又是如何实现的呢?

请参考后续系列文章

Hybrid的将来

现行多种App开发模式以及分析比较

如今的App开发,除了Hybrid,还有Native,纯web,React Native等方案,下面介绍下各类方案的分析对比

参考 Native、Hybrid、React Native、Web App方案的分析比较

Hybrid面临的挑战

好比Facebook推出的React Native方案,这是Facebook在放弃h5后自行推出一个'反H5方案',一句话总结就是:里面能够用JS来完整的写一个原生应用

好比微信推出的小程序(16年9月分内测),这也是一个微信主导的'反H5方案',一句话总结就是:里面能够同JS+微信自制的UI方案来写一个相似于原生的应用,只不过这个应用不是发布到App Store中,而是发布到微信中

像以上技术都不断的在冲击着Hybrid模式(固然Native也会有影响),不过都很推崇JS(话说不少前端猿一直但愿JS一统天下)

到如今为止,2016年已经快过去了,新的技术也不断的在涌出,各种的新技术都不断的在冲击着Hybrid模式的地位,正如一句话"长江后浪拍前浪,前浪*****",任何技术都会被时间无情的筛选,请不要奇怪,也许不久后的某天,你会忽然发现Hybrid模式已经彻底落伍了。