混合開發(fā)調(diào)研

混合開發(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在WebView初始化過程中時,同步并行從服務(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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容