主流的APP開發方式

市面上主流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，不和邏輯層通信。