市面上主流app開發框架對比包括:原生native、webapp、hybird、RN、weex、flutter、uni-app的總結和對比NativeApp使用原生語言開發的應用;性能和體驗都是最好,但開發和發布成本最高;常用的開發技術:Swift,OC,Java;WebApp移動端的網站,常被稱為H5應用,即運行在移動端瀏覽器的網站應用,壹般泛指SPA模式開發的網站,與MPA對應,代表:微信公眾號裏的H5應用(微信公眾號的H5又可以調用NativeAPI,也可以認為是HybridApp);開發和發布成本最低,但性能最差;常用的開發技術:VueJS、ReactJS等;HybridApp混合模式移動應用,介於WebApp、NativeApp兩者之間的App開發技術;原理:JS寫邏輯且可以通過JSBridge調用Native的API,用HTML+CSS編寫界面,並由webview渲染界面;渲染方式:webview渲染;JSBridge統壹封裝了IOS和Android的API,因此HybridApp具有跨平臺效果;JS邏輯的執行由webview內置的JS引擎決定,調用NativeAPI是通過JSBridge來實現;開發和發布成本介於NativeApp和WebApp之間。熱更新:支持常用開發技術:PhoneGap、ApiCloud、MUI、Wex5、AppCan等;ReactNativeAppRN是Facebook開發並開源的壹款UI框架,以解決Hybrid存在的缺陷與不足;原理:JS寫邏輯且運行在JS引擎中,底層自動把JS代碼解析成對應平臺(ios、安卓)的原生API,調用Native的API繪制原生UI,即原生渲染界面,這是與HybirdApp最大的不同,因此性能好於HybridApp。渲染方式:原生渲染;JS引擎為:ios為JSCore,andorid為v8,最新版rn開始在andorid上搞自己的js引擎Hermes界面:由JSX語言寫界面布局:Flexbox;基於的開發技術:ReactJS熱更新:支持;思想:learnonce,writeanywhere;註:不敢說writeonce,因為RN要針對ios和安卓各寫壹套代碼;WeexApp與ReactNativeApp類似,由阿裏開發並開源壹款UI框架;原理:跟RN類似;渲染方式:原生渲染跟RN最大不同:Weex寫壹套代碼即可運行在IOS和安卓中,RN要寫兩套代碼,IOS壹套,安卓壹套;JS引擎為:ios為JSCore,andorid為v8界面:由Vue編寫界面;布局:Flexbox;基於的開發技術:VueJS;熱更新:支持;思想:writeonce,runanywhere;註:微信小程序類似於RN/Weex開發方式,也分為邏輯層和視圖層;微信小程序的頁面屬於混合渲染,什麽是混合渲染?看後文總結;FlutterAPP由Google開發並開源的壹套UI框架,使用dart語言;邏輯和界面使用FlutterEngine;Flutter使用Engine來繪制Widget(Flutter的顯示單元),即Widget渲染界面,Dart代碼都是通過AOT(AheadOfTime)編譯為平臺的原生代碼,所以Flutter可以直接與平臺通信,不需要JS引擎的橋接。Widget是不可變的,僅支持壹幀,並且在每壹幀上不會直接更新,要更新而必須使用Widget的狀態。無狀態和有狀態widget的核心特性是相同的,每壹幀他們都會重新構建,有壹個State對象,它可以跨幀存儲狀態數據並恢復它。渲染方式:Widget渲染界面性能:FlutterAPP是除了NativeAPP以外性能最好的;熱更新:不支持;Uni-AppDCloud公司開發的壹款基於vue.js的跨端的框架;渲染方式:混合渲染、weex原生渲染、webview渲染。小程序和app-vue頁面屬於混合渲染,app-nvue頁面全部是weex原生渲染。H5全部為webview渲染;uni-app裏的App端原生插件,這類插件使用IOS或者Android原生語言編寫,封裝成插件,供其他開發者使用js來調用;原生插件分為原生組件component和原生模塊module;原生組件component只能在App-nvue頁面中使用;uni-app插件市場的大部分原生插件大部分屬於原生模塊module;uni-app開發app性能足夠好,用官方原話說是:點擊跳轉原文當然,uni-app的app引擎並沒有吊炸天。App平臺,所有跨平臺工具都還比不過原生,這是客觀事實。只是,如果uni-app不能滿足妳的需求,妳沒有必要去用其他跨平臺工具,直接上原生吧。筆者認為使用uni-app開發最大的好處就是省成本和不錯的生態:成本,包括學習成本、開發成本,時間成本,招人成本等;生態,包括開發者數量,社區活躍度,文檔是否齊全等;總結目前主流的3大渲染引擎有:webview、ReactNative/weex、Flutter,復雜程度依次降低、渲染性能依次上升混合渲染:主體為webview渲染,部分元素為原生渲染,比如導航欄、tabbar、video、map使用了原生控件例如:微信小程序,uniapp發布的app-vue頁面都屬於混合渲染;混合渲染雖然提升了性能,但也帶來了其他問題,點擊查看Flutter的邏輯層和視圖層統壹,運行在同壹套dart虛擬機下。rn和weex使用原生渲染,性能高於webview,但是同為原生渲染,rn和weex怎麽會慢於flutter呢?其實並不是原生渲染慢,而是js和原生通信慢rn和weex分為js引擎和原生渲染層兩個運行環境,當js引擎聯網獲取數據後,通知原生視圖層更新界面時,有壹個跨環境的通信折損。同樣,但用戶在屏幕上操作原生視圖層時,要給js引擎發送通知,也會產生通信折損。這個通信折損,普遍存在於所有邏輯和視圖分離的框架中,各家小程序因為也使用這個架構,所以也存在這個問題。因為flutter只有壹個dart引擎,所有沒有來回通信參數的性能問題,所以性能比rn和weex跟高;這個通信的折損特別表現在跟手勢的js響應操作繪制幀動畫,或者說js連續操作界面元素方面。場景如:界面可拖動的浮動球、可拖動的滑塊等。為了解決通信的折損,RN搞了lottie的動畫庫,weex搞了BindingX,微信小程序搞了wxs,百度小程序搞了Filter,阿裏小程序搞了SJS,uniapp若使用weex渲染時使用BindingX,使用app-vue時使用renderjs或wxs,renderjs和wxs是壹種運行在視圖層的js,不和邏輯層通信。
上一篇:電商系統開發費用壹般是多少下一篇:全新索納塔即將來襲,現款優惠3.2萬,抄底還是繼續觀望?