一句話概要
Native逻恐、Web App像吻、Hybrid、ReactNative（后面以RN簡(jiǎn)稱）复隆、WEEX間的異同點(diǎn)
APP常用開(kāi)發(fā)模式【簡(jiǎn)介】
此處APP為應(yīng)用拨匆，application，并非我們通常講的手機(jī)App
常用的幾種APP開(kāi)發(fā)模式-腦圖
Native App
傳統(tǒng)的原生APP開(kāi)發(fā)模式挽拂，有IOS和AOS兩大系統(tǒng)惭每，需要各自語(yǔ)言開(kāi)發(fā)各自APP。
優(yōu)點(diǎn)：性能和體驗(yàn)都是最好的
缺點(diǎn)：開(kāi)發(fā)和發(fā)布成本高
舉個(gè)栗子：網(wǎng)易管家APP （Tab1亏栈，Tab2）
應(yīng)用技術(shù)：Swift台腥，OC，JAVA
WebApp
移動(dòng)端的網(wǎng)站绒北，常被稱為H5應(yīng)用黎侈，說(shuō)白了就是特定運(yùn)行在移動(dòng)端瀏覽器上的網(wǎng)站應(yīng)用。一般泛指 SPA(Single Page Application)模式開(kāi)發(fā)出的網(wǎng)站闷游，與MPA（Multi-page Application峻汉，再后面做介紹）對(duì)應(yīng)贴汪。
優(yōu)點(diǎn)：開(kāi)發(fā)和發(fā)布成本最低
缺點(diǎn)：性能和體驗(yàn)不能講是最差的，但也受到瀏覽器處理能力的限制休吠，多次下載同樣會(huì)占用用戶一定的流量
舉個(gè)栗子：網(wǎng)易管家APP（Tab3）
應(yīng)用技術(shù)：ReactJS扳埂，RegularJS等
Hybrid App
混合模式移動(dòng)應(yīng)用，介于web-app瘤礁、native-app這兩者之間的app阳懂，兼具“Native App良好交互體驗(yàn)的優(yōu)勢(shì)”和“Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì)”（百度百科解釋）
主要的原理是，由Native通過(guò)JSBridge等方法提供統(tǒng)一的API柜思，然后用HTML+CSS實(shí)現(xiàn)界面希太，JS來(lái)寫(xiě)邏輯，調(diào)用API酝蜒，最終的頁(yè)面在webview中顯示誊辉，這種模式下，Android亡脑、iOS的API一般有一致性堕澄，Hybrid App所有有跨平臺(tái)效果。
優(yōu)點(diǎn)：開(kāi)發(fā)和發(fā)布都比較方便霉咨，效率介于Native App蛙紫、Web App之間
缺點(diǎn)：學(xué)習(xí)范圍較廣，需要原生配合
舉個(gè)栗子：網(wǎng)易云音樂(lè)途戒，我愛(ài)我家App
應(yīng)用技術(shù)：PhoneGap坑傅，AppCan，Wex5
React Native App
Facebook發(fā)現(xiàn)Hybrid App存在很多缺陷和不足喷斋，于是發(fā)起開(kāi)源的一套新的APP開(kāi)發(fā)方案RN App唁毒。。使用JSX語(yǔ)言寫(xiě)原生界面星爪，js通過(guò)JSBridge調(diào)用原生API渲染UI交互通信浆西。
優(yōu)點(diǎn)：效率體驗(yàn)接近Native App，發(fā)布和開(kāi)發(fā)成本低于Native App
缺點(diǎn)：學(xué)習(xí)有一定成本顽腾，且文檔較少近零，免不了踩坑
舉個(gè)栗子：Facebook、youtube抄肖、discord久信、QQ、百度等等
WEEX App
阿里巴巴開(kāi)發(fā)團(tuán)隊(duì)在RN的成功案例上漓摩，重新設(shè)計(jì)出的一套開(kāi)發(fā)模式裙士，站在了巨人肩膀上并有淘寶團(tuán)隊(duì)項(xiàng)目做養(yǎng)料，廣受關(guān)注幌甘，2016年4月正式開(kāi)源潮售，并在v2.0版本官方支持Vue.js，與RN分庭抗禮锅风。
優(yōu)點(diǎn)：開(kāi)發(fā)效率和體驗(yàn)上跟RN不相上下酥诽，并且跨平臺(tái)性更強(qiáng)
缺點(diǎn)：剛剛起步，社區(qū)沒(méi)有RN活躍
舉個(gè)栗子：淘寶皱埠、天貓肮帐、餓了么等
繼續(xù)剖析
Native App
Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android边器、WP并使用原生程式編寫(xiě)運(yùn)行的第三方應(yīng)用程序,也叫本地app训枢。一般使用的開(kāi)發(fā)語(yǔ)言為JAVA、C++忘巧、Objective-C恒界。
自iOS和Android這兩個(gè)的手機(jī)操作系統(tǒng)發(fā)布以來(lái)，在互聯(lián)網(wǎng)界從此就多了一個(gè)新的名詞：App意為運(yùn)行在智能的移動(dòng)終端設(shè)備第三方應(yīng)用程序)砚嘴。
Native App因?yàn)槲挥谄脚_(tái)層上方十酣，向下訪問(wèn)和兼容的能力會(huì)比較好一些，可以支持在線或離線际长，消息推送或本地資源訪問(wèn)耸采，攝像撥號(hào)功能的調(diào)取。但是由于設(shè)備碎片化工育，App的開(kāi)發(fā)成本要高很多虾宇，維持多個(gè)版本的更新升級(jí)比較麻煩，用戶的安裝門(mén)檻也比較高如绸。但是比較樂(lè)觀的是嘱朽，AppStore培養(yǎng)了一種比較好的用戶付費(fèi)模式，所以在Apple的生態(tài)圈里怔接，開(kāi)發(fā)者的盈利模式是一種明朗狀態(tài)燥翅，其他market也在往這條路上靠攏。
優(yōu)勢(shì)
1蜕提、相比于其它模式森书，提供最佳的用戶體驗(yàn)，最優(yōu)質(zhì)的用戶界面谎势，最華麗的交互
2凛膏、針對(duì)不同平臺(tái)提供不同體驗(yàn)
3、可節(jié)省帶寬成本脏榆，打開(kāi)速度更快
4猖毫、功能最為強(qiáng)大,特別是在與系統(tǒng)交互中,幾乎所有功能都能實(shí)現(xiàn)
劣勢(shì)
1、門(mén)檻高须喂，原生開(kāi)發(fā)人才稀缺吁断，至少比前端和后端少趁蕊，開(kāi)發(fā)環(huán)境昂貴
2、無(wú)法跨平臺(tái)仔役，開(kāi)發(fā)的成本比較大掷伙，各個(gè)系統(tǒng)獨(dú)立開(kāi)發(fā)
3、發(fā)布成本高又兵，需要通過(guò)store或market的審核任柜，導(dǎo)致更新緩慢
4、維持多個(gè)版本沛厨、多個(gè)系統(tǒng)的成本比較高宙地，而且必須做兼容
5、應(yīng)用市場(chǎng)逐漸飽和逆皮，怎么樣搶占用戶時(shí)間需要投入大量時(shí)間和金錢宅粥，這也導(dǎo)致“僵尸”App的增多
WebApp
說(shuō)到Web App不少人會(huì)聯(lián)想到WAP，或者有人認(rèn)為电谣，WAP就是WebApp粹胯，其實(shí)不然。
WebApp與WAP最直接的區(qū)別就是功能層面辰企。WAP更側(cè)重使用網(wǎng)頁(yè)技術(shù)在移動(dòng)端做展示风纠，包括文字、媒體文件等牢贸。而Web App更側(cè)重“功能”竹观，是使用網(wǎng)頁(yè)技術(shù)實(shí)現(xiàn)的App∏彼鳎總的來(lái)說(shuō)臭增，Web App就是運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上，基于網(wǎng)頁(yè)技術(shù)開(kāi)發(fā)實(shí)現(xiàn)特定功能的應(yīng)用竹习。
響應(yīng)式的大部分技術(shù)都是為實(shí)現(xiàn)WebApp能適配多類客戶端而設(shè)計(jì)的丐一。
Web網(wǎng)站一般分兩種寄纵，MPA(Multi-page Application)和SPA(Single-page Application)。而WebApp一般泛指SPA形式開(kāi)發(fā)出的網(wǎng)站。這樣更像是一個(gè)App牺勾。
優(yōu)勢(shì)
1怔蚌、可以跨平臺(tái)叉跛，調(diào)試方便
2靖避、無(wú)需安裝，不會(huì)占用手機(jī)內(nèi)存震放，而且更新速度最快
3宾毒、不存在多版本問(wèn)題，維護(hù)成本低
4殿遂、臨時(shí)入口诈铛，可以隨意嵌入
劣勢(shì)
1乙各、依賴于網(wǎng)絡(luò)，第一次訪問(wèn)頁(yè)面速度慢幢竹，耗費(fèi)流量
2耳峦、受限于手機(jī)和瀏覽器性能，用戶體驗(yàn)相較于其他模式最差
3妨退、功能受限，大量移動(dòng)端功能無(wú)法實(shí)現(xiàn)
4蜕企、入口強(qiáng)依賴于第三方瀏覽器咬荷，且只能以URL地址的形式存在，導(dǎo)致用戶留存率低（優(yōu)點(diǎn)即缺點(diǎn)）
Hybird App
混合開(kāi)發(fā)轻掩，也就是半原生半Web的開(kāi)發(fā)模式幸乒，由原生提供統(tǒng)一的API給JS調(diào)用，實(shí)際的主要邏輯有Html和JS來(lái)完成唇牧，最終是放在webview中顯示的罕扎，所以只需要寫(xiě)一套代碼即可達(dá)到跨平臺(tái)效果，另外也可以直接在瀏覽器中調(diào)試丐重，很方便腔召。最重要的是只需要一個(gè)前端人員稍微學(xué)習(xí)下JS api的調(diào)用即可。
Hybird App 的較早實(shí)踐者是PhoneGap扮惦，隨后遍地開(kāi)花臀蛛，如Titanium、Salama崖蜜、WeX5浊仆、Kerkee和國(guó)內(nèi)的AppCan，項(xiàng)目各有各的實(shí)現(xiàn)方式豫领，大致的原理基本相同抡柿。有幸在AppCan上海總部參與過(guò)一段時(shí)間的學(xué)習(xí)研究等恐，如下大致簡(jiǎn)介：
AppCan是基于HTML5技術(shù)的Hybird跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)工具洲劣。開(kāi)發(fā)者利用HTML5+CSS3+JavaScript技術(shù)，通過(guò)AppCan IDE集成開(kāi)發(fā)系統(tǒng)课蔬、云端打包器等闪檬，快速開(kāi)發(fā)出Android、iOS购笆、WP平臺(tái)上的移動(dòng)應(yīng)用粗悯。
AppCan的平臺(tái)構(gòu)成
在實(shí)際的APP開(kāi)發(fā)中，AppCan可以完成大部分的工作量同欠，如圖示：
AppCan將APP底層復(fù)雜的原生功能封裝在引擎样傍、插件中横缔，開(kāi)發(fā)者僅需調(diào)用接口、打包編譯衫哥，就可以獲得原生功能茎刚；靈活的插件擴(kuò)展機(jī)制。
開(kāi)發(fā)者可以像開(kāi)發(fā)WebApp一樣開(kāi)發(fā)app的視覺(jué)UI撤逢，以及絕大部分的交互膛锭，當(dāng)需要使用原生功能（如攝像頭，陀螺儀等功能）時(shí)蚊荣，只需要調(diào)用官方的API就可以輕松實(shí)現(xiàn)Native的效果初狰。至于JS和Native的通信，常用的有URL監(jiān)聽(tīng)和絕大部分Hybrid廠商使用的JSBridge通信互例，兩者原理相近奢入。
關(guān)于JsBridge的原理詳解，可見(jiàn)http://blog.csdn.net/xiangzhihong8/article/details/66970600
在Hybird概念盛行的時(shí)候媳叨，國(guó)內(nèi)外各大公司也參與了探索腥光，國(guó)外代表有Facebook、google糊秆、亞馬遜武福，國(guó)內(nèi)的有騰訊、阿里巴巴痘番、網(wǎng)易等艘儒，慢慢的他們發(fā)現(xiàn)Hybird嚴(yán)重受限于WebView的解析渲染效率，于是Facebook開(kāi)始了他的類原生的研究探索夫偶。
React Native App
請(qǐng)移駕 【筆記】React Native 快速入門(mén)筆記
Weex App
請(qǐng)移駕網(wǎng)易嚴(yán)選App感受Weex開(kāi)發(fā)
