混合应用程序 - Ionic与NativeScript

时间:2016-11-26 14:44:51

标签: angular typescript ionic-framework nativescript

我在移动领域已经有一段时间了,我们已经拥有原生的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和移动网站维护单一来源

请帮帮我。

谢谢

4 个答案:

答案 0 :(得分:41)

这是主观的问题/答案,因为它取决于你想做多少工作。 : - )

首先,在Ionic / Angular应用程序中,您基本上可以同时创建相同的Web版本(即它的混合应用程序)。性能可以是一个严重的问题,具体取决于您正在做什么。简单的屏幕不是那么多;大量数据将引入更大的性能问题。此外,屏幕布局可能会引起您最多的问题,因为您基本上编码为一个小型Web浏览器,该浏览器具有完全不同的屏幕分辨率,基于每个设备及其运行的操作系统。如果你需要更接近原生表现;你可以采取一些措施让Ionic更快(比如使用CrossWalk),总体来说你可以在Ionic中生成一个像样的网络/混合应用程序。

然而,混合物很可能永远不会有本机性能,也不会像Native应用程序那样,因为它仍然是一个在浏览器中运行的Web应用程序,试图像本机应用程序一样。

现在,如果您正在寻找Native性能和/或在设备上执行本机操作的能力,那么使用NativeScript可能是更好的选择。您可以获得本机性能,并可以访问所有本机控件(例如可以处理数千个复杂项目但没有减速的真实ListViews) - 但是成本是您必须为您创建两个单独的屏幕并单独的css应用程序。

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

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

例如;也许你从Ionic / Web构建开始,因为总体而言它们基本相同。通过xPlat代码共享,您可以轻松地将应用程序的移动部分转换为Nativescript,当您最终拥有额外的人力/时间和/或需要更好的性能时。

请注意带有Angular的NativeScript允许代码共享;此外,如果你是一个很大的VueJS粉丝,NativeScript w / VueJS也允许代码共享。因此,根据公司已经使用的内容,同时保持移动应用程序的本机性能,它们是在您的网站和NativeScript应用程序之间进行代码共享的两种绝佳方式。

答案 1 :(得分:33)

简短回答

使用 Ionic ,您正在构建混合应用 Progressive Web Apps 。应用程序的结构是用HTML编写的,构建的应用程序使用WebViews(类似于应用程序内的网站)。

使用 NativeScript ,您构建真正本机应用 不使用HTML DOM ,您必须学习用户界面您要定位的平台的组件(例如 iOS / Android )。但是,原生应用通常比混合应用更快,您可以使用TypeScript / JavaScript代码访问相机,触摸,日历,电话等硬件功能。

长答案

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

离子(2)

  

Ionic 2是一个混合移动开发框架 ......好吧,那么混合开发意味着什么呢?混合应用程序就像您可以在应用程序商店中找到的任何其他应用程序一样,它们以相同的方式运行(通过下载和安装它们),并且用户交互类似,事实上,大多数用户很难意识到本机应用程序和混合应用程序之间的区别应用

     

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

     

Ionic 2仍然使用 WebView (就像之前的Ionic版本一样),因此您在Android 活动中编写HTML代码,因此与< strong> ReactNative 和 NativeScript (稍后我们将讨论)。您可以在Ionic 2中创建具有原生外观的小部件,但它们仍然在本机容器中的WebView中呈现,因此在技术上不是原生的。

<强>赞成

  • 混合网络开发支持。可以使用相同的基于代码的 开发适用于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%的Native API访问,其使命是允许人们为所有平台使用相同的代码库。

     

与ReactNative不同,NativeScript使用本机UI代码(针对各自的Android和iOS手机),即使您使用TypeScript / JavaScript编写代码也是如此!如果我们考虑性能方面,那么NativeScript确实优于ReactNative,因为它使用AngularJS 2结构来创建组件。

     

NativeScript的最大优点是它是由 Telerik 开发的,它确保它将来会继续接收新的更新,因为它得到了全世界专业开发人员的支持。因此,如果您正在使用商业应用程序,那么您可以比ReactNative更依赖NativeScript,因为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。

答案 2 :(得分:17)

不要将 Nativescript 与混合应用混合,因为混合应用是使用webview的应用(如Ionic), Nativescript 是原生应用。两种类型之间的区别之一。

使用Ionic,您可以拥有一个源,因为您拥有所有三个目标的相同视图。

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

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

答案 3 :(得分:1)

如上所述,如上所述,业务必须为决策过程提供输入。以下是企业必须回答的几个主观问题:

  • 资助/识别开发者资源对项目有何影响?即:我们必须做我们拥有的东西吗?结识新朋友?重新训练?混合与本机解决方案以及是否需要使用现有代码具有重大影响。想象一下,本地或前端开发人员或多或少都会变得多余的解决方案......

  • 如果UI / UX在移动与网络/响应/混合/ PWA之间相似或不相似,会对业务产生什么影响?在原生和网络/响应/混合/ PWA之间访问本机功能(如相机,GPS,通知等)的某些不同功能的影响如何?

  • 跨平台可能有不同的应用性能有何影响? (即本机更快)
  • 企业是否评估了每种解决方案的生命和维护成本?

响应是响应的主要驱动因素(比如grid / flexbox / bootstrap),hybrid(比如Ionic)或native(比如Nativescript,React Native或pure os native)。

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