ionic性能android,Ionic4VsReactNative_Ionic4ReactNative性能对比

如果您想开发跨平台的App&＃xff0c;最常见的就是Ionic和React Native框架。两者都有一个充满激情的开发者社区&＃xff0c;并分别在大型企业中大量使用。

但今天&＃xff0c;我想集中讨论Ionic和React Native的不同之处&＃xff0c;看此贴之前你在互联网上见到的所有的对比可能都是不正确的。因为那是以前的对比&＃xff0c;ionic4现在已经正式发布了。

大多数人认为所有跨平台框架的工作方式都是类似的&＃xff0c;并且选择跨平台框架非常简单。只需选择最适合使用的框架即可&＃xff0c;如果是React开发者&＃xff0c;选择React Native; 如果你是一个Angular开发者选择ionic4(先不说这个&＃xff0c;ionic4可以和任何JS框架兼容&＃xff0c;包括React)。

但是....事情的真相是这个决定并不像人们预期的那么简单。

1、Ionic和React Native相同点&＃xff1a;

Ionic:可以让我们用html、css、js的技术开发跨平台可以安装的app、以及PWA、桌面应用程序、移动端web页面

React Native&＃xff1a;利用JS框架React&＃xff0c;但在运行时呈现本机UI元素&＃xff0c;允许您构建iOS和Android应用程序。

通过这种方式&＃xff0c;Ionic和React Native都有相同的使命&＃xff1a;使用技术X为平台Y构建&＃xff0c;其中X和Y传统上不一样。

Ionic和React Native以及所有混合应用程序开发框架(包括Ionic)都允许访问本机设备功能&＃xff0c;如摄像头&＃xff0c;生物识别&＃xff0c;地理定位和离线存储。

2、 Hybrid-Native与Hybrid-Web

为了实现构建特定平台的目标&＃xff0c;这些技术中的每一种都具有不同的理念。在我看来&＃xff0c;我们可以将这些信念分为两大类&＃xff1a;Hybrid-Native和Hybrid-Web。

Hybrid-Native

1、本机UI&＃xff0c;共享代码

React Native与Xamarin和NativeScript一起允许您使用一种语言编写用户界面(UI)&＃xff0c;然后在运行时编排本机UI控件。

它是“跨平台”的&＃xff0c;因为React Native框架已将Javascript中的调用映射到管理特定移动平台的本机UI的调用。例如&＃xff0c;在移动应用上呈现文本的React Native组件将被转换为两个独立的组件&＃xff1a;Android的[TextView]和iOS的[UIView]。因此&＃xff0c;您不是跨平台共享组件&＃xff0c;而是共享代码。

这就是为什么这种方法的支持者会说你正在构建一个真正的本机应用程序。您的Javascript代码在底层运行并编排本机UI控件&＃xff0c;以便您的应用程序UI本机运行(几乎但不完全)。

这意味着React Native必须支持您要使用的基础本机UI组件以及该组件的任何自定义&＃xff0c;以便使用该组件或对其进行更改。

例如&＃xff0c;假设您想要更改按钮周围的边框。如果React Native没有为该边框打开自定义&＃xff0c;则无法直接进入本机实现来手动编程它&＃xff0c;您将无法对其进行修改。这并不意味着你不能改变边界&＃xff0c;这只是意味着在某些情况下比预期更难做到这一点。

这也意味着&＃xff0c;如果您梦想可以在所有数字体验中使用的单个共享可重用UI组件库&＃xff0c;那么Hybrid-Native模型(即React Native&＃xff0c;Xamarin&＃xff0c;NativeScript等)将不会是正确的方法。

2、共享代码库&＃xff0c;加上本地代码

React Native项目中的代码重用量取决于您希望在本机层自定义应用程序的程度。如果您坚持使用View&＃xff0c;Text&＃xff0c;Image和Touchable等基本UI原语&＃xff0c;那么您的代码将在每个平台上运行&＃xff0c;这意味着您将获得接近100&＃xff05;的代码重用。

另一方面&＃xff0c;如果您有很多本机自定义项&＃xff0c;那么您的项目将涉及三个独立的代码库&＃xff1a;两个用于管理Android和iOS的UI&＃xff0c;以及控制器代码将存在的共享代码库。在最近 Airbnb移动团队的一篇文章中&＃xff0c;他们解释了这在他们的项目中是如何发挥作用的&＃xff1a;

“尽管React Native功能中的代码几乎完全在各个平台上共享&＃xff0c;但我们的应用程序中只有一小部分是React Native ...因此&＃xff0c;我们在三个平台而不是两个平台上支持代码。”

最后&＃xff0c;React Native和其他Hybrid-Native框架是很好的解决方案&＃xff0c;具有许多优点。即&＃xff0c;能够使用大多数Javascript构建真正的本机UI&＃xff0c;同时享受高度的代码共享。特别是&＃xff0c;如果您想将跨平台解决方案混合到现有的本机代码库中&＃xff0c;拥有现有的本机技能&＃xff0c;更喜欢基于JS的本机特定语言&＃xff0c;或者只计划定位iOS和Android&＃xff0c;我们建议您选择此方法。

Hybrid-Web

1、Web UI&＃xff0c;共享组件

ionic采取不同的立场。您的应用程序中使用的UI组件实际上是跨所有平台运行的&＃xff0c;而不是您的Javascript代码充当控制本机UI元素的桥梁。在移动应用程序中&＃xff0c;这些组件在webview容器中执行。在Progressive Web App中&＃xff0c;它们在浏览器中运行。而且&＃xff0c;在原生桌面应用程序中&＃xff0c;它们可以在像Electron这样的桌面容器中运行。

为什么这很重要&＃xff1f;这有几个原因......

1、设计一致性

首先&＃xff0c;如果您正在构建设计系统并希望在应用程序和数字体验中实施UX和品牌一致性(例如&＃xff0c;这是我们构建的所有应用程序中应该使用的确切按钮) - 只有一种方法可以实现&＃xff1a;通过在所有数字平台上共享组件&＃xff0c;如移动&＃xff0c;桌面&＃xff0c;本机和Web。此外&＃xff0c;如果您想确保为一个应用程序构建的组件可以在任何项目中重复使用&＃xff0c;那么目前使用Web组件是唯一的方法。

2、可移植性

由于Ionic基于HTML&＃xff0c;CSS和Javascript&＃xff0c;因此您的UI在便携式标准化层上运行。寻找一个完全可自定义的组件&＃xff0c;无论您的应用运行在哪个平台上&＃xff0c;该组件都会自动运行&＃xff1f;Ionic通过使用开放的Web标准使这成为可能。您甚至可以在诸如Progressive Web Apps(PWA)等新平台上运行您的Ionic应用程序&＃xff0c;而无需进行任何更改。

3、可定制

Ionic开发人员经常吹嘘的一件事就是能够完全自定义UI的每一点。例如&＃xff0c;您可以通过使用Web来完全和完全控制UI&＃xff0c;这提供了大量开箱即用的样式属性。从一个简单的&＃96;

&＃96;标签开始&＃xff0c;把它变成你想要的任何东西&＃xff01;

如果您想基于每个平台自定义应用程序的设计&＃xff0c;那么在单个代码库中使用易于使用的基于每个平台的CSS样式(Ionic的技术提供)时&＃xff0c;这样做会更容易。

4、稳定性

最后&＃xff0c;在网络上构建的最大好处可能是平台的稳定性。通过所有现代浏览器支持的开放式Web标准&＃xff0c;您可以确信无论您今天写的是什么&＃xff0c;明天都可以使用。其他前端工具正在不断发展和变化&＃xff0c;而不必过多关注向后兼容性。

一个代码库&＃xff0c;随处运行

使用Hybrid-Web方法&＃xff0c;您的UI使用HTML / CSS / JS构建&＃xff0c;本机功能通过抽象底层平台依赖项的可移植API(或“插件”)进行访问。

而不是整个UI取决于本机平台&＃xff0c;只有某些本机设备功能&＃xff0c;如相机&＃xff0c;是平台相关的。

这允许您的应用程序在网络运行的任何地方运行&＃xff1a;iOS&＃xff0c;Android&＃xff0c;浏览器&＃xff0c;桌面/electron&＃xff0c;PWA 等等..

这也意味着您的UI层可以在所有平台之间共享。这是非常重要的一点&＃xff1a;即使您在Ionic默认的特定于平台的设计之外自定义外观&＃xff0c;您也永远不需要将应用程序拆分为多个代码库。

最重要的是&＃xff0c;通过使用基于Web的调试工具(如Chrome Developer工具)&＃xff0c;您还可以同时调试多个平台&＃xff0c;从长远来看可以节省您的时间。这实际上是一个巨大的好处。我们经常听说能够在浏览器中构建大量应用程序是使用Ionic构建最实际的好处之一。

总结一下&＃xff0c;这里是我推荐Ionic(“Hybrid-Web”)方法进行跨平台开发的场景&＃xff1a;

您不仅要为移动设备(iOS和Android)构建应用程序&＃xff0c;还要为桌面和浏览器构建应用程序。

您不希望为每个目标平台重写UI。

所有目标平台上的UI自定义和设计一致性至关重要。

您希望为自定义组件或第三方库打开UI的可能性。

您希望从庞大的现有Web开发人才库中招聘并构建一个Javascript组织。

3、Ionic和React Native性能怎么样&＃xff1f;

现在让我们来谈谈评估Hybrid-Web方法时房间里的大象。Hybrid-Native的支持者经常会说&＃xff1a;“但性能怎么样&＃xff1f;&＃xff01;”

事实上&＃xff0c;对于绝大多数用例而言&＃xff0c;混合框架(Hybrid-Native和Hybrid-Web)将具有相似的性能。(这是进过大量测试的)如果您想了解Ionic应用程序的执行情况&＃xff0c;我邀请您查看我们的一个示例应用程序并将其用于旋转。请记住&＃xff0c;即使在原生应用中&＃xff0c;“糟糕的代码”也会让您的应用变得迟钝。因此&＃xff0c;请始终确保在构建时使用最佳实践。

最后&＃xff0c;如果性能是您唯一的关注点&＃xff0c;那么您也可以完全使用iOS和Android工具集进行原生设置。对于性能敏感的应用程序&＃xff0c;在成本和开发时间方面与原生 sdk保持一致可能是值得的。

4、那么这是什么意思&＃xff1f;

如果您正在用React Native或任何其他Hybrid-Native框架和Ionic对比性能&＃xff0c;或者说其他混合框架比ionic4运行速度快&＃xff0c;那么请你采用正确的测试方法。

虽然两者都是可靠的框架&＃xff0c;并且可以帮助您构建出色的应用程序&＃xff0c;但您的团队或组织的选择取决于您的整体愿景和应用程序的理想功能。此外&＃xff0c;您还必须确保根据哪些因素对您进行评估&＃xff0c;例如&＃xff1a;设计一致性&＃xff0c;自定义&＃xff0c;平台独立性&＃xff0c;可移植性等。

当您考虑选择技术来应对您的应用程序开发活动的首要任务时&＃xff0c;您可能会发现一个明显的赢家出现在您的下一个项目的其余部分之上。请记住&＃xff0c;选择与您习惯使用的技术堆栈关系不大&＃xff0c;而更多地与您的应用程序的值如何与构建它的方法一致。

PS这是一个备忘单&＃xff0c;可以帮助您比较跨平台框架之间的选项&＃xff1a;

来源&＃xff1a;https://ionicframework.com/resources/articles/ionic-vs-react-native-a-comparison-guide#hybrid-native-vs.-hybrid-web