Hybrid APP 混合開發經驗總結《二》

幾種APP開發模式

概述

目前的APP開發模式注意有以下四大類型:

• Native App

  即傳統的原生APP開發模式,Android基于Java語言,底層調用Google的 API;iOS基于OC或者Swift語言,底層調用App官方提供的API。體驗最後。

• Web App

  即移動端的網站,将頁面部署在伺服器上,然後使用者使用各大浏覽器通路。一般泛指 SPA(Single Page Application)模式開發出的網站。體驗最差。

• Hybrid App

  即混合開發,由Native通過JSBridge等方法提供統一的API,然後用Html5+JS來寫實際的邏輯,調用API,這種模式下,由于Android,iOS的API一般有一緻性,而且最終的頁面也是在webview中顯示,所有有跨平台效果

• React Native App

  Facebook發起的開源的一套新的APP開發方案,使用JS+部分原生文法來實作功能。初次學習成本較高,但是在入門後,經過良好的封裝也能夠實作大部分的跨平台。而且體驗很好。

腦圖位址: http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70

Native App

即原生開發模式,開發出來的是原生程式,不同平台上,Android和iOS的開發方法不同,開發出來的是一個獨立的APP,能釋出應用商店,有如下優點和缺點

優點

• 直接依托于作業系統,互動性最強,性能最好

  相比于其它模式的互動,原生APP體驗是最優的

• 功能最為強大,特别是在與系統互動中,幾乎所有功能都能實作

  得益于原生是直接依托于系統的,是以可以直接調用官方提供的api,功能最為全面(比如本地資源操作,通知,動畫等)

缺點

• 開發成本高,無法跨平台,不同平台Android和iOS上都要各自獨立開發

  Android上基于Java開發,iOS上基于OC或Swift開發,互相之間獨立,必須要有各自的開發人員

• 門檻較高,原生人員有一定的入門門檻,相比廣大的前端人員而言,較少

  原生的一個很大特點就是獨立,是以不太容易入門,不像web前端一樣那麼廣泛,而且Android,iOS都需要獨立學習

• 更新緩慢,特别是釋出應用商店後,需要等到稽核周期

  原生應用更新是一個很大的問題,Android中還能直接下載下傳整包APK進行更新,但是iOS中,如果是釋出AppStore,必須通過AppStore位址更新,而每次更新都需要稽核,是以無法達到及時更新

• 維護成本高

  同開發一樣,項目上線後,維護起來也很為麻煩

Web App

即移動端的網站,将頁面部署在伺服器上,然後使用者使用各大浏覽器通路,不是獨立APP,無法安裝和釋出

Web網站一般分兩種,MPA(Multi-page Application)和SPA(Single-page Application)。而Web App一般泛指後面的SPA形式開發出的網站(因為可以模仿一些APP的特性),有如下優點和缺點

優點

• 開發成本低,可以跨平台,調試友善

  web app一般隻需要一個前端人員開發出一套代碼,然後即可應用于各大主流浏覽器(特殊情況可以代碼進行下相容),沒有新的學習成本,而且可以直接在浏覽器中調試

• 維護成本低

  同上,如果代碼合理,隻需要一名前端就可以維護多個web app

• 更新最為快速

  由于web app資源是直接部署在伺服器端的,是以隻需要替換伺服器端的檔案,使用者通路是就已經更新了(當然需要解決一些緩存問題)

• 無需安裝App,不會占用手機記憶體

  通過浏覽器即可通路,無需安裝,使用者就會比較願意去用

缺點

• 性能低,使用者體驗差

  由于是直接通過的浏覽器通路,是以無法使用原生的API,操作體驗不好

• 依賴于網絡,頁面通路速度慢,耗費流量

  Web App每次通路都需要去服務端加載資源通路,是以必須依賴于網絡,而且網速慢時通路速度很不理想,特别是在移動端,如果網站優化不好會無故消耗大量流量

• 功能受限,大量功能無法實作

  隻能使用Html5的一些特殊api,無法調用原生API,是以很多功能存在無法實作情況

• 臨時性入口,使用者留存率低

  這既是它的優點,也是缺點,優點是無需安裝,确定是用完後有時候很難再找到,或者說很難專門為某個web app留存一個入口,導緻使用者很難再次使用

Hybrid App

即混合開發,也就是半原生半Web的開發模式,有跨平台效果,當然了,實質最終釋出的仍然是獨立的原生APP(各種的平台有各種的SDK),有如下優點和缺點

優點

• 開發成本較低,可以跨平台,調試友善

  Hybrid模式下,由原生提供統一的API給JS調用,實際的主要邏輯有Html和JS來完成,而由于最終是放在webview中顯示的,是以隻需要寫一套代碼即可,達到跨平台效果,另外也可以直接在浏覽器中調試,很為友善

  最重要的是隻需要一個前端人員稍微學習下JS api的調用即可,無需兩個獨立的原生人員

  一般Hybrid中的跨平台最少可以跨三個平台:Android App,iOS App,普通webkit浏覽器

• 維護成本低,功能可複用

  同上,如果代碼合理,隻需要一名前端就可以維護多個app,而且很多功能還可以互相複用

• 更新較為自由

  雖然沒有web app更新那麼快速,但是Hybrid中也可以通過原生提供api,進行資源主動下載下傳,達到隻更新資源檔案,不更新apk(ipa)的效果

• 針對新手友好,學習成本較低

  這種開發模式下,隻需要前端人員關注一些原生提供的API,具體的實作無需關心,沒有新的學習内容,隻需要前端人員即可開發

• 功能更加完善,性能和體驗要比起web app好太多

  因為可以調用原生api,是以很多功能隻要原生提供出就可以實作,另外性能也比較接近原生了

• 部分性能要求的頁面可用原生實作

  這應該是Hybrid模式的最多一個好處了,因為這種模式是原生混合web,是以我們完全可以将互動強,性能要求高的頁面用原生寫,然後一些其它頁面用JS寫,嵌入webview中,達到最佳體驗

缺點

• 相比原生,性能仍然有較大損耗

  這種模式受限于webview的性能桎梏,相比原生而言有不少損耗,體驗無法和原生相比

• 不适用于互動性較強的app

  這種模式的主要應用是:一些新聞閱讀類,資訊展示類的app;但是不适用于一些互動較強或者性能要求較高的app(比如動畫較多就不适合)

React Native App

Facebook發起的開源的一套新的APP開發方案,Facebook在當初深入研究Hybrid開發後,覺得這種模式有先天的缺陷,是以果斷放棄,轉而自行研究,後來推出了自己的“React Native”方案,不同于H5,也不同于原生,更像是用JS寫出原生應用,有如下優點和缺點

其實很多大公司都已經轉React Native開發了,已經很成熟了

優點

• 雖然說開發成本大于Hybrid模式,但是小于原生模式,大部分代碼可複用

  相比于原生模式,這種模式是統一用JS寫代碼,是以往往隻需要一名成員投入學習,即可完成跨平台app的開發,而且後續代碼封裝的好,很多功能可複用

• 性能體驗高于Hybrid,不遜色與原生

  這種模式和Hybrid不一樣,Hybrid中的view層實際上還是dom,但是這種模式的view層是虛拟dom,是以性能要高于Hybrid,距離原生差距不大

  這種模式可以認為是用JS寫原生,即頁面用JS寫,然後原生通過Bridge技術分析JS,将JS内容單獨渲染成原生Android和iOS,是以也就是為什麼性能不遜色原生

• 開發人員單一技術棧,一次學習,跨平台開發

  這種模式是統一由JS編寫,有着獨特的文法,是以隻需要學習一次,即可同時開發Android和iOS

• 社群繁榮,遇到問題容易解決

  這應該是React Native的很大一個優勢,不像Hybrid模式和原生模式一樣各自為營,這種模式是Facebook統一發起的,是以有一個統一的社群,裡面有大量資源和活躍的人員,對開發者很友好

缺點

• 雖然可以部分跨平台,但并不是Hybrid中的一次編寫,兩次運作那種,而是不同平台代碼有所差別

  這種模式實際上還是JS來寫原生,是以Android和iOS中的原生代碼會有所差別,如果需要跨平台,對開發人員有一定要求

  當然了,如果發展了有一定時間,元件庫夠豐富了,那麼其實影響也就不大了,甚至會比Hybrid更快

• 開發人員學習有一定成本

  雖然社群已經比較成熟了,但是一個新的普通前端學習起來還是有一定學習成本的,無法像Hybrid模式一樣平滑

參考 http://reactnative.cn/

分析

各大開發模式直覺對比

以下是各大模式的直覺對比分析

對比表格

Native App	Web App	Hybrid App	React Native App
原生功能體驗	優秀	差	良好	接近優秀
渲染性能	非常快	慢	接近快	快
是否支援裝置底層通路	支援	不支援	支援	支援
網絡要求	支援離線	依賴網絡	支援離線(資源存本地情況)	支援離線
更新複雜度	高(幾乎總是通過應用商店更新)	低(伺服器端直接更新)	較低(可以進行資源包更新)	較低(可以進行資源包更新)
程式設計語言	Android(Java),iOS(OC/Swift)	js+html+css3	js+html+css3	主要使用JS編寫,文法規則JSX
社群資源	豐富(Android,iOS單獨學習)	豐富(大量前端資源)	有局限(不同的Hybrid互相獨立)	豐富(統一的活躍社群)
上手難度	難(不同平台需要單獨學習)	簡單(寫一次,支援不同平台通路)	簡單(寫一次,運作任何平台)	中等(學習一次,寫任何平台)
開發周期	長	短	較短	中等
開發成本	昂貴	便宜	較為便宜	中等
跨平台	不跨平台	所有H5浏覽器	Android,iOS,h5浏覽器	Android,iOS
APP釋出	App Store	Web伺服器	App Store	App Store

如何選擇開發模式

目前有多種開發模式,那麼我們平時開發時如何選擇用哪種模式呢？如下

選擇純Native App模式的情況

• 性能要求極高,體驗要求極好,不追求開發效率

  一般屬于吹毛求疵的那種級别了,因為正常來說如果要求不是特别高,會有Hybrid

選擇Web App模式的情況

• 不追求使用者體驗和性能,對離線通路沒要求

  正常來說,如果追求性能和體驗,都不會選用web app

• 沒有額外功能,隻有一些資訊展示

  因為web有限制,很多功能都無法實作,是以有額外功能就隻能棄用這種方案了

選擇Hybrid App模式的情況

• 大部分情況下的App都推薦采用這種模式

  這種模式可以用原生來實作要求高的界面,對于一些比較通用型,展示型的頁面完全可以用web來實作,達到跨平台效果,提升效率

  當然了,一般好一點的Hybrid方案,都會把資源放在本地的,可以減少網絡流量消耗

選擇React Native App模式的情況

• 追求性能,體驗,同時追求開發效率,而且有一定的技術資本,舍得前期投入

  React Native這種模式學習成本較高,是以需要前期投入不少時間才能達到較好水準,但是有了一定水準後,開發起來它的優勢就展現出來了,性能不遜色原生,而且開發速度也很快

另類的app方案

除了以上的幾種常見app開發模式,其實還有一些其它的類似方案

微網頁

比如在進行微信網頁開發時,可以調用一些微信的特殊api,這其實就是算是微信的Hybrid模式,實質上仍然是在浏覽器中(隻不過是騰訊的X5核心)

當然了,微信在這方面做了很多限制,比如權限認證等等,是以導緻開發起來效果不是很完美。這裡不再贅述其功能

微信小程式

微信小程式是微信新推出的一種新的app方案,2016年9月開始進行内測,2016年11月準備全面面向開發者

需要注意的是,這種模式是“反HTML5”的,相當于是微信提供的一套封閉開發模式,有自己的文法和IDE,有的類似于iOS開發的感覺。具體也不贅述,請參考引用來源中的文章

其它

當然除此外,還有一些其它的模式,比如“百度直達号”,"流應用"等等,這裡不再贅述

掃碼關注本人微信公衆号，有驚喜奧！公衆号每天定時發送精緻文章！回複關鍵詞可獲得海量各類程式設計開發學習資料！

例如：想獲得Python入門至精通學習資料，請回複關鍵詞Python即可。