要了解移動(dòng)端跨平臺(tái)框架堡距，我們還是先要問(wèn)下猩系，什么是跨平臺(tái)媚送。
最常見(jiàn)的定義是：跨平臺(tái)就是開(kāi)發(fā)就是一套代碼寫(xiě)完以后可以多端發(fā)布運(yùn)行到各個(gè)平臺(tái)，比如：iOS寇甸、安卓塘偎、web。
而wiki上拿霉，是這么定義的吟秩。
In computing, cross-platform software (also multi-platform software or platform-independent software) is computer software that is implemented on multiple computing platforms.
按照跨平臺(tái)實(shí)現(xiàn)的方式可以分為兩類(lèi)：
- 一類(lèi)是需要為每一個(gè)平臺(tái)進(jìn)行單獨(dú)的構(gòu)建或者編譯
- 另一類(lèi)，是可以直接在多個(gè)平臺(tái)運(yùn)行
移動(dòng)端跨平臺(tái)框架
對(duì)于移動(dòng)端绽淘，常見(jiàn)跨平臺(tái)框架如下表所示涵防。其中React Native就是需要對(duì)IOS和Andriod平臺(tái)分別編譯。
近年移動(dòng)端跨平臺(tái)框架熱度分布沪铭，如圖所示壮池。圖片引用自Cross-platform mobile framworks used by developers worldwide 2019 and 2020
常見(jiàn)移動(dòng)端跨平臺(tái)框架對(duì)比
發(fā)現(xiàn)React native，F(xiàn)lutter伦意， Cordova較為流行火窒。我們也這三個(gè)框架進(jìn)行對(duì)比。
| 對(duì)比維度 | Apache Cordova | Ract Native | Flutter |
|---|---|---|---|
| 背后支持 | apple | ||
| 開(kāi)發(fā)語(yǔ)言 | 使用標(biāo)準(zhǔn)的html語(yǔ)言開(kāi)發(fā)（HTML5, JavaScript and CSS3.）驮肉，運(yùn)行在特定平臺(tái)的native wrappers上熏矿。 | 采用JS語(yǔ)言開(kāi)發(fā)，基于React | Dart語(yǔ)言開(kāi)發(fā)离钝，F(xiàn)lutter runs in the Dart virtual machine, which features a just-in-time (JIT) execution engine. |
| 支持平臺(tái) | （依賴(lài)web view component的多平臺(tái)支持） mobile – Android, iOS, Windows Phone; desktop – OS X, and Electron (which can be run on Windows, Linux, and OS X). 但也導(dǎo)致跨平臺(tái)或者跨設(shè)備的issue票编，需要特殊處理 |
Android and iOS | iOS and Android, web (beta), and desktop (technical preview) |
| 學(xué)習(xí)門(mén)檻 | low entry threshold （僅需要html，css卵渴，js知識(shí)） |
基于React慧域，對(duì)前端工程師更友好，學(xué)習(xí)曲線低 | “everything is a widget” 的理念與react.js和component-based JS frameworks相似浪读，對(duì)于熟悉這類(lèi)開(kāi)發(fā)工作的程序員有較淺的學(xué)習(xí)曲線 Dart需要重新學(xué)習(xí)昔榴，但是與typescript類(lèi)似 |
| UI design | 支持UI custom design | RN可以利用原生已有的優(yōu)秀UI RN控件轉(zhuǎn)換為對(duì)應(yīng)平臺(tái)原生控件的過(guò)程辛藻，IOS和Android存在一定的差異 |
UI在IOS和Android基本一致。支持Material, Cupertino or fully custom design. 但是Material, Cupertino UI的細(xì)節(jié)調(diào)整互订，較難實(shí)現(xiàn) |
| 組件 | 大多數(shù)能夠找到吱肌，少部分需要原生定制開(kāi)發(fā) | 大多數(shù)能夠找到，customized widgets需要自己實(shí)現(xiàn)仰禽，可以使用Dart開(kāi)發(fā)或者在原有widgets上開(kāi)發(fā) | |
| performance and responsiveness | heavily loaded interfaces can lead to performance bottlenecks | 有效率問(wèn)題,RN的渲染機(jī)制是基于前端框架的考慮,復(fù)雜的UI渲染是需要依賴(lài)多個(gè)view疊加 | 使用高性能渲染引擎來(lái)繪 制 widget氮墨，有更好的可控性,native-like performance |
| 與原生服務(wù)通信方式 | 在JavaScriptCore（js虛擬機(jī)）基礎(chǔ)上，封裝各平臺(tái)的應(yīng)用層接口吐葵，定義了 Javascript 和封裝后的接口之間的通信協(xié)議规揪。以RN的橋接方式和原生服務(wù)通信 | Flutter在跟系統(tǒng)service通信時(shí)，通過(guò) Skia 和各平臺(tái)的底層圖形庫(kù)對(duì)接温峭，同時(shí)提供豐富的基于 Skia 的控件猛铅，來(lái)實(shí)現(xiàn)跨平臺(tái)的開(kāi)發(fā)。 | |
| 安裝包 | iOS空項(xiàng)目 3M左右诚镰，Android20M左右 | iOS空項(xiàng)目 30M左右奕坟，Android空項(xiàng)目 7M左右 | |
| 啟動(dòng)速度 | 與原生相差無(wú)幾 | 較慢 | |
| 是否支持熱更新 | 支持 | 不支持 | |
| 是否支持混編 | 支持 | 支持 |
