混合開發(fā)調研

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

js和html打包在app里，內容在webview里顯示
js代碼調用原生控件
我們現(xiàn)在的開發(fā)方式妖谴，原生代碼+webview隙畜，定義一些交互方式

第一種方式：ionic github 32.6k stars

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

Ionic對Cordova（PhoneGap）再次封裝,包含了打包待错，調試，一套UI（相當于Bootstrap）

語法：Ionic1基于Angular1 Ionic2基于Angular2

優(yōu)點：

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

缺點：

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

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

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

整體是ReactNative開發(fā)，部分ReactNative沒封裝的功能悬而，比如友盟分享呜舒，需要分別調用Android和Ios的原生代碼。比如自定義控件笨奠，需要Android和Ios各自寫控件袭蝗，然后ReactNative封裝。
整體是原生App般婆，由于RN可以熱更新到腥，一些經(jīng)常要改的頁面，比如活動頁可以調用RN蔚袍。缺點是引入RN會讓App包變大很多乡范，不建議使用

優(yōu)點

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

缺點

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

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

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

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

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

增量更新：有緩存的情況下皿渗，只對分塊后的局部內容進行增量更新。

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