2021 跨平臺(tái)開發(fā)框架到底哪家強(qiáng)哄尔？

目前市場(chǎng)上有多個(gè)專業(yè)做跨平臺(tái)開發(fā)的框架山橄，那么對(duì)開發(fā)者來(lái)說究竟哪一個(gè)框架更符合自己的需求呢？筆者特地總結(jié)對(duì)比了一下不同框架的特性。

國(guó)內(nèi)外筆者選擇了一共 5 個(gè)主流的測(cè)評(píng)對(duì)象晌该，分別是 RN，F(xiàn)lutter回懦，Ionic气笙，NativeScript，以及用友 APICloud 團(tuán)隊(duì)開發(fā)的 AVM怯晕。

目前來(lái)看比較火的應(yīng)該是 Flutter潜圃，次之 RN，具體還要看企業(yè)的應(yīng)用場(chǎng)景和領(lǐng)域舟茶，AVM谭期，Ionic，NativeScript 在不少企業(yè)和個(gè)人開發(fā)者中也使用率較高吧凉。

一隧出，安裝環(huán)境，開發(fā)工具對(duì)比阀捅。

任何框架的安裝環(huán)境都代表了這個(gè)框架對(duì)新手是否友好胀瞪。所以筆者特別從安裝環(huán)境，開發(fā)工具上介紹各個(gè)不同框架的情況饲鄙，來(lái)比較一下凄诞，新人上手的成本和門檻，筆者是 MacOS 用戶忍级，以下全文介紹的都是在 Mac 下的開發(fā)環(huán)境和開發(fā)工具帆谍。

1.1 React Native

RN 是 Facebook 于 2015 年 4 月開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，到現(xiàn)在已經(jīng)發(fā)展了 6 年多了轴咱，目前最新版本是 0.66汛蝙，20211年12月10日還有更新發(fā)布小版本，整體來(lái)看框架還是非常有生命力的朴肺。官網(wǎng)：https://reactnative.dev/

我們來(lái)看安裝環(huán)境和開發(fā)工具窖剑，從最新的官網(wǎng)可以看到，如果只是上手的話還是比較方便的戈稿，只需要本地安裝 Nodejs 12 版本以上就可以了西土。然后借助官網(wǎng)推薦的 Expo 工具可以快速搭建起來(lái)本地的一個(gè)開發(fā)環(huán)境。因?yàn)楣P者是 MacOS 用戶器瘪，之前安裝過 Xcode 所以整體安裝起來(lái)還算是流暢翠储。

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

yarn global add expo-cli

這里不說配置源什么的了绘雁，如果慢的話，可以切換國(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)目挪略，打開 dev 的瀏覽器界面如下，最左邊可以看到打開的是本地的 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ì)前端開發(fā)來(lái)說門檻不高，至少到調(diào)試開發(fā)階段恼除，如果只單純涉及到 UI 編寫踪旷，配置完直接就可以開始干活了。

1.2 Flutter

Flutter 從出生（2018 年發(fā)布 v1.0）到現(xiàn)在也 3 年多了豁辉，是 Google 力推的跨端開發(fā)框架令野，和 RN 不同的是開發(fā)語(yǔ)言用的 Dart 而不是 JavaScript，官網(wǎng)在這里：https://flutter.dev/

最近幾年發(fā)展的比較猛秋忙，各大公司都在主端業(yè)務(wù)引入彩掐，包括筆者所在的公司也有很多業(yè)務(wù)使用 Flutter 進(jìn)行了 UI 部分的開發(fā)构舟，下邊筆者就簡(jiǎn)單介紹一下 Flutter 的開發(fā)環(huán)境和工具灰追。

首先肯定是需要下載安裝完整的 Xcode 和 Xcode developer tools 開發(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"

如果過程中遇到問題可以使用 flutter doctor 來(lái)查看問題進(jìn)行修復(fù)，有報(bào)錯(cuò)或者缺失環(huán)境努咐，會(huì)有提示你如何修改苦蒿，比較方便。

如果 flutter doctor 沒有報(bào)錯(cuò)的話渗稍，那么 flutter 命令行就安裝完成了佩迟，我們來(lái)看一下開發(fā)體驗(yàn)团滥。

首先筆者都是用的 vscode 進(jìn)行開發(fā)的，需要安裝官方推薦的 vscode 插件报强，直接在插件市場(chǎng)搜索 Flutter 安裝就可以了灸姊，之后就可以通過插件新建 Flutter 新項(xiàng)目了。

本地配置好對(duì)應(yīng)的 iOS 模擬器秉溉，在 vscode 左邊點(diǎn)擊調(diào)試按鈕選擇對(duì)應(yīng)的模擬器力惯，就可以直接進(jìn)行開發(fā)調(diào)試了。

圖片

截圖是筆者做的一個(gè)小應(yīng)用項(xiàng)目召嘶，目錄結(jié)構(gòu)也比較簡(jiǎn)單父晶，在 lib 目錄下的 main.dart 就是入口文件，唯一缺憾的就是 Flutter 對(duì)前端開發(fā)的語(yǔ)法不友好弄跌，Dart 雖然也不復(fù)雜甲喝，但是和 JavaScript 還是有比較多的出入的，需要一定時(shí)間的掌握和學(xué)習(xí)铛只，而且對(duì)應(yīng)的不少系統(tǒng)類庫(kù)用法也不太一樣俺猿。

整體來(lái)說比 RN 要配置的復(fù)雜一些，對(duì)前端開發(fā)來(lái)說格仲，Dart 語(yǔ)法是一個(gè)挑戰(zhàn)押袍，編寫應(yīng)用除了 Dart 之外還需要理解 Flutter 自己的狀態(tài)管理機(jī)制，widget 概念以及對(duì)應(yīng)的 material 相關(guān)庫(kù)的功能才能上手凯肋，對(duì)新人門檻還是比較高的谊惭。

1.3 Ionic

Drifty Co.在 2013 年推出了 Ionic，可以說是混合式開發(fā)（hybrid）的鼻祖了侮东，他推出之前大家一般都是在 PhoneGap 下開發(fā)混合式開發(fā)應(yīng)用圈盔，Ionic 一開始是和 Angular 高度集成的，現(xiàn)在已經(jīng)支持了 React 和 Vue 集成悄雅，以及可以使用 Cordova 的庫(kù)驱敲，生態(tài)整體來(lái)說還是不錯(cuò)的，優(yōu)點(diǎn)是 Web 技術(shù)為主宽闲，缺點(diǎn)也很明顯众眨，Webview 的表現(xiàn)和性能與 RN，F(xiàn)lutter 那種編譯后轉(zhuǎn) Native Code 的性能對(duì)比肯定要差一些容诬，一些 Web 不支持的特性需要編寫大量的原生插件來(lái)支持娩梨。

下邊來(lái)看一下他的安裝環(huán)境和開發(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芦缰。

圖片

打開 8100 地址铅匹，其實(shí)就是一個(gè)正常的 web 項(xiàng)目粉铐，熟悉 vue 的同學(xué)一眼就能看出來(lái)了汉规，IonicVue 是作為 Vue 的一個(gè)插件存在的。

image

image

那么看一下如何在模擬器上預(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)試讨永。

筆者之前安裝過 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)說冰更，Ionic 的安裝步驟不算復(fù)雜，如果網(wǎng)絡(luò)比較好嫩海，整個(gè)過程不到半小時(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 公司開發(fā)的官册，已經(jīng)專注于開發(fā)工具領(lǐng)域 30 多年的上市公司。整個(gè) NativeScript 的能力和它的名字一樣是專門為了 iOS 和 Android 而開發(fā)的难捌，但是寫法卻是 JavaScript膝宁。和上面說的 Ionic 不一樣是套殼 Webview，NativeScript 還是在 Js 和 Native 之間打通了一座橋梁根吁，真正的使用 Native Code 進(jìn)行頁(yè)面的渲染员淫，這也使的它的表現(xiàn)能力比 Ionic 要強(qiáng)，從官網(wǎng)上看他也支持不同的 Web 框架寫法击敌，比如 Vue介返，React，包括 TS 支持沃斤，當(dāng)然用原生 JS 和 HTML 也可以編寫圣蝎，官網(wǎng)：https://nativescript.org/。

下邊看一下他的安裝環(huán)境和開發(fā)工具體驗(yàn)衡瓶，依然是 MacOS 系統(tǒng)環(huán)境搭建徘公。

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

npm install -g nativescript

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

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 打開就可以編輯，目錄結(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 類似内边，也是有個(gè) debug 的 apk 被裝到模擬器里了，測(cè)試了一下本地修改前端代碼待锈，webpack 本地會(huì)進(jìn)行 watch 和 sync 到模擬器漠其，實(shí)現(xiàn)熱更新，速度還可以，但是需要頻繁的冷起 app 才生效和屎。

1.5 AVM

AVM 是由 APICloud 研發(fā)的一套跨端的 JavaScript 框架拴驮，全稱（APICloud-View-Model），寫法類 Vue 也兼容 React JSX柴信，有雙向綁定套啤，組件化和狀態(tài)管理支持，并配套了系統(tǒng)級(jí)別的 API随常，支持云端編譯和發(fā)布到不同的平臺(tái)潜沦，官網(wǎng)是：https://www.apicloud.com/AVMframe，有自己的開發(fā) IDE 支持绪氛，我看今年 12 月份還有在更新 SDK （2021-12-3）止潮，其中 JS Framework 部分是全部開源的，包括 JS 組件庫(kù)钞楼。

我們來(lái)看一下他的安裝環(huán)境和開發(fā)工具喇闸，首先需要注冊(cè) APICloud 賬號(hào)，因?yàn)樗麄兝^承了云端編譯的功能询件，而且 ide 也是需要賬號(hào)登陸同步代碼燃乍。然后下載官網(wǎng)的APICloud Studio 3，如果是 Mac 系統(tǒng)一定要注意宛琅，不能直接在 download 目錄打開刻蟹，需要復(fù)制到應(yīng)用程序文件夾內(nèi)再用。

下載后打開嘿辟，熟悉 vscode 的同學(xué)應(yīng)該能發(fā)現(xiàn)舆瘪，這是一個(gè)基于 vscode 二次開發(fā)的 IDE。

圖片

入口文件是 pages 目錄下的 stml 代碼文件红伦，在上面右鍵實(shí)時(shí)預(yù)覽可以在右邊直接看效果英古，需要注意的是，這里只能預(yù)覽標(biāo)準(zhǔn) H5 的組件及頁(yè)面效果昙读，不能預(yù)覽原生 API 的功能召调，所以推薦要真實(shí)開發(fā)的話，需要使用真機(jī)安裝 AppLoader 進(jìn)行調(diào)試蛮浑，類似 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ì)有提示蕴掏，開發(fā)體驗(yàn)很像小程序障般。

整體來(lái)說開發(fā)環(huán)境和開發(fā)工具是一體的调鲸，流程比較順暢，全程也沒有鼓搗任何命令行工具剩拢，但要根據(jù)官網(wǎng)文檔的引導(dǎo)進(jìn)行使用线得。

1.6 總結(jié)

經(jīng)過對(duì) 5 個(gè)框架的初步講解饶唤，大家可以看出來(lái)基本上大家的開發(fā)流程分成了兩類徐伐，一類是直接把 debug 包裝到手機(jī)上進(jìn)行開發(fā)和調(diào)試，比如 Ioinc募狂，NativeScript办素，還有 Flutter，另外一類則是需要通過一個(gè)額外的 AppLoader 進(jìn)行輔助調(diào)試祸穷，比如 AVM性穿，RN，當(dāng)然后者也支持直接安裝包到真機(jī)雷滚，但是 debug 的方式還是有所區(qū)別需曾。

在開發(fā)工具上，基本上大家都可以使用 Vscode 進(jìn)行開發(fā)祈远，都支持 hotReload 功能呆万，有些提供了自己的 IDE，集成化程度比較高车份，比如 AVM谋减。

二，性能比較

下邊筆者就從性能角度講一下不同框架的對(duì)比情況扫沼，這個(gè)可能是大家最關(guān)注的了出爹。筆者通過編寫一個(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 開發(fā)體驗(yàn)最爛技矮，后邊會(huì)在 API 分析部分細(xì)說：

圖片

圖片

AVM 下的效果：

圖片

圖片

代碼實(shí)現(xiàn)很簡(jiǎn)單抖誉，也沒有做特殊優(yōu)化，沒有滾動(dòng)加載衰倦，沒有交互事件袒炉，直接 1000 條數(shù)據(jù)搞滿，使用的都是官方 list 組件樊零。

性能我們直接 adb shell 進(jìn)入設(shè)備后我磁，使用 top 命令來(lái)觀察 app 進(jìn)程情況：

圖片

其中幀數(shù)我們用 android 的開發(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%	圖片	<p>0m55.549s</p><p></p>
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 卻很低稚失，這說明 cpu 占用率越高說明計(jì)算越多，但是 fps 底說明沒有卡頓恰聘，性能更好句各。

比如我們看 Ionic 的 cpu 占用只有 RN 的一半，但是 fps 卻特別高晴叨，有很明顯卡頓凿宾。所以我們可以說 RN 的性能比 webview 渲染的 Ionic 要好很多，包括 NativeScript 和 AVM 也是這個(gè)道理篙螟，cpu 占比越高菌湃，而 fps 越底，那么性能就越好遍略，可是 cpu 占用高也有個(gè)問題就是會(huì)比較費(fèi)電…

最后我們?cè)倏淳幾g時(shí)間惧所，這關(guān)系到調(diào)試體驗(yàn)，這里面 AVM 最快绪杏，基本是毫秒級(jí)同步到真機(jī)下愈，其他基本都是秒級(jí)的，需要跑 build蕾久。當(dāng)然 Expo 和 AVM 都是有前置 Loader 的势似，所以肯定比沒有 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)說很重要悦即，筆者特意增加了這一對(duì)比項(xiàng)吮成。另外目前 PC 端的編譯各家也有支持，所以還另外增加了 windows盐欺，macOS 平臺(tái)的對(duì)比赁豆。

整體調(diào)研的情況如上圖，對(duì)勾的部分就是官網(wǎng)直接支持編譯析二，叉號(hào)的意思就是官方不支持粉洼，也沒有什么比較成熟的開源解決方案，而單獨(dú)寫了一些框架支持的比如 RN叶摄，F(xiàn)lutter 是有一些還算成熟的開源解決方案可以使用的属韧。

整體來(lái)看，如果只開發(fā) Android 和 iOS 應(yīng)用蛤吓，這五個(gè)框架都沒什么問題宵喂，如果要支持小程序和桌面軟件則要考慮更多，目前來(lái)看 RN 和 Flutter 生態(tài)是最完整的会傲，次之是 Ionic锅棕，當(dāng)然如果您是以微信小程序?yàn)橹鞯拈_發(fā)者并不考慮 desktop 的情況下，那么 AVM 可能是更好的選擇淌山。

四裸燎，生態(tài)情況

4.1 開源生態(tài)，流行度

我們直接用 NPMCompare 來(lái)對(duì)比泼疑，因?yàn)?Flutter 和 AVM 沒有在 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)闆]有找到對(duì)應(yīng)的包和下載量颖低，我們摘取 statista.com 的數(shù)據(jù)來(lái)看一下 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/。

圖片

可以看出到得出的數(shù)據(jù)和我們上邊的結(jié)果類似弧烤，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)說 Flutter 和 RN 基本就是老大和老二澄暮，從 open issues 上看 RN 比 Flutter 更優(yōu)名段，時(shí)間上看大家都是 7，8 年前開始做的泣懊，更新情況也差不多伸辟。

再?gòu)乃阉饕鏌嵩~上做一下分析。

圖片

從 Google Trends 的結(jié)果來(lái)看馍刮，國(guó)內(nèi) apicloud信夫，ionic，nativescript 的熱度差不多卡啰，react native 和 flutter 今年對(duì)比來(lái)看静稻，國(guó)內(nèi)更多的人開始轉(zhuǎn)向 flutter。

4.2 API 支持碎乃，組件豐富程度

這部分從 API 層面對(duì)比五個(gè)框架對(duì)原生能力的支持情況和組件支持的情況姊扔。

前面筆者簡(jiǎn)單的開發(fā)了個(gè) list 功能，我們下邊對(duì)比下各個(gè)框架的基礎(chǔ)組件個(gè)數(shù)（含布局組件）和 API 能力梅誓。

來(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è)初步直觀的感覺购裙，真的夠不夠用還是需要真實(shí)開發(fā)過復(fù)雜應(yīng)用才有絕對(duì)話語(yǔ)權(quán)懂版。

筆者覺得在開發(fā)體驗(yàn)上，F(xiàn)lutter 是獨(dú)一檔的躏率。因?yàn)?Dart 和 TS躯畴，JS 都不太一樣，整個(gè) UI 開發(fā)概念和前端還是有一些理念沖突薇芝。其他使用 JavaScript 技術(shù)開發(fā)的框架蓬抄，AVM，RN夯到，Ionic 其實(shí)都還不錯(cuò)嚷缭。但是 Ionic 支持使用各種不同 JS 庫(kù)來(lái)開發(fā)，比如 React黄娘，Vue峭状，NG 等克滴，而 AVM 支持 Vue 逼争、react 語(yǔ)法特性， RN 則必須是 React劝赔。NativeScript 雖然也支持不同的前端框架開發(fā)誓焦，但是整個(gè)開發(fā)體驗(yàn)則是最差的，他的實(shí)時(shí)編譯着帽，debug 功能以及布局系統(tǒng)真的很爛杂伟，筆者這里不推薦再入坑了，用戶少真的是有原因的仍翰，比如筆者這個(gè)初學(xué)者赫粥，看完他們的布局文檔就直接給勸退了。

而且縱觀所有框架予借，文檔寫的最細(xì)致還是 RN 和 Flutter越平，AVM 這三家。但是 RN 和 Flutter 本土化程度不夠灵迫， Ionic 和 NativeScript 則是國(guó)內(nèi)資料比較少且文檔比較糊弄秦叛，而且都很久不更新了。

五瀑粥，總結(jié)

雖然前面筆者從不同的角度分析了各個(gè)框架的情況挣跋，比如上手，開發(fā)環(huán)境以及簡(jiǎn)單的性能對(duì)比狞换，生態(tài)情況等避咆。但是對(duì)于這些框架來(lái)說舟肉，其實(shí)還有很多研究的空間，這篇文章只是客觀的記錄了筆者對(duì)不同框架初次上手和調(diào)研情況的一個(gè)過程查库。所以難免有一些地方不夠全面度气，但已基本反映出現(xiàn)狀。

從性能上看 AVM 的開發(fā)體驗(yàn)和編譯速度膨报，性能表現(xiàn)都非常好磷籍，雖然是國(guó)產(chǎn)的框架但是不比國(guó)外的要差，其次是 Flutter现柠，RN院领，最后是 Ionic 和 NativeScript。

從開發(fā)體驗(yàn)上來(lái)說够吩，比較舒服的是 RN比然，Ionic 這兩個(gè)，其次是 Flutter 和 AVM周循，F(xiàn)lutter 是因?yàn)?Dart 語(yǔ)法强法，但需要單獨(dú)學(xué)習(xí)，中小企業(yè)選型以及個(gè)人開發(fā)者需要考慮湾笛；而 AVM 則不支持 TS 和其他語(yǔ)言框架饮怯，只支持 JS 語(yǔ)法。最差的是 NativeScript嚎研，基本上沒法實(shí)時(shí)調(diào)試蓖墅，API 也非常的不友好。

總結(jié)下來(lái)临扮，筆者覺得 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)開發(fā)者一些，畢竟有本土化关霸，云端集成传黄，而且 debug 體驗(yàn)也很驚艷。

所以大廠直接上 Flutter 是沒有問題的队寇，Dart 沒有太大難度膘掰，這部分成本不是問題。而其他公司和個(gè)人開發(fā)者如果做國(guó)內(nèi)市場(chǎng)選擇 AVM，RN 還是比較合適的（相比較 NativeScript 和 Ionic识埋，AVM 天然支持國(guó)內(nèi)的小程序凡伊，是重要加分項(xiàng)，而 RN 的文檔窒舟，生態(tài)則比較多）系忙，最后如果考慮 desktop 的適配，那么 Flutter 看起來(lái)就更合適一些了惠豺。

點(diǎn)擊下方鏈接：https://www.apicloud.com/index?uzchannel=272