Native、Web App、Hybrid、ReactNative和WEEX的優劣

一句話概要

Native、Web App、Hybrid、ReactNative(後面以RN簡稱)、WEEX間的異同點

APP常用開發模式【簡介】

此處APP爲應用,application,並非我們通常講的手機App
常用的幾種APP開發模式-腦圖

Native App

傳統的原生APP開發模式,有IOS和AOS兩大系統,需要各自語言開發各自APP。

優點:性能和體驗都是最好的
缺點:開發和發佈成本高
舉個栗子網易管家APP (Tab1,Tab2)
應用技術:Swift,OC,JAVA

WebApp

移動端的網站,常被稱爲H5應用,說白了就是特定運行在移動端瀏覽器上的網站應用。一般泛指 SPA(Single Page Application)模式開發出的網站,與MPA(Multi-page Application,再後面做介紹)對應。

優點:開發和發佈成本最低
缺點:性能和體驗不能講是最差的,但也受到瀏覽器處理能力的限制,多次下載同樣會佔用用戶一定的流量
舉個栗子網易管家APP(Tab3)
應用技術:ReactJS,RegularJS等

Hybrid App

混合模式移動應用,介於web-app、native-app這兩者之間的app,兼具“Native App良好交互體驗的優勢”和“Web App跨平臺開發的優勢”(百度百科解釋)

主要的原理是,由Native通過JSBridge等方法提供統一的API,然後用HTML+CSS實現界面,JS來寫邏輯,調用API,最終的頁面在webview中顯示,這種模式下,Android、iOS的API一般有一致性,Hybrid App所有有跨平臺效果。

優點:開發和發佈都比較方便,效率介於Native App、Web App之間
缺點:學習範圍較廣,需要原生配合
舉個栗子網易雲音樂,我愛我家App
應用技術:PhoneGap,AppCan,Wex5

React Native App

Facebook發現Hybrid App存在很多缺陷和不足,於是發起開源的一套新的APP開發方案RN App。。使用JSX語言寫原生界面,js通過JSBridge調用原生API渲染UI交互通信。

優點:效率體驗接近Native App,發佈和開發成本低於Native App
缺點:學習有一定成本,且文檔較少,免不了踩坑
舉個栗子:Facebook、youtube、discord、QQ、百度等等

WEEX App

阿里巴巴開發團隊在RN的成功案例上,重新設計出的一套開發模式,站在了巨人肩膀上並有淘寶團隊項目做養料,廣受關注,2016年4月正式開源,並在v2.0版本官方支持Vue.js,與RN分庭抗禮。

優點:開發效率和體驗上跟RN不相上下,並且跨平臺性更強
缺點:剛剛起步,社區沒有RN活躍
舉個栗子:淘寶、天貓、餓了麼等

繼續剖析

Native App

 

Native App是一種基於智能手機本地操作系統如iOS、Android、WP並使用原生程式編寫運行的第三方應用程序,也叫本地app。一般使用的開發語言爲JAVA、C++、Objective-C。

自iOS和Android這兩個的手機操作系統發佈以來,在互聯網界從此就多了一個新的名詞:App意爲運行在智能的移動終端設備第三方應用程序)。

Native App因爲位於平臺層上方,向下訪問和兼容的能力會比較好一些,可以支持在線或離線,消息推送或本地資源訪問,攝像撥號功能的調取。但是由於設備碎片化,App的開發成本要高很多,維持多個版本的更新升級比較麻煩,用戶的安裝門檻也比較高。但是比較樂觀的是,AppStore培養了一種比較好的用戶付費模式,所以在Apple的生態圈裏,開發者的盈利模式是一種明朗狀態,其他market也在往這條路上靠攏。

優勢

1、相比於其它模式,提供最佳的用戶體驗,最優質的用戶界面,最華麗的交互
2、針對不同平臺提供不同體驗
3、可節省帶寬成本,打開速度更快
4、功能最爲強大,特別是在與系統交互中,幾乎所有功能都能實現

劣勢

1、門檻高,原生開發人才稀缺,至少比前端和後端少,開發環境昂貴
2、無法跨平臺,開發的成本比較大,各個系統獨立開發
3、發佈成本高,需要通過store或market的審覈,導致更新緩慢
4、維持多個版本、多個系統的成本比較高,而且必須做兼容
5、應用市場逐漸飽和,怎麼樣搶佔用戶時間需要投入大量時間和金錢,這也導致“殭屍”App的增多

WebApp

 

說到Web App不少人會聯想到WAP,或者有人認爲,WAP就是WebApp,其實不然。

WebApp與WAP最直接的區別就是功能層面。WAP更側重使用網頁技術在移動端做展示,包括文字、媒體文件等。而Web App更側重“功能”,是使用網頁技術實現的App。總的來說,Web App就是運行於網絡和標準瀏覽器上,基於網頁技術開發實現特定功能的應用。

響應式的大部分技術都是爲實現WebApp能適配多類客戶端而設計的。

Web網站一般分兩種,MPA(Multi-page Application)和SPA(Single-page Application)。而WebApp一般泛指SPA形式開發出的網站。這樣更像是一個App。

優勢

1、可以跨平臺,調試方便
2、無需安裝,不會佔用手機內存,而且更新速度最快
3、不存在多版本問題,維護成本低
4、臨時入口,可以隨意嵌入

劣勢

1、依賴於網絡,第一次訪問頁面速度慢,耗費流量
2、受限於手機和瀏覽器性能,用戶體驗相較於其他模式最差
3、功能受限,大量移動端功能無法實現
4、入口強依賴於第三方瀏覽器,且只能以URL地址的形式存在,導致用戶留存率低(優點即缺點)

Hybird App

 

混合開發,也就是半原生半Web的開發模式,由原生提供統一的API給JS調用,實際的主要邏輯有Html和JS來完成,最終是放在webview中顯示的,所以只需要寫一套代碼即可達到跨平臺效果,另外也可以直接在瀏覽器中調試,很方便。最重要的是只需要一個前端人員稍微學習下JS api的調用即可。

Hybird App 的較早實踐者是PhoneGap,隨後遍地開花,如Titanium、Salama、WeX5、Kerkee和國內的AppCan,項目各有各的實現方式,大致的原理基本相同。有幸在AppCan上海總部參與過一段時間的學習研究,如下大致簡介:

AppCan是基於HTML5技術的Hybird跨平臺移動應用開發工具。開發者利用HTML5+CSS3+JavaScript技術,通過AppCan IDE集成開發系統、雲端打包器等,快速開發出Android、iOS、WP平臺上的移動應用。

AppCan的平臺構成

 

在實際的APP開發中,AppCan可以完成大部分的工作量,如圖示:

 

AppCan將APP底層複雜的原生功能封裝在引擎、插件中,開發者僅需調用接口、打包編譯,就可以獲得原生功能;靈活的插件擴展機制。

開發者可以像開發WebApp一樣開發app的視覺UI,以及絕大部分的交互,當需要使用原生功能(如攝像頭,陀螺儀等功能)時,只需要調用官方的API就可以輕鬆實現Native的效果。至於JS和Native的通信,常用的有URL監聽和絕大部分Hybrid廠商使用的JSBridge通信,兩者原理相近。

JsBridge通信簡圖

關於JsBridge的原理詳解,可見http://blog.csdn.net/xiangzhihong8/article/details/66970600

在Hybird概念盛行的時候,國內外各大公司也參與了探索,國外代表有Facebook、google、亞馬遜,國內的有騰訊、阿里巴巴、網易等,慢慢的他們發現Hybird嚴重受限於WebView的解析渲染效率,於是Facebook開始了他的類原生的研究探索。

React Native App

請移駕 【筆記】React Native 快速入門筆記

Weex App

請移駕網易嚴選App感受Weex開發



作者:木羽zwwill
鏈接:https://www.jianshu.com/p/33246251cfae
來源:簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章