跨平臺開發框架到底哪家強？

目前市場上有多個專業做跨平臺開發的框架，那么對開發者來說究竟哪一個框架更符合自己的需求呢？筆者特地總結對比了一下不同框架的特性。

國內外筆者選擇了一共5個主流的測評對象，分別是RN，Flutter，Ionic，NativeScript，以及用友APICloud團隊開發的AVM。

目前來看比較火的應該是 Flutter，次之 RN，具體還要看企業的應用場景和領域，AVM，Ionic，NativeScript 在不少企業和個人開發者中也使用率較高。

一，安裝環境，開發工具對比。

任何框架的安裝環境都代表了這個框架對新手是否友好。所以筆者特別從安裝環境，開發工具上介紹各個不同框架的情況，來比較一下，新人上手的成本和門檻，筆者是 MacOS 用戶，以下全文介紹的都是在 Mac 下的開發環境和開發工具。

1.1 React Native

RN 是Facebook于2015年4月開源的跨平臺移動應用開發框架，到現在已經發展了6年多了，目前最新版本是0.66，2021年12月10日還有更新發布小版本，整體來看框架還是非常有生命力的。官網：https://reactnative.dev/

我們來看安裝環境和開發工具，從最新的官網可以看到，如果只是上手的話還是比較方便的，只需要本地安裝 Nodejs 12版本以上就可以了。然后借助官網推薦的 Expo 工具可以快速搭建起來本地的一個開發環境。因為筆者是 MacOS 用戶，之前安裝過 Xcode 所以整體安裝起來還算是流暢。

首先是 Nodejs 的命令行工具安裝：

yarn?global?add?expo-cli

這里不說配置源什么的了，如果慢的話，可以切換國內 yarn 源，安裝完畢后，直接使用

expo?init?AwesomeProject

安裝項目，項目安裝完畢后進入項目執行

yarn?start

會重新安裝一次 expo-cli，之后本地啟動項目，打開 dev 的瀏覽器界面如下，最左邊可以看到打開的是本地的 expo 得調試臺，選擇本地 LAN 網絡，然后點擊 Run on iOS simulator，啟動了筆者本地的一個 iPhone 8的設備，然后看到了現在的界面，最右邊是本地生成的模板代碼。

編輯工具筆者用的 vscode，官方也是推薦 vscode。使用腳手架的生成的目錄和正常的 React 項目差不多，入口在 App.tsx 文件，支持修改后的 hotRload，整個流程走下來對前端開發來說門檻不高，至少到調試開發階段，如果只單純涉及到 UI 編寫，配置完直接就可以開始干活了。

1.2 Flutter

Flutter 從出生（2018年發布v1.0）到現在也3年多了，是 Google 力推的跨端開發框架，和 RN 不同的是開發語言用的 Dart 而不是 JavaScript，官網在這里：https://flutter.dev/

最近幾年發展的比較猛，各大公司都在主端業務引入，包括筆者所在的公司也有很多業務使用 Flutter 進行了 UI 部分的開發，下邊筆者就簡單介紹一下 Flutter 的開發環境和工具。

首先肯定是需要下載安裝完整的 Xcode 和 Xcode developer tools開發工具，默認大家都裝了，之后不在贅述。

需要先下載 Flutter 的 SDK：https://docs.flutter.dev/development/tools/sdk/releases

解壓縮 SDK 后設置對應的 SDK 環境變量地址：

cd?~/development
unzip?~/Downloads/flutter\_macos\_vX.X.X-stable.zip
export?PATH="$PATH:`pwd`/flutter/bin"

如果過程中遇到問題可以使用 flutter doctor 來查看問題進行修復，有報錯或者缺失環境，會有提示你如何修改，比較方便。

如果 flutter doctor 沒有報錯的話，那么flutter 命令行就安裝完成了，我們來看一下開發體驗。

首先筆者都是用的 vscode 進行開發的，需要安裝官方推薦的 vscode 插件，直接在插件市場搜索 Flutter 安裝就可以了，之后就可以通過插件新建 Flutter 新項目了。

本地配置好對應的 iOS 模擬器，在 vscode 左邊點擊調試按鈕選擇對應的模擬器，就可以直接進行開發調試了。

截圖是筆者做的一個小應用項目，目錄結構也比較簡單，在 lib 目錄下的 main.dart 就是入口文件，唯一缺憾的就是 Flutter 對前端開發的語法不友好，Dart 雖然也不復雜，但是和 JavaScript 還是有比較多的出入的，需要一定時間的掌握和學習，而且對應的不少系統類庫用法也不太一樣。

整體來說比 RN 要配置的復雜一些，對前端開發來說，Dart 語法是一個挑戰，編寫應用除了 Dart 之外還需要理解 Flutter 自己的狀態管理機制，widget 概念以及對應的 material 相關庫的功能才能上手，對新人門檻還是比較高的。

1.3 Ionic

Drifty Co.在2013年推出了Ionic，可以說是混合式開發（hybrid）的鼻祖了，他推出之前大家一般都是在 PhoneGap 下開發混合式開發應用，Ionic 一開始是和 Angular 高度集成的，現在已經支持了 React 和 Vue 集成，以及可以使用 Cordova 的庫，生態整體來說還是不錯的，優點是 Web 技術為主，缺點也很明顯，Webview 的表現和性能與 RN，Flutter 那種編譯后轉 Native Code 的性能對比肯定要差一些，一些 Web不支持的特性需要編寫大量的原生插件來支持。

下邊來看一下他的安裝環境和開發工具部分體驗，首先安裝全局的cli 命令行工具，Nodejs 版本12.14以上。

npm?install?-g?@ionic/cliionic?start?myIonicApp?blank?--type?vueionic?serve?█

看起來還是比較簡單，但是需要安裝的東西比較多，建議提前把 npm 設置成國內源，否則要等很久很久很久。

使用 serve 之后，其實本地就是起了一個 webpack-dev-server。

打開8100地址，其實就是一個正常的 web 項目，熟悉 vue 的同學一眼就能看出來了，IonicVue是作為 Vue 的一個插件存在的。

那么看一下如何在模擬器上預覽吧，首先需要安裝下邊兩個工具，是前置依賴。

npm?install?-g?ios-simbrew?install?ios-deploy

然后在項目目錄先 build 項目，然后我們直接使用 Ionic Cli：

npm?run?buildionic?capacitor?run?ios?-l?--external

選擇一個本地的模擬器，之后就可以看到界面了，但是因為筆者本地的 Xcode 是11的老版本，會報編譯錯誤，所以需要升級到最新的Xcode12以上版本，但是筆者的 Xcode 升不上去了，因為筆者的電腦系統不支持更高級別的 Xcode，所以后邊改成用 android 調試。

筆者之前安裝過 android studio，需要更新SDK 到最新，然后在 tools 里找到 AVD 面板，創建一個模擬器。

啟動后需要 adb devices 檢查一下，如果設備在線，再進行下一步：

ionic?capacitor?add?androidionic?capacitor?run?android

這一步第一次非常非常慢，應該是和 ios 一樣，需要編譯成 apk 再同步到模擬器上。

最后的效果就是這樣，看到日志的最后幾行就是 deploy 了一個debug 的 apk 到模擬器了。

整體來說，Ionic 的安裝步驟不算復雜，如果網絡比較好，整個過程不到半小時，如果是最新版的 MacOS 系統，升級 Xcode 到最新版應該也比較流暢。看了一下官網，debug 方式就是利用 chrome 或者 safari 的網頁調試工具調試，所以大家理解，這個Ionic 套殼了 webview，調試方法和 webview 調試方法是一致的。

1.4 NativeScript

NativeScript是由Progress 公司開發的，已經專注于開發工具領域30多年的上市公司。整個 NativeScript 的能力和它的名字一樣是專門為了 iOS 和 Android 而開發的，但是寫法卻是 JavaScript。和上面說的 Ionic 不一樣是套殼 Webview，NativeScript 還是在 Js 和 Native 之間打通了一座橋梁，真正的使用 Native Code進行頁面的渲染，這也使的它的表現能力比 Ionic 要強，從官網上看他也支持不同的 Web 框架寫法，比如 Vue，React，包括 TS 支持，當然用原生 JS和 HTML也可以編寫，官網：https://nativescript.org/。

下邊看一下他的安裝環境和開發工具體驗，依然是 MacOS 系統環境搭建。

同樣是需要先安裝 NativeScript 的Cli 工具：

npm install -g nativescript

過程中會遇到從 codeload 下載依賴，可以設置代理或者修改 codeload 的 host 解決 ，筆者就遇到了，但這不是 nativescript 的問題 ：）。

140.82.114.9?codeload.github.com使用 ns 命令創建 NativeScript 項目：ns?create?myNativescriptApp

選擇創建一個 Vue 模板的空項目，命令行會交互式的引導你選擇，用 Vscode 打開就可以編輯，目錄結構和普通的 Vue 項目基本一樣，入口在 app 目錄下的 app.js，Vue 實例被 nativescript-vue 替代。

Run?the?project?on?multiple?devices:`??`$?ns?run?ios`??`$?ns?run?androidDebug?the?project?with?Chrome?DevTools:`??`$?ns?debug?ios`??`$?ns?debug?android

我們看一下在 android 下是什么樣子的，iOS 也是因為本地 Xcode 版本太老跑不起來，第一次編譯時間都比較久，需要耐心等待。

運行起來后和 Ioinc 類似，也是有個 debug 的 apk 被裝到模擬器里了，測試了一下本地修改前端代碼，webpack 本地會進行 watch 和 sync 到模擬器，實現熱更新，速度還可以，但是需要頻繁的冷起app才生效。

1.5 AVM

AVM 是由 APICloud 研發的一套跨端的 JavaScript 框架，全稱（APICloud-View-Model），寫法類 Vue 也兼容 React JSX，有雙向綁定，組件化和狀態管理支持，并配套了系統級別的 API，支持云端編譯和發布到不同的平臺，官網是：https://www.apicloud.com/AVMframe，有自己的開發 IDE支持，我看2021年12月份還有在更新SDK （2021-12-3），其中 JS Framework 部分是全部開源的，包括 JS 組件庫。

我們來看一下他的安裝環境和開發工具，首先需要注冊 APICloud 賬號，因為他們繼承了云端編譯的功能，而且ide也是需要賬號登陸同步代碼。然后下載官網的APICloud Studio 3，如果是 Mac 系統一定要注意，不能直接在 download 目錄打開，需要復制到應用程序文件夾內再用。

下載后打開，熟悉 vscode 的同學應該能發現，這是一個基于 vscode 二次開發的 IDE。

入口文件是 pages 目錄下的stml代碼文件，在上面右鍵實時預覽可以在右邊直接看效果，需要注意的是，這里只能預覽標準H5的組件及頁面效果，不能預覽原生API的功能，所以推薦要真實開發的話，需要使用真機安裝AppLoader進行調試，類似RN的Expo。

AppLoader 的下載地址：https://docs.apicloud.com/Download/download#apploader

裝上之后保持Mac 和手機在同一網絡下，用 AppLoader 掃描IDE 中的二維碼就可以實時看到真機效果了。

整體來說開發環境和開發工具是一體的，流程比較順暢，全程也沒有鼓搗任何命令行工具，但要根據官網文檔的引導進行使用。

1.6 總結

經過對5個框架的初步講解，大家可以看出來基本上大家的開發流程分成了兩類，一類是直接把 debug 包裝到手機上進行開發和調試，比如 Ioinc，NativeScript，還有 Flutter，另外一類則是需要通過一個額外的 AppLoader 進行輔助調試，比如 AVM，RN，當然后者也支持直接安裝包到真機，但是 debug 的方式還是有所區別。

在開發工具上，基本上大家都可以使用Vscode 進行開發，都支持 hotReload 功能，有些提供了自己的IDE，集成化程度比較高，比如 AVM。

二，性能比較。

下邊筆者就從性能角度講一下不同框架的對比情況，這個可能是大家最關注的了。筆者通過編寫一個簡單的超長的 viewlist 來進行橫向比較，代碼筆者放到這里了，https://github.com/xiaojue/ListViewDemo，后邊大家可以去參考，實現一個1000行的圖文列表，左圖右文。

RN 效果：

Flutter 效果：

Ionic 效果：

NativeScript 效果，這里NativeScript 開發體驗最爛，后邊會在 API 分析部分細說：

AVM 下的效果：

性能我們直接 adb shell 進入設備后，使用 top命令來觀察 app 進程情況：

比如：

time ns debug android

框架	內存	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

簡單分析一下，首先是內存占用，基本都是100MB 以上，RN 和 Flutter 最多，AVM最少。然后是 CPU 占比，筆者一直下拉 list，看 CPU占用率，其中RN 是最高的，但是它的 fps 卻很低，這說明 cpu 占用率越高說明計算越多，但是 fps 底說明沒有卡頓，性能更好。

比如我們看 Ionic 的 cpu 占用只有 RN 的一半，但是 fps 卻特別高，有很明顯卡頓。所以我們可以說 RN 的性能比 webview 渲染的 Ionic 要好很多，包括 NativeScript 和 AVM 也是這個道理，cpu 占比越高，而 fps 越底，那么性能就越好，可是cpu占用高也有個問題就是會比較費電…

最后我們再看編譯時間，這關系到調試體驗，這里面AVM 最快，基本是毫秒級同步到真機，其他基本都是秒級的，需要跑build。當然 Expo 和 AVM 都是有前置 Loader的，所以肯定比沒有 loader 程序的快一些。AVM 筆者也不太清楚為什么這么快，這確實是讓筆者很吃驚，但是有一點，AVM 在筆者的android模擬器上安裝失敗，所以筆者是用真機測評的，可能會有一些影響，真機的性能更高一些。

三，是否支持多端編譯（含小程序）。

這里的多端不僅僅指android，ios，h5，更包含了是否支持國內的小程序編譯。因為很多公司目前的業務場景都是需要在不同的APP里跑的，所以是否支持多端對我們國內用戶來說很重要，筆者特意增加了這一對比項。另外目前 PC 端的編譯各家也有支持，所以還另外增加了 windows，macOS 平臺的對比。

框架	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

整體調研的情況如上圖，對勾的部分就是官網直接支持編譯，叉號的意思就是官方不支持，也沒有什么比較成熟的開源解決方案，而單獨寫了一些框架支持的比如 RN，Flutter 是有一些還算成熟的開源解決方案可以使用的。

整體來看，如果只開發 Android 和 iOS 應用，這五個框架都沒什么問題，如果要支持小程序和桌面軟件則要考慮更多，目前來看 RN 和 Flutter 生態是最完整的，次之是 Ionic，當然如果您是以微信小程序為主的開發者并不考慮 desktop的情況下，那么 AVM 可能是更好的選擇。

四，生態情況。

4.1 開源生態，流行度

我們直接用 NPMCompare 來對比，因為 Flutter 和 AVM 沒有在 NPM 上有對應的包，后邊筆者單獨再列。

下載量上比，RN 遙遙領先，Ionic 和 NativeScript 都不夠看， RN絕對第一，Ionic 比 NativeScript 好一點，從 issues 上來看，NativeScript 好一點，但是可能是因為用戶太少導致的。Ionic 和 NativeScript 全加起來，還不如 RN一個零頭。

我們再看 Flutter 和 AVM，因為沒有找到對應的包和下載量，我們摘取 statista.com 的數據來看一下 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/。

可以看出到得出的數據和我們上邊的結果類似，Ionic 和 NativeScript 的總份額2021年只有16%+5%=21%，Flutter第一42%， RN第二38%。可以看到Flutter 從2019年到2021年逐步在上升，最終在2021年反超 RN。

以上是幾個主要框架的主倉庫的對比情況，數據來自 https://www.githubcompare.com/ 從中可以看出來，從 stars 和 forks 上來說 Flutter 和 RN 基本就是老大和老二，從 ?open issues 上看RN 比 Flutter 更優，時間上看大家都是7，8年前開始做的，更新情況也差不多。

再從搜索引擎熱詞上做一下分析。

從 Google Trends 的結果來看，國內 apicloud，ionic，nativescript 的熱度差不多，react native 和 flutter 2021年對比來看，國內更多的人開始轉向 flutter。

4.2 API 支持，組件豐富程度

這部分從 API 層面對比五個框架對原生能力的支持情況和組件支持的情況。

前面筆者簡單的開發了個 list 功能，我們下邊對比下各個框架的基礎組件個數（含布局組件）和API能力。

框架	組件個數	系統API/Plugin個數	開發體驗
RN	34	33	React無縫切入
Flutter	171	104	Dart語法，有一定門檻和適應時間
Ionic	90	291	支持 React，Vue，Angularjs，JS，TS 開發
NativeScript	31	87	實時調試能力太弱
AVM	31	219	實時調試能力強，類 Vue 語法兼容?React JSX

來源參考：

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

數據上雖然差別比較大，比如 RN 的 API 和組件數雖然少一些，但是都是按模塊劃分的。比如某單個 API Class 下其實是有不少方法可以實現很多能力的。這里只列舉了數量，只是提供了一個比較粗略的，對學習成本的一個初步直觀的感覺，真的夠不夠用還是需要真實開發過復雜應用才有絕對話語權。

筆者覺得在開發體驗上，Flutter 是獨一檔的。因為 Dart 和TS，JS 都不太一樣，整個 UI 開發概念和前端還是有一些理念沖突。其他使用 JavaScript 技術開發的框架，AVM，RN，Ionic 其實都還不錯。但是 Ionic 支持使用各種不同 JS 庫來開發，比如 React，Vue，NG 等，而 AVM 支持 Vue 、react語法特性， RN 則必須是 React。NativeScript 雖然也支持不同的前端框架開發，但是整個開發體驗則是最差的，他的實時編譯，debug 功能以及布局系統真的很爛，筆者這里不推薦再入坑了，用戶少真的是有原因的，比如筆者這個初學者，看完他們的布局文檔就直接給勸退了。

而且縱觀所有框架，文檔寫的最細致還是 RN 和 Flutter，AVM這三家。但是RN 和 Flutter 本土化程度不夠， Ionic 和 NativeScript 則是國內資料比較少且文檔比較糊弄，而且都很久不更新了。

五，總結

雖然前面筆者從不同的角度分析了各個框架的情況，比如上手，開發環境以及簡單的性能對比，生態情況等。但是對于這些框架來說，其實還有很多研究的空間，這篇文章只是客觀的記錄了筆者對不同框架初次上手和調研情況的一個過程。所以難免有一些地方不夠全面，但已基本反映出現狀。

從性能上看AVM 的開發體驗和編譯速度，性能表現都非常好，雖然是國產的框架但是不比國外的要差，其次是Flutter，RN，最后是 Ionic 和 NativeScript。

從開發體驗上來說，比較舒服的是RN，Ionic這兩個，其次是Flutter和 AVM，Flutter 是因為 Dart 語法，但需要單獨學習，中小企業選型以及個人開發者需要考慮；而 AVM 則不支持 TS和其他語言框架，只支持 JS 語法。最差的是 NativeScript，基本上沒法實時調試，API 也非常的不友好。

總結下來，筆者覺得2021年最火的當屬 Flutter，已經趕超了 RN。整體上看國內外用戶目前的選擇和份額也大部分被 Flutter和 RN 瓜分殆盡。其他框架中 AVM和 Ionic 各有優勢，但是從使用體驗，上手難度，社區情況來看，國內的 AVM 肯定更適合國內開發者一些，畢竟有本土化，云端集成，而且debug體驗也很驚艷。

所以大廠直接上 Flutter 是沒有問題的，Dart 沒有太大難度，這部分成本不是問題。而其他公司和個人開發者如果做國內市場選擇 AVM，RN 還是比較合適的（相比較 NativeScript 和 Ionic，AVM天然支持國內的小程序，是重要加分項，而 RN的文檔，生態則比較多），最后如果考慮 desktop 的適配，那么 Flutter 看起來就更合適一些了。