最新更新

一個(gè)開源的快速混合開發(fā)框架：https://github.com/quickhybrid/quickhybrid

Android、iOS、JS三端內(nèi)容初步都已經(jīng)完成，有完善的設(shè)計(jì)思路、教程以及API文檔。

說明

Hybrid APP是目前廣泛流行的一種APP開發(fā)模式,本文對(duì)其做簡(jiǎn)單介紹

目錄

• 前言
  • 參考來源
  • 楔子
• Hybrid發(fā)家史
  • 突然興盛的H5
  • H5大行其道
  • H5滲入APP開發(fā)
  • Hybrid的興盛
• Hybrid概述
  • Hybrid定義
  • Hybrid App的類型劃分
• Hybrid架構(gòu)
  • 基本原理
  • 內(nèi)部的實(shí)現(xiàn)原理流程
• Hybrid的未來
  • 現(xiàn)行多種App開發(fā)模式以及分析比較
  • Hybrid面臨的挑戰(zhàn)

前言

參考來源

前人栽樹,后臺(tái)乘涼,本文參考了以下來源

• HTML5 APP----2014年H5沒火，why？2016年H5能火，why？
• 淺談Hybrid技術(shù)的設(shè)計(jì)與實(shí)現(xiàn)
• HybridApp解決方案_No1_混合模式(Hybrid)App開發(fā)概述
• 你真的了解Hybrid APP嗎
• 2016最新安卓版本分布
• hybrid app

楔子

現(xiàn)在概念上的APP誕生是在Google推出Android,Apple推出iOS后,從這時(shí)候開始,就有了App開發(fā)工程師這個(gè)職位,比如Android工程師,iOS工程師(當(dāng)然了,一些被歷史淘汰的,比如Symbian,win phone就暫不算進(jìn)來了)

最開的App開發(fā)只有原生開發(fā)這個(gè)概念,但自從H5廣泛流行后,一種效率更高的開發(fā)模式Hybrid應(yīng)運(yùn)而生,它就是"Hybrid模式",本文針對(duì)這種模式做簡(jiǎn)單介紹

Hybrid發(fā)家史

突然興盛的H5

Html5是在2014年9月份正式發(fā)布的,這一次的發(fā)布做了一個(gè)最大的改變就是-"從以前的XML子集升級(jí)成為一個(gè)獨(dú)立集合",也就是說,HTML5和之前的HTML是有很大區(qū)別的,這次自己不再是某門派的弟子傳人了,而是成為了開宗立派的祖師爺

子Html5發(fā)布開始,就慢慢開始掀起了一股H5狂潮,比如"微信朋友圈小游戲","圍住神經(jīng)貓"之類的,但是真正HTML5大火之際,應(yīng)該算是2015之后了,為什么,首先我們來看下谷歌公布的2015年2月份的Android系統(tǒng)版本分布情況

從上圖中我們可以看到Android4.0以上的市場(chǎng)占有率已經(jīng)接近90%,特別是4.4以上的比重已經(jīng)超過40%了,也就是說,我們這時(shí)候開發(fā)就已經(jīng)幾乎可以不考慮4.0以下的系統(tǒng)了,而4.0以上H5的支持是要遠(yuǎn)遠(yuǎn)高于4.0以下的。所以這時(shí)候就可以使用H5技術(shù)了

H5大行其道

我們先看下谷歌2016年4月份公布的Android系統(tǒng)占有率

我們可以看到,幾乎所有的設(shè)備都是4.0以上了,而且4.4以上已經(jīng)超過70%,特別是5.0以上都已經(jīng)超過40%了,而Android 4.4以上對(duì)H5的支持就已經(jīng)很不錯(cuò)了,所以我們幾乎以及可以肆無忌憚的使用H5了

H5滲入APP開發(fā)

我們都知道,原生APP開發(fā)中有一個(gè)webview的組件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),這個(gè)組件可以加載Html文件。

在Html5沒有興盛之前,加載的Html往往只能用來做一些簡(jiǎn)單的靜態(tài)資源顯示,但是H5大行其道以后,Html5中有很多新增的功能,炫酷的效果,特別是iOS中H5支持一直都很良好,Android 4.4以上支持也足夠,所以這時(shí)候發(fā)現(xiàn)可以將一些主要的邏輯都用H5頁面來編寫,然后原生直接用webview加載顯示,這樣大大提高了開發(fā)效率,而且體驗(yàn)也很不錯(cuò)

Hybrid的興盛

所謂Hybrid,即混合開發(fā),意味著半原生半Web,其實(shí)在H5興盛之前,Hybrid模式就已經(jīng)比較成熟了,但是一直不慍不火(因?yàn)橄到y(tǒng)的一些現(xiàn)在以及html本身功能的限制)

但是自從H5興盛之后,大家發(fā)現(xiàn)原來很多功能都可以用web來實(shí)現(xiàn),然后原生作為容器顯示,所以為了提高開發(fā)效率,越來越多的人使用Hybrid模式進(jìn)行開發(fā),越來越多的Hybrid開發(fā)框架,越來越多的前端專職成為Hybrid開發(fā),也就是說Hybrid也隨之興盛起來了

Hybrid概述

Hybrid定義

前面有提到Hybrid這種模式,那么它是怎么樣定義的呢？怎么樣的開發(fā)模式才算是Hybrid模式呢?

• Hybrid是半Native半web開發(fā)模式

  Hybrid模式中,底層功能API均由原生容器通過某種方式提供,然后業(yè)務(wù)邏輯由H5頁面完成,最終原生容器加載H5頁面,完成整個(gè)App

• 成熟的Hybrid模式意味著業(yè)務(wù)邏輯均由H5實(shí)現(xiàn)

  一款成熟的Hybrid框架,意味著各種類型的api都很完善,那么這時(shí)候幾乎所有與業(yè)務(wù)相關(guān)的邏輯都是放在H5頁面中的,原生只作為容器存在

• 成熟的Hybrid模式可復(fù)用性非常高,可以跨平臺(tái)開發(fā)

  成熟的Hybrid框架,那么原生只會(huì)提供底層API,也就是說所有的業(yè)務(wù)是H5完成,不管是什么項(xiàng)目,業(yè)務(wù)只由H5實(shí)現(xiàn),這時(shí)候就可以發(fā)現(xiàn),業(yè)務(wù)代碼是可以跨平臺(tái)的,也就是說,開發(fā)一次,就可以和各自原生容器結(jié)合,組成兩種原生安裝包了,達(dá)到了跨平臺(tái)開發(fā)效果

Hybrid App的類型劃分

上面提到過Hybrid的定義,但實(shí)際上,根據(jù)Native和web的混合程度,Hybrid也可以再次細(xì)分為多種類型(參考百科上的說法)

• 多View混合型

  這種模式主要特點(diǎn)是將webview作為Native中的一個(gè)view組件,當(dāng)需要的時(shí)候在獨(dú)立運(yùn)行顯示,也就是說主體是Native,web技術(shù)只是起來一些補(bǔ)充作用

  這種模式幾乎就是原生開發(fā),沒有降低什么難度,到了16年幾乎已經(jīng)沒人使用了

• 單View混合型

  這種模式是在同一個(gè)view內(nèi),同時(shí)包括Native view和webview(互相之間是層疊的關(guān)系),比如一些應(yīng)用會(huì)用H5來加載百度地圖作為整個(gè)頁面的主體內(nèi)容,然后再webview之上覆蓋一些原生的view,比如搜索什么的

  這種模式開發(fā)完成后體驗(yàn)較好,但是開發(fā)成本較大,一般適合一些原生人員使用

• Web主體型

  這種模式算是傳統(tǒng)意義上的Hybrid開發(fā),很多Hybrid框架都是基于這種模式的,比如PhoneGap,AppCan,Html5+等

  這種模式的一個(gè)最大特點(diǎn)是,Hybrid框架已經(jīng)提供各種api,打包工具,調(diào)試工具,然后實(shí)際開發(fā)時(shí)不會(huì)使用到任何原生技術(shù),實(shí)際上只會(huì)使用H5和js來編寫,然后js可以調(diào)用原生提供的api來實(shí)現(xiàn)一些拓展功能。往往程序從入口頁面,到每一個(gè)功能都是h5和js完成的

  理論上來說,這種模式應(yīng)該是最佳的一種模式(因?yàn)橛肏5和js編寫最為快速,能夠調(diào)用原生api,功能夠完善),但是由于一些webview自身的限制,導(dǎo)致了這種模式在性能上損耗不小,包括在一些內(nèi)存控制上的不足,所以導(dǎo)致體驗(yàn)要遜色于原生不少

  當(dāng)然了,如果能解決體驗(yàn)差問題,這種模式應(yīng)當(dāng)是最優(yōu)的(比如由于iOS對(duì)H5支持很好,iOS上的體驗(yàn)就很不錯(cuò))

• 多主體共存型（靈活型）

  這種模式的存在是為了解決web主體型的不足,這種模式的一個(gè)最大特點(diǎn)是,原生開發(fā)和h5開發(fā)共存,也就是說,對(duì)于一些性能要求很高的頁面模塊,用原生來完成,對(duì)于一些通用型模塊,用h5和js來完成

  這種模式通用有跨平臺(tái)特性,而且用戶體驗(yàn)號(hào),性能高,不遜色與原生,但是有一個(gè)很大的限制就是,采用這種模式需要一定的技術(shù)前提

  也就是說這種模式不同于web主體型可以直接用第三方框架,這種模式一般是一些有技術(shù)支持的公司自己實(shí)現(xiàn)的,包括H5和原生的通信,原生API提供,容器的一些處理全部由原生人員來完成,所以說,使用這種技術(shù)的前提是得有專業(yè)的原生人員(包括Android,iOS)以及業(yè)務(wù)開發(fā)人員(原生開發(fā)負(fù)責(zé)功能,前端解決簡(jiǎn)單通用h5功能)

  當(dāng)然了,如果技術(shù)上沒有問題,用這種方案開發(fā)出來的App體驗(yàn)是很好的,而且性能也不遜色原生,所以是一種很優(yōu)的方案

Hybrid架構(gòu)

基本原理

如下圖,痛過JSBridge,H5頁面可以調(diào)用Native的api,Native也可調(diào)用H5頁面的方法或者通知H5頁面回調(diào)

內(nèi)部的實(shí)現(xiàn)原理流程

知道了Hybrid的基本原理,那么Hybrid模式內(nèi)部是如何實(shí)現(xiàn)的呢?H5和Native直接的通信又是如何實(shí)現(xiàn)的呢?

請(qǐng)參考 后續(xù)系列文章

Hybrid的未來

現(xiàn)行多種App開發(fā)模式以及分析比較

現(xiàn)在的App開發(fā),除了Hybrid,還有Native,純web,React Native等方案,下面介紹下各種方案的分析對(duì)比

參考 Native、Hybrid、React Native、Web App方案的分析比較

Hybrid面臨的挑戰(zhàn)

比如Facebook推出的React Native方案,這是Facebook在放棄h5后自行推出一個(gè)'反H5方案',一句話總結(jié)就是:里面可以用JS來完整的寫一個(gè)原生應(yīng)用

比如微信推出的小程序(16年9月份內(nèi)測(cè)),這也是一個(gè)微信主導(dǎo)的'反H5方案',一句話總結(jié)就是:里面可以同JS+微信自制的UI方案來寫一個(gè)類似于原生的應(yīng)用,只不過這個(gè)應(yīng)用不是發(fā)布到App Store中,而是發(fā)布到微信中

像以上技術(shù)都不斷的在沖擊著Hybrid模式(當(dāng)然Native也會(huì)有影響),不過都很推崇JS(話說很多前端猿一直希望JS一統(tǒng)天下)

到現(xiàn)在為止,2016年已經(jīng)快過去了,新的技術(shù)也不斷的在涌出,各類的新技術(shù)都不斷的在沖擊著Hybrid模式的地位,正如一句話"長江后浪拍前浪,前浪*****",任何技術(shù)都會(huì)被時(shí)間無情的篩選,請(qǐng)不要奇怪,也許不久后的某天,你會(huì)突然發(fā)現(xiàn)Hybrid模式已經(jīng)完全落伍了。

轉(zhuǎn)載于:https://www.cnblogs.com/dailc/p/5930231.html

總結(jié)

以上是生活随笔為你收集整理的Hybrid APP基础篇(一)-什么是Hybrid App的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。