Hybrid APP基礎篇(一)->什麼是Hybrid App

時間 2019-11-20

標籤 hybrid app 基礎什麼欄目 Hybrid 简体版

原文原文鏈接

說明

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體驗是很好的,並且性能也不遜色原生,因此是一種很優的方案