5款主流跨端開(kāi)發(fā)框架橫向?qū)Ρ龋?/h1>
點(diǎn)擊上方關(guān)注 前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步
跨平臺(tái)開(kāi)發(fā)框架到底哪家強(qiáng)？
目前市場(chǎng)上有多個(gè)專(zhuān)業(yè)做跨平臺(tái)開(kāi)發(fā)的框架，那么對(duì)開(kāi)發(fā)者來(lái)說(shuō)究竟哪一個(gè)框架更符合自己的需求呢？筆者特地總結(jié)對(duì)比了一下不同框架的特性。
國(guó)內(nèi)外筆者選擇了一共5個(gè)主流的測(cè)評(píng)對(duì)象，分別是RN，F(xiàn)lutter，Ionic，NativeScript，以及用友APICloud團(tuán)隊(duì)開(kāi)發(fā)的AVM。
目前來(lái)看比較火的應(yīng)該是 Flutter，次之 RN，具體還要看企業(yè)的應(yīng)用場(chǎng)景和領(lǐng)域，AVM，Ionic，NativeScript 在不少企業(yè)和個(gè)人開(kāi)發(fā)者中也使用率較高。
一，安裝環(huán)境，開(kāi)發(fā)工具對(duì)比。
任何框架的安裝環(huán)境都代表了這個(gè)框架對(duì)新手是否友好。所以筆者特別從安裝環(huán)境，開(kāi)發(fā)工具上介紹各個(gè)不同框架的情況，來(lái)比較一下，新人上手的成本和門(mén)檻，筆者是 MacOS 用戶，以下全文介紹的都是在 Mac 下的開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具。
1.1 React Native
RN 是Facebook于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，到現(xiàn)在已經(jīng)發(fā)展了6年多了，目前最新版本是0.66，2021年12月10日還有更新發(fā)布小版本，整體來(lái)看框架還是非常有生命力的。官網(wǎng)：https://reactnative.dev/
我們來(lái)看安裝環(huán)境和開(kāi)發(fā)工具，從最新的官網(wǎng)可以看到，如果只是上手的話還是比較方便的，只需要本地安裝 Nodejs 12版本以上就可以了。然后借助官網(wǎng)推薦的 Expo 工具可以快速搭建起來(lái)本地的一個(gè)開(kāi)發(fā)環(huán)境。因?yàn)楣P者是 MacOS 用戶，之前安裝過(guò) Xcode 所以整體安裝起來(lái)還算是流暢。
首先是 Nodejs 的命令行工具安裝：
yarn global add expo-cli
這里不說(shuō)配置源什么的了，如果慢的話，可以切換國(guó)內(nèi) yarn 源，安裝完畢后，直接使用
expo init AwesomeProject
安裝項(xiàng)目，項(xiàng)目安裝完畢后進(jìn)入項(xiàng)目執(zhí)行
yarn start
會(huì)重新安裝一次 expo-cli，之后本地啟動(dòng)項(xiàng)目，打開(kāi) dev 的瀏覽器界面如下，最左邊可以看到打開(kāi)的是本地的 expo 得調(diào)試臺(tái)，選擇本地 LAN 網(wǎng)絡(luò)，然后點(diǎn)擊 Run on iOS simulator，啟動(dòng)了筆者本地的一個(gè) iPhone 8的設(shè)備，然后看到了現(xiàn)在的界面，最右邊是本地生成的模板代碼。
編輯工具筆者用的 vscode，官方也是推薦 vscode。使用腳手架的生成的目錄和正常的 React 項(xiàng)目差不多，入口在 App.tsx 文件，支持修改后的 hotRload，整個(gè)流程走下來(lái)對(duì)前端開(kāi)發(fā)來(lái)說(shuō)門(mén)檻不高，至少到調(diào)試開(kāi)發(fā)階段，如果只單純涉及到 UI 編寫(xiě)，配置完直接就可以開(kāi)始干活了。
1.2 Flutter
Flutter 從出生（2018年發(fā)布v1.0）到現(xiàn)在也3年多了，是 Google 力推的跨端開(kāi)發(fā)框架，和 RN 不同的是開(kāi)發(fā)語(yǔ)言用的 Dart 而不是 JavaScript，官網(wǎng)在這里：https://flutter.dev/
最近幾年發(fā)展的比較猛，各大公司都在主端業(yè)務(wù)引入，包括筆者所在的公司也有很多業(yè)務(wù)使用 Flutter 進(jìn)行了 UI 部分的開(kāi)發(fā)，下邊筆者就簡(jiǎn)單介紹一下 Flutter 的開(kāi)發(fā)環(huán)境和工具。
首先肯定是需要下載安裝完整的 Xcode 和 Xcode developer tools開(kāi)發(fā)工具，默認(rèn)大家都裝了，之后不在贅述。
需要先下載 Flutter 的 SDK：https://docs.flutter.dev/development/tools/sdk/releases
解壓縮 SDK 后設(shè)置對(duì)應(yīng)的 SDK 環(huán)境變量地址：
cd ~/development
unzip ~/Downloads/flutter\_macos\_vX.X.X-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"
如果過(guò)程中遇到問(wèn)題可以使用 flutter doctor 來(lái)查看問(wèn)題進(jìn)行修復(fù)，有報(bào)錯(cuò)或者缺失環(huán)境，會(huì)有提示你如何修改，比較方便。
如果 flutter doctor 沒(méi)有報(bào)錯(cuò)的話，那么flutter 命令行就安裝完成了，我們來(lái)看一下開(kāi)發(fā)體驗(yàn)。
首先筆者都是用的 vscode 進(jìn)行開(kāi)發(fā)的，需要安裝官方推薦的 vscode 插件，直接在插件市場(chǎng)搜索 Flutter 安裝就可以了，之后就可以通過(guò)插件新建 Flutter 新項(xiàng)目了。
本地配置好對(duì)應(yīng)的 iOS 模擬器，在 vscode 左邊點(diǎn)擊調(diào)試按鈕選擇對(duì)應(yīng)的模擬器，就可以直接進(jìn)行開(kāi)發(fā)調(diào)試了。
截圖是筆者做的一個(gè)小應(yīng)用項(xiàng)目，目錄結(jié)構(gòu)也比較簡(jiǎn)單，在 lib 目錄下的 main.dart 就是入口文件，唯一缺憾的就是 Flutter 對(duì)前端開(kāi)發(fā)的語(yǔ)法不友好，Dart 雖然也不復(fù)雜，但是和 JavaScript 還是有比較多的出入的，需要一定時(shí)間的掌握和學(xué)習(xí)，而且對(duì)應(yīng)的不少系統(tǒng)類(lèi)庫(kù)用法也不太一樣。
整體來(lái)說(shuō)比 RN 要配置的復(fù)雜一些，對(duì)前端開(kāi)發(fā)來(lái)說(shuō)，Dart 語(yǔ)法是一個(gè)挑戰(zhàn)，編寫(xiě)應(yīng)用除了 Dart 之外還需要理解 Flutter 自己的狀態(tài)管理機(jī)制，widget 概念以及對(duì)應(yīng)的 material 相關(guān)庫(kù)的功能才能上手，對(duì)新人門(mén)檻還是比較高的。
1.3 Ionic
Drifty Co.在2013年推出了Ionic，可以說(shuō)是混合式開(kāi)發(fā)（hybrid）的鼻祖了，他推出之前大家一般都是在 PhoneGap 下開(kāi)發(fā)混合式開(kāi)發(fā)應(yīng)用，Ionic 一開(kāi)始是和 Angular 高度集成的，現(xiàn)在已經(jīng)支持了 React 和 Vue 集成，以及可以使用 Cordova 的庫(kù)，生態(tài)整體來(lái)說(shuō)還是不錯(cuò)的，優(yōu)點(diǎn)是 Web 技術(shù)為主，缺點(diǎn)也很明顯，Webview 的表現(xiàn)和性能與 RN，F(xiàn)lutter 那種編譯后轉(zhuǎn) Native Code 的性能對(duì)比肯定要差一些，一些 Web不支持的特性需要編寫(xiě)大量的原生插件來(lái)支持。
下邊來(lái)看一下他的安裝環(huán)境和開(kāi)發(fā)工具部分體驗(yàn)，首先安裝全局的cli 命令行工具，Nodejs 版本12.14以上。
npm install -g @ionic/cli
ionic start myIonicApp blank --type vue
ionic serve █
看起來(lái)還是比較簡(jiǎn)單，但是需要安裝的東西比較多，建議提前把 npm 設(shè)置成國(guó)內(nèi)源，否則要等很久很久很久。
使用 serve 之后，其實(shí)本地就是起了一個(gè) webpack-dev-server。
打開(kāi)8100地址，其實(shí)就是一個(gè)正常的 web 項(xiàng)目，熟悉 vue 的同學(xué)一眼就能看出來(lái)了，IonicVue是作為 Vue 的一個(gè)插件存在的。
那么看一下如何在模擬器上預(yù)覽吧，首先需要安裝下邊兩個(gè)工具，是前置依賴。
npm install -g ios-sim
brew install ios-deploy
然后在項(xiàng)目目錄先 build 項(xiàng)目，然后我們直接使用 Ionic Cli：
npm run build
ionic capacitor run ios -l --external
選擇一個(gè)本地的模擬器，之后就可以看到界面了，但是因?yàn)楣P者本地的 Xcode 是11的老版本，會(huì)報(bào)編譯錯(cuò)誤，所以需要升級(jí)到最新的Xcode12以上版本，但是筆者的 Xcode 升不上去了，因?yàn)楣P者的電腦系統(tǒng)不支持更高級(jí)別的 Xcode，所以后邊改成用 android 調(diào)試。
筆者之前安裝過(guò) android studio，需要更新SDK 到最新，然后在 tools 里找到 AVD 面板，創(chuàng)建一個(gè)模擬器。
啟動(dòng)后需要 adb devices 檢查一下，如果設(shè)備在線，再進(jìn)行下一步：
ionic capacitor add android
ionic capacitor run android
這一步第一次非常非常慢，應(yīng)該是和 ios 一樣，需要編譯成 apk 再同步到模擬器上。
最后的效果就是這樣，看到日志的最后幾行就是 deploy 了一個(gè)debug 的 apk 到模擬器了。
整體來(lái)說(shuō)，Ionic 的安裝步驟不算復(fù)雜，如果網(wǎng)絡(luò)比較好，整個(gè)過(guò)程不到半小時(shí)，如果是最新版的 MacOS 系統(tǒng)，升級(jí) Xcode 到最新版應(yīng)該也比較流暢。看了一下官網(wǎng)，debug 方式就是利用 chrome 或者 safari 的網(wǎng)頁(yè)調(diào)試工具調(diào)試，所以大家理解，這個(gè)Ionic 套殼了 webview，調(diào)試方法和 webview 調(diào)試方法是一致的。
1.4 NativeScript
NativeScript是由Progress 公司開(kāi)發(fā)的，已經(jīng)專(zhuān)注于開(kāi)發(fā)工具領(lǐng)域30多年的上市公司。整個(gè) NativeScript 的能力和它的名字一樣是專(zhuān)門(mén)為了 iOS 和 Android 而開(kāi)發(fā)的，但是寫(xiě)法卻是 JavaScript。和上面說(shuō)的 Ionic 不一樣是套殼 Webview，NativeScript 還是在 Js 和 Native 之間打通了一座橋梁，真正的使用 Native Code進(jìn)行頁(yè)面的渲染，這也使的它的表現(xiàn)能力比 Ionic 要強(qiáng)，從官網(wǎng)上看他也支持不同的 Web 框架寫(xiě)法，比如 Vue，React，包括 TS 支持，當(dāng)然用原生 JS和 HTML也可以編寫(xiě)，官網(wǎng)：https://nativescript.org/。
下邊看一下他的安裝環(huán)境和開(kāi)發(fā)工具體驗(yàn)，依然是 MacOS 系統(tǒng)環(huán)境搭建。
同樣是需要先安裝 NativeScript 的Cli 工具：
npm install -g nativescript
過(guò)程中會(huì)遇到從 codeload 下載依賴，可以設(shè)置代理或者修改 codeload 的 host 解決 ，筆者就遇到了，但這不是 nativescript 的問(wèn)題 ：）。
140.82.114.9 codeload.github.com
使用 ns 命令創(chuàng)建 NativeScript 項(xiàng)目：
ns create myNativescriptApp
選擇創(chuàng)建一個(gè) Vue 模板的空項(xiàng)目，命令行會(huì)交互式的引導(dǎo)你選擇，用 Vscode 打開(kāi)就可以編輯，目錄結(jié)構(gòu)和普通的 Vue 項(xiàng)目基本一樣，入口在 app 目錄下的 app.js，Vue 實(shí)例被 nativescript-vue 替代。
Run the project on multiple devices:
` `$ ns run ios
` `$ ns run android
Debug the project with Chrome DevTools:
` `$ ns debug ios
` `$ ns debug android
我們看一下在 android 下是什么樣子的，iOS 也是因?yàn)楸镜?Xcode 版本太老跑不起來(lái)，第一次編譯時(shí)間都比較久，需要耐心等待。
運(yùn)行起來(lái)后和 Ioinc 類(lèi)似，也是有個(gè) debug 的 apk 被裝到模擬器里了，測(cè)試了一下本地修改前端代碼，webpack 本地會(huì)進(jìn)行 watch 和 sync 到模擬器，實(shí)現(xiàn)熱更新，速度還可以，但是需要頻繁的冷起app才生效。
1.5 AVM
AVM 是由 APICloud 研發(fā)的一套跨端的 JavaScript 框架，全稱(chēng)（APICloud-View-Model），寫(xiě)法類(lèi) Vue 也兼容 React JSX，有雙向綁定，組件化和狀態(tài)管理支持，并配套了系統(tǒng)級(jí)別的 API，支持云端編譯和發(fā)布到不同的平臺(tái)，官網(wǎng)是：https://www.apicloud.com/AVMframe，有自己的開(kāi)發(fā) IDE支持，我看 2021 年12月份還有在更新SDK （2021-12-3），其中 JS Framework 部分是全部開(kāi)源的，包括 JS 組件庫(kù)。
我們來(lái)看一下他的安裝環(huán)境和開(kāi)發(fā)工具，首先需要注冊(cè) APICloud 賬號(hào)，因?yàn)樗麄兝^承了云端編譯的功能，而且ide也是需要賬號(hào)登陸同步代碼。然后下載官網(wǎng)的APICloud Studio 3，如果是 Mac 系統(tǒng)一定要注意，不能直接在 download 目錄打開(kāi)，需要復(fù)制到應(yīng)用程序文件夾內(nèi)再用。
下載后打開(kāi)，熟悉 vscode 的同學(xué)應(yīng)該能發(fā)現(xiàn)，這是一個(gè)基于 vscode 二次開(kāi)發(fā)的 IDE。
入口文件是 pages 目錄下的stml代碼文件，在上面右鍵實(shí)時(shí)預(yù)覽可以在右邊直接看效果，需要注意的是，這里只能預(yù)覽標(biāo)準(zhǔn)H5的組件及頁(yè)面效果，不能預(yù)覽原生API的功能，所以推薦要真實(shí)開(kāi)發(fā)的話，需要使用真機(jī)安裝AppLoader進(jìn)行調(diào)試，類(lèi)似RN的Expo。
AppLoader 的下載地址：https://docs.apicloud.com/Download/download#apploader
裝上之后保持Mac 和手機(jī)在同一網(wǎng)絡(luò)下，用 AppLoader 掃描IDE 中的二維碼就可以實(shí)時(shí)看到真機(jī)效果了。
在真機(jī)上像網(wǎng)絡(luò)，wifi 這些系統(tǒng)級(jí)別 API 就可以正常使用和預(yù)覽了，報(bào)錯(cuò)也會(huì)有提示，開(kāi)發(fā)體驗(yàn)很像小程序。
整體來(lái)說(shuō)開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具是一體的，流程比較順暢，全程也沒(méi)有鼓搗任何命令行工具，但要根據(jù)官網(wǎng)文檔的引導(dǎo)進(jìn)行使用。
1.6 總結(jié)
經(jīng)過(guò)對(duì)5個(gè)框架的初步講解，大家可以看出來(lái)基本上大家的開(kāi)發(fā)流程分成了兩類(lèi)，一類(lèi)是直接把 debug 包裝到手機(jī)上進(jìn)行開(kāi)發(fā)和調(diào)試，比如 Ioinc，NativeScript，還有 Flutter，另外一類(lèi)則是需要通過(guò)一個(gè)額外的 AppLoader 進(jìn)行輔助調(diào)試，比如 AVM，RN，當(dāng)然后者也支持直接安裝包到真機(jī)，但是 debug 的方式還是有所區(qū)別。
在開(kāi)發(fā)工具上，基本上大家都可以使用Vscode 進(jìn)行開(kāi)發(fā)，都支持 hotReload 功能，有些提供了自己的IDE，集成化程度比較高，比如 AVM。
二，性能比較。
下邊筆者就從性能角度講一下不同框架的對(duì)比情況，這個(gè)可能是大家最關(guān)注的了。筆者通過(guò)編寫(xiě)一個(gè)簡(jiǎn)單的超長(zhǎng)的 viewlist 來(lái)進(jìn)行橫向比較，代碼筆者放到這里了，https://github.com/xiaojue/ListViewDemo，后邊大家可以去參考，實(shí)現(xiàn)一個(gè)1000行的圖文列表，左圖右文。
RN 效果：
Flutter 效果：
Ionic 效果：
NativeScript 效果，這里NativeScript 開(kāi)發(fā)體驗(yàn)最爛，后邊會(huì)在 API 分析部分細(xì)說(shuō)：
AVM 下的效果：
代碼實(shí)現(xiàn)很簡(jiǎn)單，也沒(méi)有做特殊優(yōu)化，沒(méi)有滾動(dòng)加載，沒(méi)有交互事件，直接1000條數(shù)據(jù)搞滿，使用的都是官方 list 組件。
性能我們直接 adb shell 進(jìn)入設(shè)備后，使用 top命令來(lái)觀察 app 進(jìn)程情況：
其中幀數(shù)我們用android的開(kāi)發(fā)者功能，GPU截圖來(lái)標(biāo)識(shí)，編譯速度直接用 time 命令統(tǒng)計(jì), 均采用第一次debug啟動(dòng)耗時(shí)的時(shí)間。
比如：
time ns debug android
框架 內(nèi)存 CPU使用率 FPS debug編譯速度 RN（expo go） 300M 78%-116% 
0m32.229s Flutter 190M 37%-43% 0m21.336s Ionic 138M 49%-65% 0m55.549s
NativeScript 147M 19%~20% 0m27.862s AVM 122MB 6%-10% 
0m0.094s
簡(jiǎn)單分析一下，首先是內(nèi)存占用，基本都是100MB 以上，RN 和 Flutter 最多，AVM最少。然后是 CPU 占比，筆者一直下拉 list，看 CPU占用率，其中RN 是最高的，但是它的 fps 卻很低，這說(shuō)明 cpu 占用率越高說(shuō)明計(jì)算越多，但是 fps 底說(shuō)明沒(méi)有卡頓，性能更好。
比如我們看 Ionic 的 cpu 占用只有 RN 的一半，但是 fps 卻特別高，有很明顯卡頓。所以我們可以說(shuō) RN 的性能比 webview 渲染的 Ionic 要好很多，包括 NativeScript 和 AVM 也是這個(gè)道理，cpu 占比越高，而 fps 越底，那么性能就越好，可是cpu占用高也有個(gè)問(wèn)題就是會(huì)比較費(fèi)電…
最后我們?cè)倏淳幾g時(shí)間，這關(guān)系到調(diào)試體驗(yàn)，這里面AVM 最快，基本是毫秒級(jí)同步到真機(jī)，其他基本都是秒級(jí)的，需要跑build。當(dāng)然 Expo 和 AVM 都是有前置 Loader的，所以肯定比沒(méi)有 loader 程序的快一些。AVM 筆者也不太清楚為什么這么快，這確實(shí)是讓筆者很吃驚，但是有一點(diǎn)，AVM 在筆者的android模擬器上安裝失敗，所以筆者是用真機(jī)測(cè)評(píng)的，可能會(huì)有一些影響，真機(jī)的性能更高一些。
三，是否支持多端編譯（含小程序）。
這里的多端不僅僅指android，ios，h5，更包含了是否支持國(guó)內(nèi)的小程序編譯。因?yàn)楹芏喙灸壳暗臉I(yè)務(wù)場(chǎng)景都是需要在不同的APP里跑的，所以是否支持多端對(duì)我們國(guó)內(nèi)用戶來(lái)說(shuō)很重要，筆者特意增加了這一對(duì)比項(xiàng)。另外目前 PC 端的編譯各家也有支持，所以還另外增加了 windows，macOS 平臺(tái)的對(duì)比。
框架 Android iOS H5 小程序 windows desktop macOS
desktop
React Native √ √ √ alita，remax，Taro react-native-windows react-native-macOS Flutter √ √ √ MPFlutter √ √ Ionic √ √ √ X √ √ NativeScript √ √ X X X X AVM √ √ √ √ X X
整體調(diào)研的情況如上圖，對(duì)勾的部分就是官網(wǎng)直接支持編譯，叉號(hào)的意思就是官方不支持，也沒(méi)有什么比較成熟的開(kāi)源解決方案，而單獨(dú)寫(xiě)了一些框架支持的比如 RN，F(xiàn)lutter 是有一些還算成熟的開(kāi)源解決方案可以使用的。
整體來(lái)看，如果只開(kāi)發(fā) Android 和 iOS 應(yīng)用，這五個(gè)框架都沒(méi)什么問(wèn)題，如果要支持小程序和桌面軟件則要考慮更多，目前來(lái)看 RN 和 Flutter 生態(tài)是最完整的，次之是 Ionic，當(dāng)然如果您是以微信小程序?yàn)橹鞯拈_(kāi)發(fā)者并不考慮 desktop的情況下，那么 AVM 可能是更好的選擇。
四，生態(tài)情況。
4.1 開(kāi)源生態(tài)，流行度
我們直接用 NPMCompare 來(lái)對(duì)比，因?yàn)?Flutter 和 AVM 沒(méi)有在 NPM 上有對(duì)應(yīng)的包，后邊筆者單獨(dú)再列。
下載量上比，RN 遙遙領(lǐng)先，Ionic 和 NativeScript 都不夠看， RN絕對(duì)第一，Ionic 比 NativeScript 好一點(diǎn)，從 issues 上來(lái)看，NativeScript 好一點(diǎn)，但是可能是因?yàn)橛脩籼賹?dǎo)致的。Ionic 和 NativeScript 全加起來(lái)，還不如 RN一個(gè)零頭。
我們?cè)倏?Flutter 和 AVM，因?yàn)闆](méi)有找到對(duì)應(yīng)的包和下載量，我們摘取 statista.com 的數(shù)據(jù)來(lái)看一下 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/。
可以看出到得出的數(shù)據(jù)和我們上邊的結(jié)果類(lèi)似，Ionic 和 NativeScript 的總份額2021年只有16%+5%=21%，F(xiàn)lutter第一42%， RN第二38%。可以看到Flutter 從2019年到2021年逐步在上升，最終在2021年反超 RN。
以上是幾個(gè)主要框架的主倉(cāng)庫(kù)的對(duì)比情況，數(shù)據(jù)來(lái)自 https://www.githubcompare.com/ 從中可以看出來(lái)，從 stars 和 forks 上來(lái)說(shuō) Flutter 和 RN 基本就是老大和老二，從 open issues 上看RN 比 Flutter 更優(yōu)，時(shí)間上看大家都是7，8年前開(kāi)始做的，更新情況也差不多。
再?gòu)乃阉饕鏌嵩~上做一下分析。
圖片 從 Google Trends 的結(jié)果來(lái)看，國(guó)內(nèi) apicloud，ionic，nativescript 的熱度差不多，react native 和 flutter 今年對(duì)比來(lái)看，國(guó)內(nèi)更多的人開(kāi)始轉(zhuǎn)向 flutter。
4.2 API 支持，組件豐富程度
這部分從 API 層面對(duì)比五個(gè)框架對(duì)原生能力的支持情況和組件支持的情況。
前面筆者簡(jiǎn)單的開(kāi)發(fā)了個(gè) list 功能，我們下邊對(duì)比下各個(gè)框架的基礎(chǔ)組件個(gè)數(shù)（含布局組件）和API能力。
框架 組件個(gè)數(shù) 系統(tǒng)API/Plugin個(gè)數(shù) 開(kāi)發(fā)體驗(yàn) RN 34 33 React無(wú)縫切入 Flutter 171 104 Dart語(yǔ)法，有一定門(mén)檻和適應(yīng)時(shí)間 Ionic 90 291 支持 React，Vue，Angularjs，JS，TS 開(kāi)發(fā) NativeScript 31 87 實(shí)時(shí)調(diào)試能力太弱 AVM 31 219 實(shí)時(shí)調(diào)試能力強(qiáng)，類(lèi) Vue 語(yǔ)法兼容 React JSX
來(lái)源參考：
RN 組件：https://reactnative.dev/docs/components-and-apis
RN API：https://reactnative.dev/docs/accessibilityinfo
Flutter 組件：https://docs.flutter.dev/reference/widgets
Flutter API：https://api.flutter-io.cn/
Ionic 組件：https://ionicframework.com/docs/components
Ionic API：https://ionicframework.com/docs/native
NativeScript 組件：https://docs.nativescript.org/ui-and-styling.html
NativeScript API：https://docs.nativescript.org/api-reference/index.html
AVM 組件：https://docs.apicloud.com/apicloud3/
AVM API：https://docs.apicloud.com/Client-API/api
數(shù)據(jù)上雖然差別比較大，比如 RN 的 API 和組件數(shù)雖然少一些，但是都是按模塊劃分的。比如某單個(gè) API Class 下其實(shí)是有不少方法可以實(shí)現(xiàn)很多能力的。這里只列舉了數(shù)量，只是提供了一個(gè)比較粗略的，對(duì)學(xué)習(xí)成本的一個(gè)初步直觀的感覺(jué)，真的夠不夠用還是需要真實(shí)開(kāi)發(fā)過(guò)復(fù)雜應(yīng)用才有絕對(duì)話語(yǔ)權(quán)。
筆者覺(jué)得在開(kāi)發(fā)體驗(yàn)上，F(xiàn)lutter 是獨(dú)一檔的。因?yàn)?Dart 和TS，JS 都不太一樣，整個(gè) UI 開(kāi)發(fā)概念和前端還是有一些理念沖突。其他使用 JavaScript 技術(shù)開(kāi)發(fā)的框架，AVM，RN，Ionic 其實(shí)都還不錯(cuò)。但是 Ionic 支持使用各種不同 JS 庫(kù)來(lái)開(kāi)發(fā)，比如 React，Vue，NG 等，而 AVM 支持 Vue 、react語(yǔ)法特性， RN 則必須是 React。NativeScript 雖然也支持不同的前端框架開(kāi)發(fā)，但是整個(gè)開(kāi)發(fā)體驗(yàn)則是最差的，他的實(shí)時(shí)編譯，debug 功能以及布局系統(tǒng)真的很爛，筆者這里不推薦再入坑了，用戶少真的是有原因的，比如筆者這個(gè)初學(xué)者，看完他們的布局文檔就直接給勸退了。
而且縱觀所有框架，文檔寫(xiě)的最細(xì)致還是 RN 和 Flutter，AVM這三家。但是RN 和 Flutter 本土化程度不夠， Ionic 和 NativeScript 則是國(guó)內(nèi)資料比較少且文檔比較糊弄，而且都很久不更新了。
五，總結(jié)
雖然前面筆者從不同的角度分析了各個(gè)框架的情況，比如上手，開(kāi)發(fā)環(huán)境以及簡(jiǎn)單的性能對(duì)比，生態(tài)情況等。但是對(duì)于這些框架來(lái)說(shuō)，其實(shí)還有很多研究的空間，這篇文章只是客觀的記錄了筆者對(duì)不同框架初次上手和調(diào)研情況的一個(gè)過(guò)程。所以難免有一些地方不夠全面，但已基本反映出現(xiàn)狀。
從性能上看AVM 的開(kāi)發(fā)體驗(yàn)和編譯速度，性能表現(xiàn)都非常好，雖然是國(guó)產(chǎn)的框架但是不比國(guó)外的要差，其次是Flutter，RN，最后是 Ionic 和 NativeScript。
從開(kāi)發(fā)體驗(yàn)上來(lái)說(shuō)，比較舒服的是RN，Ionic這兩個(gè)，其次是Flutter和 AVM，F(xiàn)lutter 是因?yàn)?Dart 語(yǔ)法，但需要單獨(dú)學(xué)習(xí)，中小企業(yè)選型以及個(gè)人開(kāi)發(fā)者需要考慮；而 AVM 則不支持 TS和其他語(yǔ)言框架，只支持 JS 語(yǔ)法。最差的是 NativeScript，基本上沒(méi)法實(shí)時(shí)調(diào)試，API 也非常的不友好。
總結(jié)下來(lái)，筆者覺(jué)得2021年最火的當(dāng)屬 Flutter，已經(jīng)趕超了 RN。整體上看國(guó)內(nèi)外用戶目前的選擇和份額也大部分被 Flutter和 RN 瓜分殆盡。其他框架中 AVM和 Ionic 各有優(yōu)勢(shì)，但是從使用體驗(yàn)，上手難度，社區(qū)情況來(lái)看，國(guó)內(nèi)的 AVM 肯定更適合國(guó)內(nèi)開(kāi)發(fā)者一些，畢竟有本土化，云端集成，而且debug體驗(yàn)也很驚艷。
所以大廠直接上 Flutter 是沒(méi)有問(wèn)題的，Dart 沒(méi)有太大難度，這部分成本不是問(wèn)題。而其他公司和個(gè)人開(kāi)發(fā)者如果做國(guó)內(nèi)市場(chǎng)選擇 AVM，RN 還是比較合適的（相比較 NativeScript 和 Ionic，AVM天然支持國(guó)內(nèi)的小程序，是重要加分項(xiàng)，而 RN的文檔，生態(tài)則比較多），最后如果考慮 desktop 的適配，那么 Flutter 看起來(lái)就更合適一些了。
The End
歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，記得點(diǎn)個(gè) 「在看」哦
點(diǎn)個(gè)『在看』支持下 
瀏覽
116
點(diǎn)擊上方關(guān)注 前端技術(shù)江湖，一起學(xué)習(xí)，天天進(jìn)步
跨平臺(tái)開(kāi)發(fā)框架到底哪家強(qiáng)？
目前市場(chǎng)上有多個(gè)專(zhuān)業(yè)做跨平臺(tái)開(kāi)發(fā)的框架，那么對(duì)開(kāi)發(fā)者來(lái)說(shuō)究竟哪一個(gè)框架更符合自己的需求呢？筆者特地總結(jié)對(duì)比了一下不同框架的特性。
國(guó)內(nèi)外筆者選擇了一共5個(gè)主流的測(cè)評(píng)對(duì)象，分別是RN，F(xiàn)lutter，Ionic，NativeScript，以及用友APICloud團(tuán)隊(duì)開(kāi)發(fā)的AVM。
目前來(lái)看比較火的應(yīng)該是 Flutter，次之 RN，具體還要看企業(yè)的應(yīng)用場(chǎng)景和領(lǐng)域，AVM，Ionic，NativeScript 在不少企業(yè)和個(gè)人開(kāi)發(fā)者中也使用率較高。
一，安裝環(huán)境，開(kāi)發(fā)工具對(duì)比。
任何框架的安裝環(huán)境都代表了這個(gè)框架對(duì)新手是否友好。所以筆者特別從安裝環(huán)境，開(kāi)發(fā)工具上介紹各個(gè)不同框架的情況，來(lái)比較一下，新人上手的成本和門(mén)檻，筆者是 MacOS 用戶，以下全文介紹的都是在 Mac 下的開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具。
1.1 React Native
RN 是Facebook于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，到現(xiàn)在已經(jīng)發(fā)展了6年多了，目前最新版本是0.66，2021年12月10日還有更新發(fā)布小版本，整體來(lái)看框架還是非常有生命力的。官網(wǎng)：https://reactnative.dev/
我們來(lái)看安裝環(huán)境和開(kāi)發(fā)工具，從最新的官網(wǎng)可以看到，如果只是上手的話還是比較方便的，只需要本地安裝 Nodejs 12版本以上就可以了。然后借助官網(wǎng)推薦的 Expo 工具可以快速搭建起來(lái)本地的一個(gè)開(kāi)發(fā)環(huán)境。因?yàn)楣P者是 MacOS 用戶，之前安裝過(guò) Xcode 所以整體安裝起來(lái)還算是流暢。
首先是 Nodejs 的命令行工具安裝：
yarn global add expo-cli
這里不說(shuō)配置源什么的了，如果慢的話，可以切換國(guó)內(nèi) yarn 源，安裝完畢后，直接使用
expo init AwesomeProject
安裝項(xiàng)目，項(xiàng)目安裝完畢后進(jìn)入項(xiàng)目執(zhí)行
yarn start
會(huì)重新安裝一次 expo-cli，之后本地啟動(dòng)項(xiàng)目，打開(kāi) dev 的瀏覽器界面如下，最左邊可以看到打開(kāi)的是本地的 expo 得調(diào)試臺(tái)，選擇本地 LAN 網(wǎng)絡(luò)，然后點(diǎn)擊 Run on iOS simulator，啟動(dòng)了筆者本地的一個(gè) iPhone 8的設(shè)備，然后看到了現(xiàn)在的界面，最右邊是本地生成的模板代碼。
編輯工具筆者用的 vscode，官方也是推薦 vscode。使用腳手架的生成的目錄和正常的 React 項(xiàng)目差不多，入口在 App.tsx 文件，支持修改后的 hotRload，整個(gè)流程走下來(lái)對(duì)前端開(kāi)發(fā)來(lái)說(shuō)門(mén)檻不高，至少到調(diào)試開(kāi)發(fā)階段，如果只單純涉及到 UI 編寫(xiě)，配置完直接就可以開(kāi)始干活了。
1.2 Flutter
Flutter 從出生（2018年發(fā)布v1.0）到現(xiàn)在也3年多了，是 Google 力推的跨端開(kāi)發(fā)框架，和 RN 不同的是開(kāi)發(fā)語(yǔ)言用的 Dart 而不是 JavaScript，官網(wǎng)在這里：https://flutter.dev/
最近幾年發(fā)展的比較猛，各大公司都在主端業(yè)務(wù)引入，包括筆者所在的公司也有很多業(yè)務(wù)使用 Flutter 進(jìn)行了 UI 部分的開(kāi)發(fā)，下邊筆者就簡(jiǎn)單介紹一下 Flutter 的開(kāi)發(fā)環(huán)境和工具。
首先肯定是需要下載安裝完整的 Xcode 和 Xcode developer tools開(kāi)發(fā)工具，默認(rèn)大家都裝了，之后不在贅述。
需要先下載 Flutter 的 SDK：https://docs.flutter.dev/development/tools/sdk/releases
解壓縮 SDK 后設(shè)置對(duì)應(yīng)的 SDK 環(huán)境變量地址：
cd ~/development
unzip ~/Downloads/flutter\_macos\_vX.X.X-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"
如果過(guò)程中遇到問(wèn)題可以使用 flutter doctor 來(lái)查看問(wèn)題進(jìn)行修復(fù)，有報(bào)錯(cuò)或者缺失環(huán)境，會(huì)有提示你如何修改，比較方便。
如果 flutter doctor 沒(méi)有報(bào)錯(cuò)的話，那么flutter 命令行就安裝完成了，我們來(lái)看一下開(kāi)發(fā)體驗(yàn)。
首先筆者都是用的 vscode 進(jìn)行開(kāi)發(fā)的，需要安裝官方推薦的 vscode 插件，直接在插件市場(chǎng)搜索 Flutter 安裝就可以了，之后就可以通過(guò)插件新建 Flutter 新項(xiàng)目了。
本地配置好對(duì)應(yīng)的 iOS 模擬器，在 vscode 左邊點(diǎn)擊調(diào)試按鈕選擇對(duì)應(yīng)的模擬器，就可以直接進(jìn)行開(kāi)發(fā)調(diào)試了。
截圖是筆者做的一個(gè)小應(yīng)用項(xiàng)目，目錄結(jié)構(gòu)也比較簡(jiǎn)單，在 lib 目錄下的 main.dart 就是入口文件，唯一缺憾的就是 Flutter 對(duì)前端開(kāi)發(fā)的語(yǔ)法不友好，Dart 雖然也不復(fù)雜，但是和 JavaScript 還是有比較多的出入的，需要一定時(shí)間的掌握和學(xué)習(xí)，而且對(duì)應(yīng)的不少系統(tǒng)類(lèi)庫(kù)用法也不太一樣。
整體來(lái)說(shuō)比 RN 要配置的復(fù)雜一些，對(duì)前端開(kāi)發(fā)來(lái)說(shuō)，Dart 語(yǔ)法是一個(gè)挑戰(zhàn)，編寫(xiě)應(yīng)用除了 Dart 之外還需要理解 Flutter 自己的狀態(tài)管理機(jī)制，widget 概念以及對(duì)應(yīng)的 material 相關(guān)庫(kù)的功能才能上手，對(duì)新人門(mén)檻還是比較高的。
1.3 Ionic
Drifty Co.在2013年推出了Ionic，可以說(shuō)是混合式開(kāi)發(fā)（hybrid）的鼻祖了，他推出之前大家一般都是在 PhoneGap 下開(kāi)發(fā)混合式開(kāi)發(fā)應(yīng)用，Ionic 一開(kāi)始是和 Angular 高度集成的，現(xiàn)在已經(jīng)支持了 React 和 Vue 集成，以及可以使用 Cordova 的庫(kù)，生態(tài)整體來(lái)說(shuō)還是不錯(cuò)的，優(yōu)點(diǎn)是 Web 技術(shù)為主，缺點(diǎn)也很明顯，Webview 的表現(xiàn)和性能與 RN，F(xiàn)lutter 那種編譯后轉(zhuǎn) Native Code 的性能對(duì)比肯定要差一些，一些 Web不支持的特性需要編寫(xiě)大量的原生插件來(lái)支持。
下邊來(lái)看一下他的安裝環(huán)境和開(kāi)發(fā)工具部分體驗(yàn)，首先安裝全局的cli 命令行工具，Nodejs 版本12.14以上。
npm install -g @ionic/cli
ionic start myIonicApp blank --type vue
ionic serve █
看起來(lái)還是比較簡(jiǎn)單，但是需要安裝的東西比較多，建議提前把 npm 設(shè)置成國(guó)內(nèi)源，否則要等很久很久很久。
使用 serve 之后，其實(shí)本地就是起了一個(gè) webpack-dev-server。
打開(kāi)8100地址，其實(shí)就是一個(gè)正常的 web 項(xiàng)目，熟悉 vue 的同學(xué)一眼就能看出來(lái)了，IonicVue是作為 Vue 的一個(gè)插件存在的。
那么看一下如何在模擬器上預(yù)覽吧，首先需要安裝下邊兩個(gè)工具，是前置依賴。
npm install -g ios-sim
brew install ios-deploy
然后在項(xiàng)目目錄先 build 項(xiàng)目，然后我們直接使用 Ionic Cli：
npm run build
ionic capacitor run ios -l --external
選擇一個(gè)本地的模擬器，之后就可以看到界面了，但是因?yàn)楣P者本地的 Xcode 是11的老版本，會(huì)報(bào)編譯錯(cuò)誤，所以需要升級(jí)到最新的Xcode12以上版本，但是筆者的 Xcode 升不上去了，因?yàn)楣P者的電腦系統(tǒng)不支持更高級(jí)別的 Xcode，所以后邊改成用 android 調(diào)試。
筆者之前安裝過(guò) android studio，需要更新SDK 到最新，然后在 tools 里找到 AVD 面板，創(chuàng)建一個(gè)模擬器。
啟動(dòng)后需要 adb devices 檢查一下，如果設(shè)備在線，再進(jìn)行下一步：
ionic capacitor add android
ionic capacitor run android
這一步第一次非常非常慢，應(yīng)該是和 ios 一樣，需要編譯成 apk 再同步到模擬器上。
最后的效果就是這樣，看到日志的最后幾行就是 deploy 了一個(gè)debug 的 apk 到模擬器了。
整體來(lái)說(shuō)，Ionic 的安裝步驟不算復(fù)雜，如果網(wǎng)絡(luò)比較好，整個(gè)過(guò)程不到半小時(shí)，如果是最新版的 MacOS 系統(tǒng)，升級(jí) Xcode 到最新版應(yīng)該也比較流暢。看了一下官網(wǎng)，debug 方式就是利用 chrome 或者 safari 的網(wǎng)頁(yè)調(diào)試工具調(diào)試，所以大家理解，這個(gè)Ionic 套殼了 webview，調(diào)試方法和 webview 調(diào)試方法是一致的。
1.4 NativeScript
NativeScript是由Progress 公司開(kāi)發(fā)的，已經(jīng)專(zhuān)注于開(kāi)發(fā)工具領(lǐng)域30多年的上市公司。整個(gè) NativeScript 的能力和它的名字一樣是專(zhuān)門(mén)為了 iOS 和 Android 而開(kāi)發(fā)的，但是寫(xiě)法卻是 JavaScript。和上面說(shuō)的 Ionic 不一樣是套殼 Webview，NativeScript 還是在 Js 和 Native 之間打通了一座橋梁，真正的使用 Native Code進(jìn)行頁(yè)面的渲染，這也使的它的表現(xiàn)能力比 Ionic 要強(qiáng)，從官網(wǎng)上看他也支持不同的 Web 框架寫(xiě)法，比如 Vue，React，包括 TS 支持，當(dāng)然用原生 JS和 HTML也可以編寫(xiě)，官網(wǎng)：https://nativescript.org/。
下邊看一下他的安裝環(huán)境和開(kāi)發(fā)工具體驗(yàn)，依然是 MacOS 系統(tǒng)環(huán)境搭建。
同樣是需要先安裝 NativeScript 的Cli 工具：
npm install -g nativescript過(guò)程中會(huì)遇到從 codeload 下載依賴，可以設(shè)置代理或者修改 codeload 的 host 解決 ，筆者就遇到了，但這不是 nativescript 的問(wèn)題 ：）。
140.82.114.9 codeload.github.com
使用 ns 命令創(chuàng)建 NativeScript 項(xiàng)目：
ns create myNativescriptApp
選擇創(chuàng)建一個(gè) Vue 模板的空項(xiàng)目，命令行會(huì)交互式的引導(dǎo)你選擇，用 Vscode 打開(kāi)就可以編輯，目錄結(jié)構(gòu)和普通的 Vue 項(xiàng)目基本一樣，入口在 app 目錄下的 app.js，Vue 實(shí)例被 nativescript-vue 替代。
Run the project on multiple devices:
` `$ ns run ios
` `$ ns run android
Debug the project with Chrome DevTools:
` `$ ns debug ios
` `$ ns debug android
我們看一下在 android 下是什么樣子的，iOS 也是因?yàn)楸镜?Xcode 版本太老跑不起來(lái)，第一次編譯時(shí)間都比較久，需要耐心等待。
運(yùn)行起來(lái)后和 Ioinc 類(lèi)似，也是有個(gè) debug 的 apk 被裝到模擬器里了，測(cè)試了一下本地修改前端代碼，webpack 本地會(huì)進(jìn)行 watch 和 sync 到模擬器，實(shí)現(xiàn)熱更新，速度還可以，但是需要頻繁的冷起app才生效。
1.5 AVM
AVM 是由 APICloud 研發(fā)的一套跨端的 JavaScript 框架，全稱(chēng)（APICloud-View-Model），寫(xiě)法類(lèi) Vue 也兼容 React JSX，有雙向綁定，組件化和狀態(tài)管理支持，并配套了系統(tǒng)級(jí)別的 API，支持云端編譯和發(fā)布到不同的平臺(tái)，官網(wǎng)是：https://www.apicloud.com/AVMframe，有自己的開(kāi)發(fā) IDE支持，我看 2021 年12月份還有在更新SDK （2021-12-3），其中 JS Framework 部分是全部開(kāi)源的，包括 JS 組件庫(kù)。
我們來(lái)看一下他的安裝環(huán)境和開(kāi)發(fā)工具，首先需要注冊(cè) APICloud 賬號(hào)，因?yàn)樗麄兝^承了云端編譯的功能，而且ide也是需要賬號(hào)登陸同步代碼。然后下載官網(wǎng)的APICloud Studio 3，如果是 Mac 系統(tǒng)一定要注意，不能直接在 download 目錄打開(kāi)，需要復(fù)制到應(yīng)用程序文件夾內(nèi)再用。
下載后打開(kāi)，熟悉 vscode 的同學(xué)應(yīng)該能發(fā)現(xiàn)，這是一個(gè)基于 vscode 二次開(kāi)發(fā)的 IDE。
入口文件是 pages 目錄下的stml代碼文件，在上面右鍵實(shí)時(shí)預(yù)覽可以在右邊直接看效果，需要注意的是，這里只能預(yù)覽標(biāo)準(zhǔn)H5的組件及頁(yè)面效果，不能預(yù)覽原生API的功能，所以推薦要真實(shí)開(kāi)發(fā)的話，需要使用真機(jī)安裝AppLoader進(jìn)行調(diào)試，類(lèi)似RN的Expo。
AppLoader 的下載地址：https://docs.apicloud.com/Download/download#apploader
裝上之后保持Mac 和手機(jī)在同一網(wǎng)絡(luò)下，用 AppLoader 掃描IDE 中的二維碼就可以實(shí)時(shí)看到真機(jī)效果了。
整體來(lái)說(shuō)開(kāi)發(fā)環(huán)境和開(kāi)發(fā)工具是一體的，流程比較順暢，全程也沒(méi)有鼓搗任何命令行工具，但要根據(jù)官網(wǎng)文檔的引導(dǎo)進(jìn)行使用。
1.6 總結(jié)
經(jīng)過(guò)對(duì)5個(gè)框架的初步講解，大家可以看出來(lái)基本上大家的開(kāi)發(fā)流程分成了兩類(lèi)，一類(lèi)是直接把 debug 包裝到手機(jī)上進(jìn)行開(kāi)發(fā)和調(diào)試，比如 Ioinc，NativeScript，還有 Flutter，另外一類(lèi)則是需要通過(guò)一個(gè)額外的 AppLoader 進(jìn)行輔助調(diào)試，比如 AVM，RN，當(dāng)然后者也支持直接安裝包到真機(jī)，但是 debug 的方式還是有所區(qū)別。
在開(kāi)發(fā)工具上，基本上大家都可以使用Vscode 進(jìn)行開(kāi)發(fā)，都支持 hotReload 功能，有些提供了自己的IDE，集成化程度比較高，比如 AVM。
二，性能比較。
下邊筆者就從性能角度講一下不同框架的對(duì)比情況，這個(gè)可能是大家最關(guān)注的了。筆者通過(guò)編寫(xiě)一個(gè)簡(jiǎn)單的超長(zhǎng)的 viewlist 來(lái)進(jìn)行橫向比較，代碼筆者放到這里了，https://github.com/xiaojue/ListViewDemo，后邊大家可以去參考，實(shí)現(xiàn)一個(gè)1000行的圖文列表，左圖右文。
RN 效果：
Flutter 效果：
Ionic 效果：
NativeScript 效果，這里NativeScript 開(kāi)發(fā)體驗(yàn)最爛，后邊會(huì)在 API 分析部分細(xì)說(shuō)：
AVM 下的效果：
性能我們直接 adb shell 進(jìn)入設(shè)備后，使用 top命令來(lái)觀察 app 進(jìn)程情況：
比如：
time ns debug android| 框架 | 內(nèi)存 | CPU使用率 | FPS | debug編譯速度 |
|---|---|---|---|---|
| RN（expo go） | 300M | 78%-116% | | 0m32.229s |
| Flutter | 190M | 37%-43% | | 0m21.336s |
| Ionic | 138M | 49%-65% | | 0m55.549s |
| NativeScript | 147M | 19%~20% | | 0m27.862s |
| AVM | 122MB | 6%-10% | | 0m0.094s |
簡(jiǎn)單分析一下，首先是內(nèi)存占用，基本都是100MB 以上，RN 和 Flutter 最多，AVM最少。然后是 CPU 占比，筆者一直下拉 list，看 CPU占用率，其中RN 是最高的，但是它的 fps 卻很低，這說(shuō)明 cpu 占用率越高說(shuō)明計(jì)算越多，但是 fps 底說(shuō)明沒(méi)有卡頓，性能更好。
比如我們看 Ionic 的 cpu 占用只有 RN 的一半，但是 fps 卻特別高，有很明顯卡頓。所以我們可以說(shuō) RN 的性能比 webview 渲染的 Ionic 要好很多，包括 NativeScript 和 AVM 也是這個(gè)道理，cpu 占比越高，而 fps 越底，那么性能就越好，可是cpu占用高也有個(gè)問(wèn)題就是會(huì)比較費(fèi)電…
最后我們?cè)倏淳幾g時(shí)間，這關(guān)系到調(diào)試體驗(yàn)，這里面AVM 最快，基本是毫秒級(jí)同步到真機(jī)，其他基本都是秒級(jí)的，需要跑build。當(dāng)然 Expo 和 AVM 都是有前置 Loader的，所以肯定比沒(méi)有 loader 程序的快一些。AVM 筆者也不太清楚為什么這么快，這確實(shí)是讓筆者很吃驚，但是有一點(diǎn)，AVM 在筆者的android模擬器上安裝失敗，所以筆者是用真機(jī)測(cè)評(píng)的，可能會(huì)有一些影響，真機(jī)的性能更高一些。
三，是否支持多端編譯（含小程序）。
這里的多端不僅僅指android，ios，h5，更包含了是否支持國(guó)內(nèi)的小程序編譯。因?yàn)楹芏喙灸壳暗臉I(yè)務(wù)場(chǎng)景都是需要在不同的APP里跑的，所以是否支持多端對(duì)我們國(guó)內(nèi)用戶來(lái)說(shuō)很重要，筆者特意增加了這一對(duì)比項(xiàng)。另外目前 PC 端的編譯各家也有支持，所以還另外增加了 windows，macOS 平臺(tái)的對(duì)比。
| 框架 | Android | iOS | H5 | 小程序 | windows desktop | macOS desktop |
|---|---|---|---|---|---|---|
| React Native | √ | √ | √ | alita，remax，Taro | react-native-windows | react-native-macOS |
| Flutter | √ | √ | √ | MPFlutter | √ | √ |
| Ionic | √ | √ | √ | X | √ | √ |
| NativeScript | √ | √ | X | X | X | X |
| AVM | √ | √ | √ | √ | X | X |
整體調(diào)研的情況如上圖，對(duì)勾的部分就是官網(wǎng)直接支持編譯，叉號(hào)的意思就是官方不支持，也沒(méi)有什么比較成熟的開(kāi)源解決方案，而單獨(dú)寫(xiě)了一些框架支持的比如 RN，F(xiàn)lutter 是有一些還算成熟的開(kāi)源解決方案可以使用的。
整體來(lái)看，如果只開(kāi)發(fā) Android 和 iOS 應(yīng)用，這五個(gè)框架都沒(méi)什么問(wèn)題，如果要支持小程序和桌面軟件則要考慮更多，目前來(lái)看 RN 和 Flutter 生態(tài)是最完整的，次之是 Ionic，當(dāng)然如果您是以微信小程序?yàn)橹鞯拈_(kāi)發(fā)者并不考慮 desktop的情況下，那么 AVM 可能是更好的選擇。
四，生態(tài)情況。
4.1 開(kāi)源生態(tài)，流行度
我們直接用 NPMCompare 來(lái)對(duì)比，因?yàn)?Flutter 和 AVM 沒(méi)有在 NPM 上有對(duì)應(yīng)的包，后邊筆者單獨(dú)再列。
下載量上比，RN 遙遙領(lǐng)先，Ionic 和 NativeScript 都不夠看， RN絕對(duì)第一，Ionic 比 NativeScript 好一點(diǎn)，從 issues 上來(lái)看，NativeScript 好一點(diǎn)，但是可能是因?yàn)橛脩籼賹?dǎo)致的。Ionic 和 NativeScript 全加起來(lái)，還不如 RN一個(gè)零頭。
我們?cè)倏?Flutter 和 AVM，因?yàn)闆](méi)有找到對(duì)應(yīng)的包和下載量，我們摘取 statista.com 的數(shù)據(jù)來(lái)看一下 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/。
可以看出到得出的數(shù)據(jù)和我們上邊的結(jié)果類(lèi)似，Ionic 和 NativeScript 的總份額2021年只有16%+5%=21%，F(xiàn)lutter第一42%， RN第二38%。可以看到Flutter 從2019年到2021年逐步在上升，最終在2021年反超 RN。
以上是幾個(gè)主要框架的主倉(cāng)庫(kù)的對(duì)比情況，數(shù)據(jù)來(lái)自 https://www.githubcompare.com/ 從中可以看出來(lái)，從 stars 和 forks 上來(lái)說(shuō) Flutter 和 RN 基本就是老大和老二，從 open issues 上看RN 比 Flutter 更優(yōu)，時(shí)間上看大家都是7，8年前開(kāi)始做的，更新情況也差不多。
再?gòu)乃阉饕鏌嵩~上做一下分析。
從 Google Trends 的結(jié)果來(lái)看，國(guó)內(nèi) apicloud，ionic，nativescript 的熱度差不多，react native 和 flutter 今年對(duì)比來(lái)看，國(guó)內(nèi)更多的人開(kāi)始轉(zhuǎn)向 flutter。
4.2 API 支持，組件豐富程度
這部分從 API 層面對(duì)比五個(gè)框架對(duì)原生能力的支持情況和組件支持的情況。
前面筆者簡(jiǎn)單的開(kāi)發(fā)了個(gè) list 功能，我們下邊對(duì)比下各個(gè)框架的基礎(chǔ)組件個(gè)數(shù)（含布局組件）和API能力。
| 框架 | 組件個(gè)數(shù) | 系統(tǒng)API/Plugin個(gè)數(shù) | 開(kāi)發(fā)體驗(yàn) |
|---|---|---|---|
| RN | 34 | 33 | React無(wú)縫切入 |
| Flutter | 171 | 104 | Dart語(yǔ)法，有一定門(mén)檻和適應(yīng)時(shí)間 |
| Ionic | 90 | 291 | 支持 React，Vue，Angularjs，JS，TS 開(kāi)發(fā) |
| NativeScript | 31 | 87 | 實(shí)時(shí)調(diào)試能力太弱 |
| AVM | 31 | 219 | 實(shí)時(shí)調(diào)試能力強(qiáng)，類(lèi) Vue 語(yǔ)法兼容 React JSX |
來(lái)源參考：
RN 組件：https://reactnative.dev/docs/components-and-apis
RN API：https://reactnative.dev/docs/accessibilityinfo
Flutter 組件：https://docs.flutter.dev/reference/widgets
Flutter API：https://api.flutter-io.cn/
Ionic 組件：https://ionicframework.com/docs/components
Ionic API：https://ionicframework.com/docs/native
NativeScript 組件：https://docs.nativescript.org/ui-and-styling.html
NativeScript API：https://docs.nativescript.org/api-reference/index.html
AVM 組件：https://docs.apicloud.com/apicloud3/
AVM API：https://docs.apicloud.com/Client-API/api
數(shù)據(jù)上雖然差別比較大，比如 RN 的 API 和組件數(shù)雖然少一些，但是都是按模塊劃分的。比如某單個(gè) API Class 下其實(shí)是有不少方法可以實(shí)現(xiàn)很多能力的。這里只列舉了數(shù)量，只是提供了一個(gè)比較粗略的，對(duì)學(xué)習(xí)成本的一個(gè)初步直觀的感覺(jué)，真的夠不夠用還是需要真實(shí)開(kāi)發(fā)過(guò)復(fù)雜應(yīng)用才有絕對(duì)話語(yǔ)權(quán)。
筆者覺(jué)得在開(kāi)發(fā)體驗(yàn)上，F(xiàn)lutter 是獨(dú)一檔的。因?yàn)?Dart 和TS，JS 都不太一樣，整個(gè) UI 開(kāi)發(fā)概念和前端還是有一些理念沖突。其他使用 JavaScript 技術(shù)開(kāi)發(fā)的框架，AVM，RN，Ionic 其實(shí)都還不錯(cuò)。但是 Ionic 支持使用各種不同 JS 庫(kù)來(lái)開(kāi)發(fā)，比如 React，Vue，NG 等，而 AVM 支持 Vue 、react語(yǔ)法特性， RN 則必須是 React。NativeScript 雖然也支持不同的前端框架開(kāi)發(fā)，但是整個(gè)開(kāi)發(fā)體驗(yàn)則是最差的，他的實(shí)時(shí)編譯，debug 功能以及布局系統(tǒng)真的很爛，筆者這里不推薦再入坑了，用戶少真的是有原因的，比如筆者這個(gè)初學(xué)者，看完他們的布局文檔就直接給勸退了。
而且縱觀所有框架，文檔寫(xiě)的最細(xì)致還是 RN 和 Flutter，AVM這三家。但是RN 和 Flutter 本土化程度不夠， Ionic 和 NativeScript 則是國(guó)內(nèi)資料比較少且文檔比較糊弄，而且都很久不更新了。
五，總結(jié)
雖然前面筆者從不同的角度分析了各個(gè)框架的情況，比如上手，開(kāi)發(fā)環(huán)境以及簡(jiǎn)單的性能對(duì)比，生態(tài)情況等。但是對(duì)于這些框架來(lái)說(shuō)，其實(shí)還有很多研究的空間，這篇文章只是客觀的記錄了筆者對(duì)不同框架初次上手和調(diào)研情況的一個(gè)過(guò)程。所以難免有一些地方不夠全面，但已基本反映出現(xiàn)狀。
從性能上看AVM 的開(kāi)發(fā)體驗(yàn)和編譯速度，性能表現(xiàn)都非常好，雖然是國(guó)產(chǎn)的框架但是不比國(guó)外的要差，其次是Flutter，RN，最后是 Ionic 和 NativeScript。
從開(kāi)發(fā)體驗(yàn)上來(lái)說(shuō)，比較舒服的是RN，Ionic這兩個(gè)，其次是Flutter和 AVM，F(xiàn)lutter 是因?yàn)?Dart 語(yǔ)法，但需要單獨(dú)學(xué)習(xí)，中小企業(yè)選型以及個(gè)人開(kāi)發(fā)者需要考慮；而 AVM 則不支持 TS和其他語(yǔ)言框架，只支持 JS 語(yǔ)法。最差的是 NativeScript，基本上沒(méi)法實(shí)時(shí)調(diào)試，API 也非常的不友好。
總結(jié)下來(lái)，筆者覺(jué)得2021年最火的當(dāng)屬 Flutter，已經(jīng)趕超了 RN。整體上看國(guó)內(nèi)外用戶目前的選擇和份額也大部分被 Flutter和 RN 瓜分殆盡。其他框架中 AVM和 Ionic 各有優(yōu)勢(shì)，但是從使用體驗(yàn)，上手難度，社區(qū)情況來(lái)看，國(guó)內(nèi)的 AVM 肯定更適合國(guó)內(nèi)開(kāi)發(fā)者一些，畢竟有本土化，云端集成，而且debug體驗(yàn)也很驚艷。
所以大廠直接上 Flutter 是沒(méi)有問(wèn)題的，Dart 沒(méi)有太大難度，這部分成本不是問(wèn)題。而其他公司和個(gè)人開(kāi)發(fā)者如果做國(guó)內(nèi)市場(chǎng)選擇 AVM，RN 還是比較合適的（相比較 NativeScript 和 Ionic，AVM天然支持國(guó)內(nèi)的小程序，是重要加分項(xiàng)，而 RN的文檔，生態(tài)則比較多），最后如果考慮 desktop 的適配，那么 Flutter 看起來(lái)就更合適一些了。
The End
歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，記得點(diǎn)個(gè) 「在看」哦
點(diǎn)個(gè)『在看』支持下