【问题标题】：Hybrid App - Ionic vs NativeScript混合应用程序 - Ionic vs NativeScript
【发布时间】：2017-04-10 17:06:00
【问题描述】：

我在移动领域已经有一段时间了，我们已经有了原生的 Android 和 iOS 应用。现在我们公司正在计划增强我们的移动网站，我们的团队选择了 Angular 2 + TypeScript + Ionic 2。我们非常困难地完成了在 Ionic + Angular 中的注册表单开发。现在我开始了解 NativeScript 可以在没有 webview 的情况下开发混合应用程序，并且由于它使用原生 UI 组件，人们说应用程序的外观和性能会很好。

我有点困惑选择一个 1. Angular + TypeScript + Ionic (html, js, css) 要么 2. Angular + TypeScript + NativeScript（xml、js、css）

此外，我们公司的长期计划是保持 iOS、Android 和移动网站的单一来源

请帮帮我。

谢谢

【问题讨论】：

SO 不做建议，而且这个问题的答案主要是基于意见的，效率不高。因此我投票结束这个问题。
我认为这是一个很好的问题，下面已经有两个很好的答案了。
虽然您当然可以使用相同的 www 文件夹为 Cordova 应用程序和移动网站编写单一来源的代码，但如果您计划在 Apple 商店发布，您可能会被拒绝如果他们发现你有一个看起来一样的移动网站，即使稍微重新换了皮肤，Apple 也会这样做。这违反了 Apple 的应用程序指南，并且是他们特别关注的内容。我鼓励我的客户不要这样做，尽管恕我直言，节省维护多个分支机构是一个明智的想法，因为被完全拒绝的风险太大了。
我在这里已经两年了，现在决定停止混合/原生混合开发，因为它们都不像您可以提供真正专业的解决方案那样工作。 NativeScript 是一个垂死的社区，它最终会失败。 Flutter 很有前途，但也一样。到目前为止，React Native 可能是一个大项目。我认为我们需要等到我们得到一个非常好的跨平台编码解决方案，然后为不同的平台开发不同的代码。

标签： angular typescript ionic-framework nativescript

【解决方案1】：

这确实是一个主观的问题/答案，因为它取决于您想要做多少工作。 :-)

首先，在 Ionic / Angular 应用程序中，您基本上是在同时制作相同的 Web 版本（即它是一个混合应用程序）。根据您的操作，性能可能是一个严重的问题。简单的屏幕不是那么多；大量数据将引入更大的性能问题。此外，屏幕布局可能会给您带来最多的问题，因为您基本上是在编写一个小型 Web 浏览器，该浏览器具有完全不同的屏幕分辨率，具体取决于每台设备和运行它的操作系统。如果您需要更接近原生性能；您可以做一些事情来使 Ionic 更快（例如使用 CrossWalk），总体而言，您可以在 Ionic 中生成一个不错的网络/混合应用程序。

但是，Hybrid 很可能永远不会有任何接近原生应用的性能，也不会像原生应用一样运行，因为它仍然是在浏览器中运行的网络应用，试图表现得像原生应用。

现在，如果您正在寻找本机性能和/或在设备上执行本机操作的能力，那么使用 NativeScript 可能是更好的选择。您可以获得本机性能，并可以访问所有本机控件（即像真正的 ListViews 这样可以处理数千个复杂项目而不会减速的东西）——但代价是您必须为您创建两个单独的屏幕和单独的 css应用程序。

如果你使用 Angular 或 VueJS；实际的逻辑可以在 NativeScript 和您的 Web 应用程序之间共享。现在有几种很好的方法可以做到这一点，比如xPlat（Angular 代码共享平台）。但在所有这些中，屏幕一代仍然不同。因此，对于您的 Web 组件/屏幕，您可能有一个 Web mycomponent.html -> <div>{{somevalue}}</div> 和 NativeScript Angular mycomponent.html -> <Label text="{{somevalue}}"></Label>。因此，您最终需要在 NativeScript 中进行更多前期工作，因为您必须创建两个单独的屏幕布局文件。这似乎是一个问题；但实际上，这使您实际上可以更好地为手机和/或平板电脑屏幕布置原生移动版本。它还打开了其他选项，例如在 NativeScript 布局中实时访问相机，以及 html 版本中的上传图像文件按钮。

作为同时使用这两种技术的人，对于我的所有新项目，我都坚定地站在 NativeScript 阵营；但对于某些人来说，仍然有一些有效的用例可以使用 Ionic/Phonegap/Cordova。如果应用程序已经是基于网络的和/或没有真正需要任何复杂视图和/或显示大量数据的应用程序。事实上，nStudio 提供的开源xPlat 平台支持 Ionic 和 NativeScript 目标。这样您就可以在所有支持的平台之间进行代码共享，并在任何时候为您的公司做出最佳选择。

例如；也许你从 Ionic/Web 构建开始，因为总的来说它们基本上是一样的。在 xPlat 代码共享的道路上，当您最终确实拥有额外的人力/时间和/或需要更好的性能时，您可以轻松地将应用程序的移动部分转换为 Nativescript。

请注意带有 Angular 的 NativeScript 允许代码共享；此外，如果您是 VueJS 的忠实粉丝，带有 VueJS 的 NativeScript 还允许代码共享。因此，它们是在您的网站和 NativeScript 应用程序之间进行代码共享的两种出色方法，具体取决于您的公司已经使用的内容，同时保持移动应用程序的原生性能。

【讨论】：

即使您从 Ionic2 开始，您也可以稍后切换到 NativeScript，只要您将主要逻辑包装在服务中；)

【解决方案2】：

简答

使用 Ionic，您可以构建 混合应用 或 Progressive Web Apps。应用程序的结构是用 HTML 编写的，构建的应用程序使用 WebViews（类似于应用程序内部的网站）。

使用 NativeScript，您正在构建真正的 本地应用程序，不使用 HTML DOM，您必须学习您的目标平台（例如iOS/Android）。但是，原生应用通常比混合应用更快，您可以使用 TypeScript/JavaScript 代码访问相机、触控、日历、电话等硬件功能。

长答案

这是 Danyal Zia 的 blog post 的摘录。我建议你阅读完整的。

离子（2）

Ionic 2 是一个混合移动开发框架...好吧，那么混合开发是什么意思？混合应用程序与您在应用商店中可以找到的任何其他应用程序一样，它们以相同的方式运行（通过下载和安装它们），并且用户交互相似，事实上，大多数用户几乎没有意识到原生应用程序和混合应用程序之间的区别应用程序。

混合应用的有趣之处在于它们托管在使用 WebView 的本机应用程序中——这是一种无浏览器的网页加载器，因此您可以访问移动功能，例如通过网站语言，如 HTML、XML、CSS 等，如相机、联系人、陀螺仪等。

Ionic 2 仍然使用 WebView（就像之前的 Ionic 版本一样），因此您在 Android activities 中编写 HTML 代码，因此与 strong>ReactNative 和 NativeScript（我们稍后会谈到）。您可以在 Ionic 2 中创建具有原生外观的小部件，但它们仍在原生容器内的 WebView 中呈现，因此在技术上不是原生的。

优点：

混合 Web 开发支持。基于相同的代码可用于开发适用于 Android、iOS、Windows Phone 和 Web 的应用程序。
非常快的开发测试周期。您编写代码并在浏览器，无需繁重的模拟器加载。
允许您使用 TypeScript 编写代码，从而非常轻松地从 Angular 2 过渡。
可以使用相同的语言 (TypeScript) 开发应用程序每个平台。
它的插件系统让你可以使用任何类型的设备原生功能。

缺点：

如果您需要对本机代码使用大量回调，则可能会出现性能问题。
对于那些更喜欢原生 UI 外观的用户来说，所有设备中的相同 UI 外观可能会破坏交易。
开发高度先进的图形或高度交互的过渡可能是一项复杂的工作。

NativeScript

由 Telerik 开发，NativeScript 允许您使用 JavaScript 或 TypeScript 进行开发，因此如果您之前使用过 Angular 2，那么您将可以轻松过渡。 Telerik 之前为混合应用开发了具有紧密 Angular 集成的 Kendo UI，但他们后来意识到，为什么不提供真正的跨平台原生体验呢？

使用 TypeScript 和 Angular 2，您可以使用声明式样式非常轻松地为移动应用创建组件。声称支持“一次编写，到处运行”，相同的 Angular 2 代码可以用于它所针对的所有平台的 UI。 NativeScript 是一个真正的跨平台，这意味着 100% 原生 API 访问，其使命是允许人们在所有平台上使用相同的代码库。

与 ReactNative 不同，NativeScript 使用本机 UI 代码（适用于各自的 Android 和 iOS 手机），即使您是使用 TypeScript/JavaScript 编写代码！如果我们考虑性能方面，那么 NativeScript 确实比 ReactNative 更有优势，因为它使用 AngularJS 2 结构来创建组件。

NativeScript 最好的地方在于它是由 Telerik 开发的，因为它得到了世界各地专业开发人员的支持，因此可以确保它在未来会不断收到新的更新。因此，如果您使用的是商业应用程序，则可以更多地依赖 NativeScript 而不是 ReactNative，因为 ReactNative 对开源更加友好，并且依赖于用户的大量贡献。但是，NativeScript 也是开源的。

与 ReactNative 相比，NativeScript 也相当成熟。它已经在 2.0 版本中，而 ReactNative 的情况并非如此，它获得新更新的频率较低。 NativeScript 可以共享比 ReactNative 更多的代码，这意味着它可以节省您的时间。

优点：

真正的跨平台支持。为所有支持的平台开发应用程序的单一代码库。
100% 原生 API 访问。您可以使用 TypeScript/JavaScript 代码访问相机、触控、日历、电话等硬件功能。
使用 Angular 2，因此您可以轻松地将以前的 Web 组件转移到您的应用程序中。
来自 Telerik 的非常好的支持。

缺点：

需要为组件单独下载许多插件。并非所有插件都可用或经过验证（即经过彻底测试）。
应用程序的大小比 ReactNative 和 Ionic 2 大得多。如果您的用户的互联网连接速度较慢，那么这对您来说可能是个问题。
NativeScript 中不支持 HTML 和 DOM，因此您需要学习不同的 UI 组件来构建应用程序的 UI。

【讨论】：

Ionic 默认使用取决于平台的原生样式

【解决方案3】：

不要将 Nativescript 与混合应用混用，因为混合应用是使用 webview（如 Ionic）的应用，Nativescript 是原生应用。两种类型的区别是哪一种。

使用 Ionic，您可以拥有单一来源，因为您对所有三个目标都有相同的看法。

使用 Nativescript 使用原生元素，因此您必须为浏览器和移动设备执行两种不同的视图，并在 javascript 代码之间进行一些更改，因为有些东西不在浏览器的 API 中，而是在本机端反之亦然。

取决于应用程序的使用目标。

【讨论】：

【解决方案4】：

正如您所提到的，为了迟到地补充上述出色的答案，企业还必须为决策过程提供输入。以下是企业必须帮助回答的一些主观问题：

资助/确定开发人员资源对项目有什么影响？即：我们是否必须利用我们所拥有的？结交新朋友？再培训？混合与原生解决方案以及是否需要使用现有代码具有非同寻常的影响。想象一个解决方案，其中原生或前端开发人员或多或少变得多余......
如果 UI/UX 在移动与 Web/响应式/混合/PWA 之间相似或不相似，对业务有何影响？在原生和 web/responsive/hybrid/PWA 之间访问摄像头、GPS、通知等原生功能的功能略有不同会产生什么影响？
跨平台的应用程序性能可能不同会产生什么影响？（即原生速度更快）
企业是否评估了每个解决方案的使用寿命和维护成本？

响应是实现响应式（比如 grid/flexbox/bootstrap）、混合式（比如 Ionic）或原生（比如 Nativescript、React Native 或纯 os native）的主要驱动力。

最后，最终决定是业务和技术驱动因素的结合。

【讨论】：