天天看點

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

       App常用開發模式簡介

此處App為應用application,并非我們通常講的手機App。

Native App

傳統的原生App開發模式,有iOS和aOS兩大系統,需要各自語言開發各自App。

優點:性能和體驗都是最好的。

缺點:開發和釋出成本高。

舉個栗子:網易管家App (https://id.163.com/gj/)

應用技術:Swift,OC,Java。

WebApp

移動端的網站,常被稱為H5應用,說白了就是特定運作在移動端浏覽器上的網站應用。一般泛指 SPA(Single Page Application)模式開發出的網站,與MPA(Multi-page Application)對應。

優點:開發和釋出成本最低。

缺點:性能和體驗不能講是最差的,但也受到浏覽器處理能力的限制,多次下載下傳同樣會占用使用者一定的流量。

舉個栗子:網易管家APP(https://id.163.com/gj/)

應用技術:ReactJS,RegularJS,VueJS等等。

回到頂部

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之間。

缺點:學習範圍較廣,需要原生配合。

舉個栗子:FanReact,我愛我家App,東方航空App,富國基金-富國錢包App

應用技術:PhoneGap,AppCan,Wex5,APICloud等。

回到頂部

React Native App

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

優點:效率體驗接近Native App,釋出和開發成本低于Native App。

缺點:學習有一定成本,且文檔較少,免不了踩坑。

舉個栗子:Facebook、Youtube、Discord、QQ、百度等等。

回到頂部

Weex App

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

優點:單頁開發模式效率極高,熱更新發包體積小,并且跨平台性更強。

缺點:剛剛起步,文檔欠缺;社群沒有RN活躍,功能尚不健全,暫不适合完全使用Weex開發App。

舉個栗子:淘寶、天貓、阿裡雲、優酷、閑魚、餓了麼等。

回到頂部

Native App

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

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

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

說到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

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

混合開發,也就是半原生半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應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

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

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

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

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

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

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

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

React Native App

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。

請移駕:【筆記】React Native 快速入門筆記(https://segmentfault.com/a/1190000010989345)。

Weex App

APP應用開發模式Native、Web App、Hybrid、React Native(簡稱RN)、Weex 間的異同點。