混合開發(fā)有三種方式

1. js和html打包在app里，內(nèi)容在webview里顯示
2. js代碼調(diào)用原生控件
3. 我們現(xiàn)在的開發(fā)方式，原生代碼+webview，定義一些交互方式

第一種方式：ionic github 32.6k stars

PhoneGap是一個封裝了js調(diào)用原生系統(tǒng)api的框架，比如相機，定位。
PhoneGap后來給apache維護了，改名叫Cordova

Ionic對Cordova（PhoneGap）再次封裝,包含了打包，調(diào)試，一套UI（相當于Bootstrap）

語法：Ionic1基于Angular1 Ionic2基于Angular2

優(yōu)點：

1. Web Android Ios可以用同一套代碼
2. 可以熱更新

缺點：

1. 本身還是基于webview，滑動，切換時還是有些卡頓
2. Angular1和Angular2不兼容，Angular2幾乎重寫了，現(xiàn)在最新版本是Angular4，Ionic2優(yōu)化體驗還不夠好，使用Ionic1又會面臨以后升級大量代碼要重寫，這是Angular本身的坑，Google自己都沒多少項目使用Angular（Angular默認使用TypeScript，點贊， 但是基于模版，相比React有很多模版語法）
3. 打出來的包比較大

第二種方式：React Native github 56.9k stars

這兩年很火的項目，語法基于React。有一套自己API，相當于這套API映射到原生的控件，所以最終調(diào)用的是原生控件，有接近原生控件的流暢度，
實現(xiàn)有兩種方式

1. 整體是ReactNative開發(fā)，部分ReactNative沒封裝的功能，比如友盟分享，需要分別調(diào)用Android和Ios的原生代碼。比如自定義控件，需要Android和Ios各自寫控件，然后ReactNative封裝。
2. 整體是原生App，由于RN可以熱更新，一些經(jīng)常要改的頁面，比如活動頁可以調(diào)用RN。缺點是引入RN會讓App包變大很多，不建議使用

優(yōu)點

1. 流暢度比webview好
2. React和Angular一樣，實現(xiàn)了數(shù)據(jù)綁定，代碼量少，js代碼不需要編譯，修改了代碼，刷新下界面就更新了，開發(fā)比原生快，更可以復用大部分代碼
3. 熱更新
4. React語法舒服
5. 社區(qū)活躍度比Ionic更好

缺點

1. 上手難度大，需要學習React語法
2. 三端代碼不可以用同一套。比如，前端用React 客戶端用ReactNative，React里標簽是<button>，ReactNative里標簽是<Button>,雖然業(yè)務(wù)邏輯的語法可以一樣，但是代碼不能完全復用。
   而且Android和Ios的代碼也不能用同一套，因為RN的原理是RN的API映射到Android和Ios的API，比如有的API已經(jīng)封裝了可以映射到Ios控件，但是Android這邊的映射有缺失，那Android這邊只能用另外的API，兩端大概可以復用80%的代碼
3. 流暢度還是不如原生，一方面js映射到原生控件有損失，一方面api沒有覆蓋所有原生控件，比如，Android這邊在界面切換的時候不是調(diào)用原生控件，而是用js實現(xiàn)的動畫，流暢度不好（可以改變界面切換動畫來規(guī)避）
4. 對于自定義控件需要ios和Android各自寫一套，然后用RN分別調(diào)用

第三種方式：VasSonic QQ今年開源的框架 github 6k stars

通常混合開發(fā)的時候需要下載H5，這個過程比較慢。Ionic是規(guī)避了這一點，把H5和Js打包到本地，但是要通過ajax請求數(shù)據(jù)。VasSonic的策略是加快H5下載。
VasSonic在內(nèi)容請求方面用了三招：

1. 動態(tài)緩存
2. 增量更新
3. 并行加載

通過對HTML內(nèi)容添加注釋來定義了一個自定義的格式，對HTML文檔進行分塊。動態(tài)緩存：指在頁面范圍內(nèi)，對分塊后的同容進行更細化(全局、局部)的緩存。

增量更新：有緩存的情況下，只對分塊后的局部內(nèi)容進行增量更新。

并行加載：VasSonic使用終端應用層原生傳輸通道取代系統(tǒng)瀏覽器內(nèi)核自身資源傳輸通道來請求頁面主資源。就是通過VasSonic在ＷebView初始化過程中時，同步并行從服務(wù)器加載頁面，而不是webview初始化后再去請求。

優(yōu)點

1. 原生+H5的方式和現(xiàn)在改動不大
2. 加載頁面快
3. 更新頁面最簡單

缺點

1. H5返回的內(nèi)容有自定義格式，需要后臺和客戶端都加入這個框架，侵入性太高。
   而且我們有很多第三方貸款平臺，他們的頁面沒做特殊處理，就體驗不到更快的加載速度（這一點Ionic和RN也一樣）
2. 還是基于webview，雖然加載快了，流暢度還是不如原生和RN

總結(jié)

1. 流暢度 RN>Ionic=VasSonic
2. 代碼復用 Ionic=VasSonic>RN
3. 熱更新 VasSonic>Ionic=RN (之前有appstore不準RN熱更新的傳言，不知道以后Ios會不會改變審核規(guī)則..)
4. 加載速度 RN=Ionic>VasSonic