混合应用——Ionic与NativeScript

Question

我在移动开发领域有一段时间了，我们已经有了本地的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和移动网站。

请帮助我。

谢谢。

- Mano

---

SO不提供推荐，而且对于这个问题的答案主要是基于个人意见的，也不是很有生产力。因此，我投票关闭这个问题。 - toskv

我认为这是一个非常好的问题，下面已经有两个很好的答案了。 - KTCO

虽然你可以使用相同的www文件夹为你的Cordova应用程序和移动网站编写单一源代码，但如果你计划在苹果商店发布，若发现你有一个看起来相同（即使稍微换了外观）的移动网站，你可能会被苹果拒绝。这违反了苹果的应用程序指南，并且是他们专门关注的事情。我鼓励我的客户不要这样做，即使我认为这是一个明智的想法（为了节省维护多个分支），因为被彻底拒绝的风险太大了。 - Neil Cresswell

我在这里已经待了两年，现在决定停止混合/原生混合开发，因为它们中没有一种可以像您可以提供真正专业的解决方案那样运作。NativeScript是一个正在衰落的社区，最终将失败。Flutter很有前途，但同样存在问题。React Native目前还是一个大概率事件。我认为我们需要等待一个真正好的跨平台编码解决方案，并为不同平台开发不同的代码。 - Peter

Answer 1

这是一个非常主观的问题/答案，因为它取决于你想要做多少工作。首先，在Ionic / Angular应用程序中，您基本上同时制作了相同的Web版本（即混合应用程序）。性能可能会成为严重问题，具体取决于您正在做什么。简单的屏幕不会有太大问题；大量数据将引入更大的性能问题。此外，屏幕布局可能会导致最大的问题，因为您基本上是在为一个小型Web浏览器编写代码，该浏览器基于每个设备和运行其上的操作系统具有完全不同的屏幕分辨率。如果您需要更接近本机性能，则可以采取一些措施使Ionic更快（例如使用CrossWalk），并且总体上可以生成一个体面的Web /混合应用程序。但是，混合应用程序很可能永远不会像本机应用程序一样拥有任何接近的本机性能，也不会实际上像本机应用程序那样运行，因为它仍然是在浏览器中运行的Web应用程序，试图像本机应用程序一样运行。

现在，如果您正在寻找本地性能和/或在设备上执行本地操作的能力，则使用NativeScript可能是更好的选择。您可以获得本地性能，并访问所有本地控件（例如，真正的ListView可以处理成千上万个复杂项而不会减速）-但代价是您必须为应用程序创建两个单独的屏幕和单独的CSS。

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

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

例如，也许你开始使用Ionic/Web构建，因为它们基本上是相同的。随着xPlat代码共享的发展，当您最终拥有额外的人力/时间和/或需要更好的性能时，您可以轻松地将应用程序的移动部分逐步转移到Nativescript上。

请注意，NativeScript与Angular允许代码共享；此外，如果您是VueJS的铁杆粉丝，NativeScript与VueJS也允许代码共享。因此，根据您的公司已经使用的内容，有两种优秀的方式可以在您的网站和NativeScript应用程序之间进行代码共享，同时保持移动应用程序的本机性能。

- Nathanael

---

即使你从Ionic2开始，只要你将主要逻辑包装在服务中，就可以随时转换到NativeScript。 - hypery2k

Answer 2

简短回答

Ionic 可以用于构建 混合应用 或者 渐进式Web应用。应用程序的结构是由 HTML 编写的，而构建的应用程序使用了类似于在应用程序中嵌入网站的 WebViews。

NativeScript 可以用于构建真正的 原生应用，它不使用HTML DOM，您需要学习平台的 UI 组件（例如 iOS/Android）。然而，原生应用 通常比混合应用更快，您可以使用TypeScript/JavaScript代码访问硬件功能，如相机、触摸、日历、电话等。

---

详细回答

以下是 Danyal Zia 的博客文章节选。我建议您阅读完整文章。

Ionic (2)

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

有趣的事情是，混合应用程序托管在使用 WebView 的原生应用程序内——这是一种无浏览器页面加载器，因此您可以通过网站语言（如 HTML、XML、CSS 等）获得移动功能，例如相机、联系人、陀螺仪等。

Ionic 2仍然使用WebView（与先前的Ionic版本相同），因此您可以在Android活动中编写HTML代码，但与ReactNative和NativeScript相比，速度可能会慢一些（稍后我们将讨论它）。您可以在Ionic 2中创建本地外观的小部件，但它们仍在本地容器内的WebView中呈现，因此从技术上讲不是本地的。 优点：

• 混合式网页开发支持。可以使用同一代码为Android、iOS、Windows Phone和Web应用程序开发。
• 非常快速的开发测试周期。在浏览器中编写代码并进行测试，无需加载沉重的模拟器。
• 允许您使用TypeScript编写代码，使得从Angular 2的过渡非常容易。
• 可以使用相同的语言（TypeScript）为每个平台开发应用程序。
• 其插件系统使其可用于使用设备的任何类型的本机功能。

缺点：

• 如果需要使用大量回调到本地代码，则可能出现性能问题。
• 对于那些喜欢本地UI外观的人来说，在所有设备上看起来相同的用户界面可能是一个破坏者。
• 开发高级图形或高度交互式过渡可能是一项复杂的工作。

NativeScript

由Telerik开发，NativeScript允许使用JavaScript或TypeScript进行开发，因此如果您之前使用过Angular 2，则将很容易进行过渡。 Telerik先前开发了Kendo UI，并针对混合应用程序进行了紧密的Angular集成，但他们后来意识到为什么不提供真正跨平台的本机体验呢？

使用TypeScript和Angular 2，您可以非常容易地使用声明性样式为移动应用程序创建组件。 它声称支持“一次编写，到处运行”，相同的Angular 2代码可用于所有目标平台的UI。 NativeScript是真正的跨平台，这意味着可以完全访问本机API，并且其使命是允许人们在所有平台上使用相同的代码库。

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

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

NativeScript与ReactNative相比也相当成熟。 它已经是2.0版本了，而ReactNative则较少获得新的更新。 NativeScript可以共享比ReactNative更多的代码，这意味着可以节省您的时间。

优点:

• 真正的跨平台支持。单个代码库用于为所有支持的平台开发应用程序。
• 100％本机API访问。 您可以使用TypeScript / JavaScript代码访问硬件功能，如相机，触摸，日历，电话等。
• 使用Angular 2，因此您可以轻松地将以前的Web组件转移到应用程序中。
• Telerik提供非常好的支持。

缺点:

• 很多插件需要单独下载进行组件。并非所有插件都可用或经过验证（即经过彻底测试）。

应用程序的大小比ReactNative和Ionic 2大得多。如果您的用户使用的是慢速互联网连接，则可能会成为问题。

NativeScript不支持HTML和DOM，因此您需要学习不同的UI组件来构建应用程序的UI。

- Yulian

---

Ionic 默认使用与平台相符的本地化样式。 - Ryall

Answer 3

不要将Nativescript与混合应用程序混淆，因为混合应用程序是使用Webview（例如Ionic）的应用程序，Nativescript是一种本地应用程序。这是两种类型之间的区别之一。

使用Ionic，您可以拥有单个源代码，因为所有三个目标具有相同的视图。

使用Nativescript使用本机元素，因此您将需要为浏览器和移动设备进行两个不同的视图，并且需要在JavaScript代码之间进行一些更改，因为某些内容不在浏览器的API中，而在本机端或反之亦然。

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

- Marek Maszay

Answer 4

补充以上优秀答案，正如您所提到的，业务必须对决策过程提供输入。以下是业务需要帮助回答的一些主观问题：

• 资金/确定开发人员资源对项目的影响是什么？例如：我们必须凑合现有资源吗？招聘新人？重新培训？混合与本地解决方案以及是否需要使用现有代码都会产生重大影响。想象一下，如果本地或前端开发人员变得更加多余或不足的解决方案...

• 如果移动端与网页/响应式/混合/PWA之间的UI/UX相似或不相似，对业务的影响是什么？本地和网页/响应式/混合/PWA之间访问相机、GPS、通知等原生功能的能力略有不同，对业务的影响又是什么？

• 跨平台应用程序可能在各个平台上表现不同的影响是什么？（即，本地应用程序更快）
• 业务是否评估了每种解决方案的寿命和维护成本？

这些回复是采用响应式设计（如grid/flexbox/bootstrap）、混合式设计（如Ionic）或本地化设计（如Nativescript、React Native或纯os本地化）的主要驱动因素。

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

- MoMo