Hybrid APP基础篇(一)-什么是Hybrid App
最新更新
一個開源的快速混合開發(fā)框架：https://github.com/quickhybrid/quickhybrid
Android、iOS、JS三端內(nèi)容初步都已經(jīng)完成，有完善的設(shè)計思路、教程以及API文檔。
說明
Hybrid APP是目前廣泛流行的一種APP開發(fā)模式,本文對其做簡單介紹
目錄
- 前言
- 參考來源
- 楔子
- Hybrid發(fā)家史
- 突然興盛的H5
- H5大行其道
- H5滲入APP開發(fā)
- Hybrid的興盛
- Hybrid概述
- Hybrid定義
- Hybrid App的類型劃分
- Hybrid架構(gòu)
- 基本原理
- 內(nèi)部的實現(xiàn)原理流程
- Hybrid的未來
- 現(xiàn)行多種App開發(fā)模式以及分析比較
- Hybrid面臨的挑戰(zhàn)
前言
參考來源
前人栽樹,后臺乘涼,本文參考了以下來源
- HTML5 APP----2014年H5沒火，why？2016年H5能火，why？
- 淺談Hybrid技術(shù)的設(shè)計與實現(xiàn)
- HybridApp解決方案_No1_混合模式(Hybrid)App開發(fā)概述
- 你真的了解Hybrid APP嗎
- 2016最新安卓版本分布
- hybrid app
楔子
現(xiàn)在概念上的APP誕生是在Google推出Android,Apple推出iOS后,從這時候開始,就有了App開發(fā)工程師這個職位,比如Android工程師,iOS工程師(當(dāng)然了,一些被歷史淘汰的,比如Symbian,win phone就暫不算進(jìn)來了)
最開的App開發(fā)只有原生開發(fā)這個概念,但自從H5廣泛流行后,一種效率更高的開發(fā)模式Hybrid應(yīng)運而生,它就是"Hybrid模式",本文針對這種模式做簡單介紹
Hybrid發(fā)家史
突然興盛的H5
Html5是在2014年9月份正式發(fā)布的,這一次的發(fā)布做了一個最大的改變就是-"從以前的XML子集升級成為一個獨立集合",也就是說,HTML5和之前的HTML是有很大區(qū)別的,這次自己不再是某門派的弟子傳人了,而是成為了開宗立派的祖師爺
子Html5發(fā)布開始,就慢慢開始掀起了一股H5狂潮,比如"微信朋友圈小游戲","圍住神經(jīng)貓"之類的,但是真正HTML5大火之際,應(yīng)該算是2015之后了,為什么,首先我們來看下谷歌公布的2015年2月份的Android系統(tǒng)版本分布情況
從上圖中我們可以看到Android4.0以上的市場占有率已經(jīng)接近90%,特別是4.4以上的比重已經(jīng)超過40%了,也就是說,我們這時候開發(fā)就已經(jīng)幾乎可以不考慮4.0以下的系統(tǒng)了,而4.0以上H5的支持是要遠(yuǎn)遠(yuǎn)高于4.0以下的。所以這時候就可以使用H5技術(shù)了
H5大行其道
我們先看下谷歌2016年4月份公布的Android系統(tǒng)占有率
我們可以看到,幾乎所有的設(shè)備都是4.0以上了,而且4.4以上已經(jīng)超過70%,特別是5.0以上都已經(jīng)超過40%了,而Android 4.4以上對H5的支持就已經(jīng)很不錯了,所以我們幾乎以及可以肆無忌憚的使用H5了
H5滲入APP開發(fā)
我們都知道,原生APP開發(fā)中有一個webview的組件(Android中是webview,iOS7以下有UIWebview,7以上有WKWebview),這個組件可以加載Html文件。
在Html5沒有興盛之前,加載的Html往往只能用來做一些簡單的靜態(tài)資源顯示,但是H5大行其道以后,Html5中有很多新增的功能,炫酷的效果,特別是iOS中H5支持一直都很良好,Android 4.4以上支持也足夠,所以這時候發(fā)現(xiàn)可以將一些主要的邏輯都用H5頁面來編寫,然后原生直接用webview加載顯示,這樣大大提高了開發(fā)效率,而且體驗也很不錯
Hybrid的興盛
所謂Hybrid,即混合開發(fā),意味著半原生半Web,其實在H5興盛之前,Hybrid模式就已經(jīng)比較成熟了,但是一直不慍不火(因為系統(tǒng)的一些現(xiàn)在以及html本身功能的限制)
但是自從H5興盛之后,大家發(fā)現(xiàn)原來很多功能都可以用web來實現(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頁面,完成整個App
- 成熟的Hybrid模式意味著業(yè)務(wù)邏輯均由H5實現(xiàn)
一款成熟的Hybrid框架,意味著各種類型的api都很完善,那么這時候幾乎所有與業(yè)務(wù)相關(guān)的邏輯都是放在H5頁面中的,原生只作為容器存在
- 成熟的Hybrid模式可復(fù)用性非常高,可以跨平臺開發(fā)
成熟的Hybrid框架,那么原生只會提供底層API,也就是說所有的業(yè)務(wù)是H5完成,不管是什么項目,業(yè)務(wù)只由H5實現(xiàn),這時候就可以發(fā)現(xiàn),業(yè)務(wù)代碼是可以跨平臺的,也就是說,開發(fā)一次,就可以和各自原生容器結(jié)合,組成兩種原生安裝包了,達(dá)到了跨平臺開發(fā)效果
Hybrid App的類型劃分
上面提到過Hybrid的定義,但實際上,根據(jù)Native和web的混合程度,Hybrid也可以再次細(xì)分為多種類型(參考百科上的說法)
- 多View混合型
這種模式主要特點是將webview作為Native中的一個view組件,當(dāng)需要的時候在獨立運行顯示,也就是說主體是Native,web技術(shù)只是起來一些補充作用
這種模式幾乎就是原生開發(fā),沒有降低什么難度,到了16年幾乎已經(jīng)沒人使用了
- 單View混合型
這種模式是在同一個view內(nèi),同時包括Native view和webview(互相之間是層疊的關(guān)系),比如一些應(yīng)用會用H5來加載百度地圖作為整個頁面的主體內(nèi)容,然后再webview之上覆蓋一些原生的view,比如搜索什么的
這種模式開發(fā)完成后體驗較好,但是開發(fā)成本較大,一般適合一些原生人員使用
- Web主體型
這種模式算是傳統(tǒng)意義上的Hybrid開發(fā),很多Hybrid框架都是基于這種模式的,比如PhoneGap,AppCan,Html5+等
這種模式的一個最大特點是,Hybrid框架已經(jīng)提供各種api,打包工具,調(diào)試工具,然后實際開發(fā)時不會使用到任何原生技術(shù),實際上只會使用H5和js來編寫,然后js可以調(diào)用原生提供的api來實現(xiàn)一些拓展功能。往往程序從入口頁面,到每一個功能都是h5和js完成的
理論上來說,這種模式應(yīng)該是最佳的一種模式(因為用H5和js編寫最為快速,能夠調(diào)用原生api,功能夠完善),但是由于一些webview自身的限制,導(dǎo)致了這種模式在性能上損耗不小,包括在一些內(nèi)存控制上的不足,所以導(dǎo)致體驗要遜色于原生不少
當(dāng)然了,如果能解決體驗差問題,這種模式應(yīng)當(dāng)是最優(yōu)的(比如由于iOS對H5支持很好,iOS上的體驗就很不錯)
- 多主體共存型（靈活型）
這種模式的存在是為了解決web主體型的不足,這種模式的一個最大特點是,原生開發(fā)和h5開發(fā)共存,也就是說,對于一些性能要求很高的頁面模塊,用原生來完成,對于一些通用型模塊,用h5和js來完成
這種模式通用有跨平臺特性,而且用戶體驗號,性能高,不遜色與原生,但是有一個很大的限制就是,采用這種模式需要一定的技術(shù)前提
也就是說這種模式不同于web主體型可以直接用第三方框架,這種模式一般是一些有技術(shù)支持的公司自己實現(xiàn)的,包括H5和原生的通信,原生API提供,容器的一些處理全部由原生人員來完成,所以說,使用這種技術(shù)的前提是得有專業(yè)的原生人員(包括Android,iOS)以及業(yè)務(wù)開發(fā)人員(原生開發(fā)負(fù)責(zé)功能,前端解決簡單通用h5功能)
當(dāng)然了,如果技術(shù)上沒有問題,用這種方案開發(fā)出來的App體驗是很好的,而且性能也不遜色原生,所以是一種很優(yōu)的方案
Hybrid架構(gòu)
基本原理
如下圖,痛過JSBridge,H5頁面可以調(diào)用Native的api,Native也可調(diào)用H5頁面的方法或者通知H5頁面回調(diào)
內(nèi)部的實現(xiàn)原理流程
知道了Hybrid的基本原理,那么Hybrid模式內(nèi)部是如何實現(xiàn)的呢?H5和Native直接的通信又是如何實現(xiàn)的呢?
請參考 后續(xù)系列文章
Hybrid的未來
現(xiàn)行多種App開發(fā)模式以及分析比較
現(xiàn)在的App開發(fā),除了Hybrid,還有Native,純web,React Native等方案,下面介紹下各種方案的分析對比
參考 Native、Hybrid、React Native、Web App方案的分析比較
Hybrid面臨的挑戰(zhàn)
比如Facebook推出的React Native方案,這是Facebook在放棄h5后自行推出一個'反H5方案',一句話總結(jié)就是:里面可以用JS來完整的寫一個原生應(yīng)用
比如微信推出的小程序(16年9月份內(nèi)測),這也是一個微信主導(dǎo)的'反H5方案',一句話總結(jié)就是:里面可以同JS+微信自制的UI方案來寫一個類似于原生的應(yīng)用,只不過這個應(yīng)用不是發(fā)布到App Store中,而是發(fā)布到微信中
像以上技術(shù)都不斷的在沖擊著Hybrid模式(當(dāng)然Native也會有影響),不過都很推崇JS(話說很多前端猿一直希望JS一統(tǒng)天下)
到現(xiàn)在為止,2016年已經(jīng)快過去了,新的技術(shù)也不斷的在涌出,各類的新技術(shù)都不斷的在沖擊著Hybrid模式的地位,正如一句話"長江后浪拍前浪,前浪*****",任何技術(shù)都會被時間無情的篩選,請不要奇怪,也許不久后的某天,你會突然發(fā)現(xiàn)Hybrid模式已經(jīng)完全落伍了。
轉(zhuǎn)載于:https://www.cnblogs.com/dailc/p/5930231.html
總結(jié)
以上是生活随笔為你收集整理的Hybrid APP基础篇(一)-什么是Hybrid App的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python群聊机器人_基于python
- 下一篇： Hybrid App