网站怎么排版,金溪那里可以做网站,wordpress左侧产品分类目录,平台设计图片欣赏跨平台开发框架到底哪家强#xff1f;目前市场上有多个专业做跨平台开发的框架#xff0c;那么对开发者来说究竟哪一个框架更符合自己的需求呢#xff1f;笔者特地总结对比了一下不同框架的特性。国内外笔者选择了一共5个主流的测评对象#xff0c;分别是RN#xff0c;Flu… 跨平台开发框架到底哪家强目前市场上有多个专业做跨平台开发的框架那么对开发者来说究竟哪一个框架更符合自己的需求呢笔者特地总结对比了一下不同框架的特性。国内外笔者选择了一共5个主流的测评对象分别是RNFlutterIonicNativeScript以及用友APICloud团队开发的AVM。目前来看比较火的应该是 Flutter次之 RN具体还要看企业的应用场景和领域AVMIonicNativeScript 在不少企业和个人开发者中也使用率较高。一安装环境开发工具对比。任何框架的安装环境都代表了这个框架对新手是否友好。所以笔者特别从安装环境开发工具上介绍各个不同框架的情况来比较一下新人上手的成本和门槛笔者是 MacOS 用户以下全文介绍的都是在 Mac 下的开发环境和开发工具。1.1 React NativeRN 是Facebook于2015年4月开源的跨平台移动应用开发框架到现在已经发展了6年多了目前最新版本是0.662021年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 FlutterFlutter 从出生2018年发布v1.0到现在也3年多了是 Google 力推的跨端开发框架和 RN 不同的是开发语言用的 Dart 而不是 JavaScript官网在这里https://flutter.dev/最近几年发展的比较猛各大公司都在主端业务引入包括笔者所在的公司也有很多业务使用 Flutter 进行了 UI 部分的开发下边笔者就简单介绍一下 Flutter 的开发环境和工具。首先肯定是需要下载安装完整的 Xcode 和 Xcode developer tools开发工具默认大家都装了之后不在赘述。需要先下载 Flutter 的 SDKhttps://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 IonicDrifty Co.在2013年推出了Ionic可以说是混合式开发hybrid的鼻祖了他推出之前大家一般都是在 PhoneGap 下开发混合式开发应用Ionic 一开始是和 Angular 高度集成的现在已经支持了 React 和 Vue 集成以及可以使用 Cordova 的库生态整体来说还是不错的优点是 Web 技术为主缺点也很明显Webview 的表现和性能与 RNFlutter 那种编译后转 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 Clinpm 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 NativeScriptNativeScript是由Progress 公司开发的已经专注于开发工具领域30多年的上市公司。整个 NativeScript 的能力和它的名字一样是专门为了 iOS 和 Android 而开发的但是写法却是 JavaScript。和上面说的 Ionic 不一样是套壳 WebviewNativeScript 还是在 Js 和 Native 之间打通了一座桥梁真正的使用 Native Code进行页面的渲染这也使的它的表现能力比 Ionic 要强从官网上看他也支持不同的 Web 框架写法比如 VueReact包括 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.jsVue 实例被 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 AVMAVM 是由 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 中的二维码就可以实时看到真机效果了。在真机上像网络wifi 这些系统级别 API 就可以正常使用和预览了报错也会有提示开发体验很像小程序。整体来说开发环境和开发工具是一体的流程比较顺畅全程也没有鼓捣任何命令行工具但要根据官网文档的引导进行使用。1.6 总结经过对5个框架的初步讲解大家可以看出来基本上大家的开发流程分成了两类一类是直接把 debug 包装到手机上进行开发和调试比如 IoincNativeScript还有 Flutter另外一类则是需要通过一个额外的 AppLoader 进行辅助调试比如 AVMRN当然后者也支持直接安装包到真机但是 debug 的方式还是有所区别。在开发工具上基本上大家都可以使用Vscode 进行开发都支持 hotReload 功能有些提供了自己的IDE集成化程度比较高比如 AVM。二性能比较。下边笔者就从性能角度讲一下不同框架的对比情况这个可能是大家最关注的了。笔者通过编写一个简单的超长的 viewlist 来进行横向比较代码笔者放到这里了https://github.com/xiaojue/ListViewDemo后边大家可以去参考实现一个1000行的图文列表左图右文。RN 效果Flutter 效果Ionic 效果NativeScript 效果这里NativeScript 开发体验最烂后边会在 API 分析部分细说AVM 下的效果代码实现很简单也没有做特殊优化没有滚动加载没有交互事件直接1000条数据搞满使用的都是官方 list 组件。性能我们直接 adb shell 进入设备后使用 top命令来观察 app 进程情况其中帧数我们用android的开发者功能GPU截图来标识编译速度直接用 time 命令统计, 均采用第一次debug启动耗时的时间。比如time ns debug android框架内存CPU使用率FPSdebug编译速度RNexpo go300M78%-116%0m32.229sFlutter190M37%-43%0m21.336sIonic138M49%-65%0m55.549sNativeScript147M19%~20%0m27.862sAVM122MB6%-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模拟器上安装失败所以笔者是用真机测评的可能会有一些影响真机的性能更高一些。三是否支持多端编译含小程序。这里的多端不仅仅指androidiosh5更包含了是否支持国内的小程序编译。因为很多公司目前的业务场景都是需要在不同的APP里跑的所以是否支持多端对我们国内用户来说很重要笔者特意增加了这一对比项。另外目前 PC 端的编译各家也有支持所以还另外增加了 windowsmacOS 平台的对比。框架AndroidiOSH5小程序windows desktopmacOSdesktopReact Native√√√alitaremaxTaroreact-native-windowsreact-native-macOSFlutter√√√MPFlutter√√Ionic√√√X√√NativeScript√√XXXXAVM√√√√XX整体调研的情况如上图对勾的部分就是官网直接支持编译叉号的意思就是官方不支持也没有什么比较成熟的开源解决方案而单独写了一些框架支持的比如 RNFlutter 是有一些还算成熟的开源解决方案可以使用的。整体来看如果只开发 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 更优时间上看大家都是78年前开始做的更新情况也差不多。再从搜索引擎热词上做一下分析。图片从 Google Trends 的结果来看国内 apicloudionicnativescript 的热度差不多react native 和 flutter 2021年对比来看国内更多的人开始转向 flutter。4.2 API 支持组件丰富程度这部分从 API 层面对比五个框架对原生能力的支持情况和组件支持的情况。前面笔者简单的开发了个 list 功能我们下边对比下各个框架的基础组件个数含布局组件和API能力。框架组件个数系统API/Plugin个数开发体验RN3433React无缝切入Flutter171104Dart语法有一定门槛和适应时间Ionic90291支持 ReactVueAngularjsJSTS 开发NativeScript3187实时调试能力太弱AVM31219实时调试能力强类 Vue 语法兼容 React JSX来源参考RN 组件https://reactnative.dev/docs/components-and-apisRN APIhttps://reactnative.dev/docs/accessibilityinfoFlutter 组件https://docs.flutter.dev/reference/widgetsFlutter APIhttps://api.flutter-io.cn/Ionic 组件https://ionicframework.com/docs/componentsIonic APIhttps://ionicframework.com/docs/nativeNativeScript 组件https://docs.nativescript.org/ui-and-styling.htmlNativeScript APIhttps://docs.nativescript.org/api-reference/index.htmlAVM 组件https://docs.apicloud.com/apicloud3/AVM APIhttps://docs.apicloud.com/Client-API/api数据上虽然差别比较大比如 RN 的 API 和组件数虽然少一些但是都是按模块划分的。比如某单个 API Class 下其实是有不少方法可以实现很多能力的。这里只列举了数量只是提供了一个比较粗略的对学习成本的一个初步直观的感觉真的够不够用还是需要真实开发过复杂应用才有绝对话语权。笔者觉得在开发体验上Flutter 是独一档的。因为 Dart 和TSJS 都不太一样整个 UI 开发概念和前端还是有一些理念冲突。其他使用 JavaScript 技术开发的框架AVMRNIonic 其实都还不错。但是 Ionic 支持使用各种不同 JS 库来开发比如 ReactVueNG 等而 AVM 支持 Vue 、react语法特性 RN 则必须是 React。NativeScript 虽然也支持不同的前端框架开发但是整个开发体验则是最差的他的实时编译debug 功能以及布局系统真的很烂笔者这里不推荐再入坑了用户少真的是有原因的比如笔者这个初学者看完他们的布局文档就直接给劝退了。而且纵观所有框架文档写的最细致还是 RN 和 FlutterAVM这三家。但是RN 和 Flutter 本土化程度不够 Ionic 和 NativeScript 则是国内资料比较少且文档比较糊弄而且都很久不更新了。五总结虽然前面笔者从不同的角度分析了各个框架的情况比如上手开发环境以及简单的性能对比生态情况等。但是对于这些框架来说其实还有很多研究的空间这篇文章只是客观的记录了笔者对不同框架初次上手和调研情况的一个过程。所以难免有一些地方不够全面但已基本反映出现状。从性能上看AVM 的开发体验和编译速度性能表现都非常好虽然是国产的框架但是不比国外的要差其次是FlutterRN最后是 Ionic 和 NativeScript。从开发体验上来说比较舒服的是RNIonic这两个其次是Flutter和 AVMFlutter 是因为 Dart 语法但需要单独学习中小企业选型以及个人开发者需要考虑而 AVM 则不支持 TS和其他语言框架只支持 JS 语法。最差的是 NativeScript基本上没法实时调试API 也非常的不友好。总结下来笔者觉得2021年最火的当属 Flutter已经赶超了 RN。整体上看国内外用户目前的选择和份额也大部分被 Flutter和 RN 瓜分殆尽。其他框架中 AVM和 Ionic 各有优势但是从使用体验上手难度社区情况来看国内的 AVM 肯定更适合国内开发者一些毕竟有本土化云端集成而且debug体验也很惊艳。所以大厂直接上 Flutter 是没有问题的Dart 没有太大难度这部分成本不是问题。而其他公司和个人开发者如果做国内市场选择 AVMRN 还是比较合适的相比较 NativeScript 和 IonicAVM天然支持国内的小程序是重要加分项而 RN的文档生态则比较多最后如果考虑 desktop 的适配那么 Flutter 看起来就更合适一些了。
