深度測評 | 五大主流多端開發框架全面對比

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

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

國內外筆者選擇了一共 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，20211年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/deve...

解壓縮 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/cli

ionic start myIonicApp blank --type vue

ionic serve █

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

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

開啟 8100 地址，其實就是一個正常的 web 專案，熟悉 vue 的同學一眼就能看出來了，IonicVue 是作為 Vue 的一個外掛存在的。

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

npm install -g ios-sim

brew install ios-deploy

然後在專案目錄先 build 專案，然後我們直接使用 Ionic Cli：

npm run build

ionic capacitor run ios -l --external

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

筆者之前安裝過 android studio，需要更新 SDK 到最新，然後在 tools 裡找到 AVD 皮膚，建立一個模擬器。

啟動後需要 adb devices 檢查一下，如果裝置線上，再進行下一步：

ionic capacitor add android

ionic 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 android

Debug 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/AVMf...，有自己的開發 IDE 支援，我看今年 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/Dow...

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

在真機上像網路，wifi 這些系統級別 API 就可以正常使用和預覽了，報錯也會有提示，開發體驗很像小程式。

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

1.6 總結

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

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

二，效能比較

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

RN 效果：

Flutter 效果：

Ionic 效果：

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

AVM 下的效果：

程式碼實現很簡單，也沒有做特殊優化，沒有滾動載入，沒有互動事件，直接 1000 條資料搞滿，使用的都是官方 list 元件。

效能我們直接 adb shell 進入裝置後，使用 top 命令來觀察 app 程式情況：

其中幀數我們用 android 的開發者功能，GPU 截圖來標識，編譯速度直接用 time 命令統計, 均採用第一次 debug 啟動耗時的時間。

比如：

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%		<p>0m55.549s</p><p></p>
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 平臺的對比。

整體調研的情況如上圖，對勾的部分就是官網直接支援編譯，叉號的意思就是官方不支援，也沒有什麼比較成熟的開源解決方案，而單獨寫了一些框架支援的比如 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/stat...。

可以看出到得出的資料和我們上邊的結果類似，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 今年對比來看，國內更多的人開始轉向 flutter。

4.2 API 支援，元件豐富程度

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

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

來源參考：

RN 元件：https://reactnative.dev/docs/...

RN API：https://reactnative.dev/docs/...

Flutter 元件：https://docs.flutter.dev/refe...

Flutter API：https://api.flutter-io.cn/

Ionic 元件：https://ionicframework.com/do...

Ionic API：https://ionicframework.com/do...

NativeScript 元件：https://docs.nativescript.org...

NativeScript API：https://docs.nativescript.org...

AVM 元件：https://docs.apicloud.com/api...

AVM API：https://docs.apicloud.com/Cli...

資料上雖然差別比較大，比如 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 看起來就更合適一些了。

點選下方連結：https://www.apicloud.com/inde...