app四種開發模式的優缺點

app的四種開發模式：

1.原生App開發（Native App， 本地應用程式,包内頁面）；

2.網頁應用程式（Web App，移動web，包内頁面）。

3.采用Hybrid混合架構開發（Hybrid App，混合應用程式，雲端一體）；

4.采用ReactNative和WEEX等混合架構開發（混合App，包内頁面）。

Native App、React Native App、WEEX App都是app内頁面，無法實作動态修改頁面，他們的人員要求是3，2，2（一種語言的人算1的算法）。

Web App基于底層WebKit，若是app内頁面，也無法實作動态修改頁面。人員要求是2。

Hybrid App是雲端一體，所有頁面都在雲端，是以可以動态修改頁面。人員要求是人員要求是2，但是前期需要iOS、android開發人員釋出一個app殼。

Hybrid App可以實作移動五端合一。

隻是以把Hybrid App和ReactNative App、WEEX App分類為兩種不同的開發模式，是因為他們雖然都是混合app，但是Hybrid App是雲端一體，頁面都在雲端，不在app包内；而ReactNative App、WEEX App都是傳統的app包内頁面，這個是他們的本質差別。

1）Native App

傳統的原生APP開發模式，有iOS和android兩大系統，需要各自語言開發各自APP。

優點：性能和體驗都是最好的,實作華麗的動畫，流暢度最好

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

人員需求：需要背景、iOS、android三個方面的專業人員進行一個背景和兩個用戶端的開發和調試，人員要求最多。

頁面能否動态修改：用戶端的代碼包含在app包裡，若增加功能或修改顯示頁面需要重新釋出應用。不能動态修改頁面。

舉個例子：曹操專車，滴滴app

應用技術：Swift，Object C，JAVA

若是你對你應用的性能和使用者體驗要求很高，最好進行原生開發，原生開發沒有技術限制。

2）WebApp

移動端的網站，常被稱為H5應用，說白了就是特定運作在移動端浏覽器上的網站應用。一般泛指 SPA(Single Page Application)模式開發出的網站，與MPA（Multi-page Application，再後面做介紹）對應。當然有的WebApp也有用js語言寫的，采用webkit核心，用JNI調用底層C的接口。我2012年做的華為AnyOffice項目就是采用js寫的WebApp。當時混合開發國内還不流行，為了實作跨平台是以采用了基于webkit的WebApp。

優點：開發和釋出成本最低

人員需求：需要背景和 js前端開發專業開發人員，對iOS、android的技術要求很低，隻要了解基本技術的非專業人員就行，人員要求很少。

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

舉個例子：第一版本的AnyOffice

頁面能否動态修改：若用戶端的代碼包含在app包裡，若增加功能或修改顯示頁面需要重新釋出應用。不能動态修改頁面。當然有的WebApp可能也是網頁連接配接，那樣也能實作動态修改頁面，不過那樣就越來越像Hybrid App了。

應用技術：ReactJS，RegularJS等

3）Hybrid App

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

主要的原理是，由Native通過userContentController（JSBridge）等方法提供統一的API，然後用HTML+CSS實作界面，JS來寫邏輯，調用API，最終的頁面在WKWebview（UIWebview）中顯示，這種模式下，Android、iOS的API一般有一緻性，Hybrid App所有有跨平台效果。一般需要Android、iOS各做一個殼，背景會對他們兩者進行不同的處理。

優點：開發和釋出都比較友善，效率介于Native App、Web App之間。對Android、iOS技術要求不高，app的殼極少更新，找外包公司做就可以。做到app一年及以上不更新，頁面随時可以更新。

人員需求：需要背景和 js前端開發專業開發人員（要求最高），對iOS、android的殼開發和更新外包就可以極少更新，人員需求很少。适合做公衆好的公司再做app。人員要求比原生開發人員少三分之一，前期需要iOS、android開發人員釋出一個app殼。

缺點：頁面都在雲端，第一次打開頁面需要從雲端拉去，速度不如原生的和RN等app慢；需要原生配合。

舉個例子：網易雲音樂，藝享微拍app（我做的應用，由于公司經營方向變更已經下線）

頁面能否動态修改：app隻封裝一個首頁面連接配接和js處理不了的處理，主要頁面都是從伺服器上動态拉去的，是以它的頁面可以随時動态修改。

應用技術：PhoneGap，AppCan，Wex5，

除了要Android、iOS殼外，其它頁面大都是一個連接配接。當然若js實作不了功能可以通過userContentController（JSBridge）直接調用原生的方法（如：圖檔傳輸過程中的預處理，圖檔上傳，拍照）或跳轉到原生的頁面。能把原來的做公衆号的頁面快速轉換成app頁面，實作三端合一。多程序元件WKWebview要比多線程元件快三倍左右，建議使用WKWebview，但是由于WKWebview是多程序元件，存在cookie同步不及時的問題。通過NSURLProtocol進行頁面位址攔截進行app的原生處理與圖檔下載下傳與替換。由于WKWebview（UIWebview）具有緩存的功能，是以要想更新cs或js資源,js頁面需要給他們的位址後加一個版本号，更新版本号對應的資源就重新加載了。由于Hybrid App的首頁面是一個js頁面連接配接，是以它可以實作類似APICloud的強大動态更新頁面的功能。

APICloud是一款“雲端一體”的移動開發平台，信仰“雲端一體”的理念，重新定義了移動應用開發。APICloud為開發者從“雲”和“端”兩個方向提供API，簡化移動應用開發技術，讓移動應用的開發周期從一個月縮短到7天。APICloud由“雲API”和“端API”兩部分組成，可以幫助開發者快速實作移動應用的開發、測試、釋出、管理和營運的全生命周期管理。每一個頁面都帶有自己的cookies，不經過登入入口直接通路頁面，由于cookies不正确會打開頁面失敗。是以Hybrid App不是SPA網頁，而是對網頁通路合法性進行了嚴格校驗的網頁。

4）React Native App

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

優點：效率體驗接近Native App，釋出和開發成本低于Native App

人員需求：需要背景和 js前端開發專業開發人員，人員要求比原生開發人員少三分之一。

缺點：學習有一定成本，且文檔較少，免不了踩坑

舉個例子：Facebook、youtube、discord、QQ、百度等等

頁面能否動态修改：由于用戶端的代碼包含在app包裡，若增加功能或修改顯示頁面需要重新釋出應用。它是對Hybrid App存在很多缺陷和不足來實作了一份js端代碼代替Android、iOS兩端的代碼，并且打包到app包中。也正式它的頁面都在app包中，提高了速度，但是失去了頁面都在雲端的優勢，不能動态修改頁面。

WEEX App

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

優點：開發效率和體驗上跟RN不相上下，并且跨平台性更強

人員需求：需要背景和 js前端開發專業開發人員，人員要求比原生開發人員少三分之一。

缺點：剛剛起步，社群沒有RN活躍

舉個例子：淘寶、天貓、餓了麼等

頁面能否動态修改：由于用戶端的代碼包含在app包裡，若增加功能或修改顯示頁面需要重新釋出應用。它是對Hybrid App存在很多缺陷和不足來實作了一份js端代碼代替Android、iOS兩端的代碼，并且打包到app包中。也正式它的頁面都在app包中，提高了速度，但是失去了頁面都在雲端的優勢，不能動态修改頁面。當然熱更新被蘋果禁止了，不算熱更新的頁面動态修改。

WEEX App和React Native App都是app内頁面，他們的有缺點相當，不過React Native App普及率較高，WEEX App一般隻阿裡自己再使用。