typescript 混合应用程序 - Ionic 与 NativeScript

Hybrid App - Ionic vs NativeScript

提问by Mano

I am in mobile space for quite some time and we are having native Android and iOS app already. Now our company is planning to enhance our Mobile Site and our team has chosen Angular 2 + TypeScript + Ionic 2. With great difficulty we have completed our registration form development in Ionic + Angular. Now I came to know about NativeScript to develop Hybrid Apps without webview and since it uses the native UI component people are saying that the look & feel and the performance of the App will be good.

我在移动领域已经有一段时间了，我们已经有了原生的 Android 和 iOS 应用程序。现在我们公司正在计划增强我们的移动站点，我们的团队选择了 Angular 2 + TypeScript + Ionic 2。我们好不容易完成了 Ionic + Angular 的注册表开发。现在我开始了解 NativeScript 来开发没有 webview 的混合应用程序，因为它使用本机 UI 组件，人们说应用程序的外观和感觉以及性能会很好。

I am little bit confused to choose one 1. Angular + TypeScript + Ionic (html, js, css) or 2. Angular + TypeScript + NativeScript (xml, js, css)

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

Also our company's long term plan is to maintain a single source for both iOS, Android and Mobile Site

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

Please help me.

请帮我。

Thanks

谢谢

回答by Nathanael

This is really subjective question/answer as it depends on how much work you want to do. :-)

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

First of all in an Ionic / Angular app you are basically making the same web version at the same time (i.e. its a Hybrid app). Performance canbe a serious issue depending on what you are doing. Simple screens not so much; lots of data will introduce much bigger performance issues. In addition screen layout will probably cause you the most issues as you are basically coding to a small web browser that has totally different screen resolutions based on each and every device and the OS it is running on. If you are needing closer to native performance; there are things you can do to make Ionic faster (i.e. like using CrossWalk) and overall you can generate a decent web/hybrid app in Ionic.

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

However the odds are very likely hybrid will never have anything close to Native performance, nor actually act like a Native App as it is still a web app running in a browser trying to act like a native app.

然而，很有可能混合动力永远不会有任何接近本机性能的东西，也不会真正像本机应用程序一样运行，因为它仍然是一个在浏览器中运行的网络应用程序，试图像本机应用程序一样运行。

Now, if you are looking for Native performance and/or the ability to do things native on the device, then using NativeScript might be the better choice. You get the native performance, and access to all the native controls (i.e. things like real ListViews that can handle thousands of complex items with no slowdown) -- but the cost is that you DO have to create two separate screens and separate css for your app.

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

If you use Angular or VueJS; The actual logic can be shared between both a NativeScript and your Web app. And there are now several excellent ways to do this like xPlat(Angular code sharing platform). But in all of them the screen generation is still different. So for your web component/screen you might have a web mycomponent.html-> <div>{{somevalue}}</div>and in NativeScript Angular mycomponent.html-> <Label text="{{somevalue}}"></Label>. So you end up with a more upfront work in NativeScript as you have to create the two separate screen layout files. This might seem like an issue; but in reality this allows you to actually have the native mobile version laid out much better for a Phone and/or Tablet screens. The also opens up additional options like maybe real time access to the camera in the NativeScript layout, and a upload image file button in the html version.

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

As someone who has used both technologies, I'm firmly in the NativeScript camp for all my new projects; but for some people there are still some valid use cases to use Ionic/Phonegap/Cordova. If the app is already web based and/or nothing that really needs any complex views and/or lots of data shown. In fact the open source xPlatplatform that nStudio offers, has support for both Ionic and NativeScript targets. So that you can code share between all the supported platforms and make the best choice for your company at all points in time.

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

For example; maybe you start with the Ionic/Web build because overall they are basically the same thing. Down the road with xPlat code sharing, you can easily phase your mobile part of the app to Nativescript when you finally do have the extra man power/time and/or need the better performance.

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

Please note NativeScript w/ Angular allows code sharing; in addition if you are a big VueJS fan, NativeScript w/ VueJS also allows code sharing. So their are two excellent ways to do code sharing between your website and your NativeScript app depending on what your company already uses while keeping native performance for your mobile application.

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

回答by Yulian

Short answer

简答

With Ionicyou are building hybrid appsor Progressive Web Apps. The structure of the app is written in HTML and the built app is using WebViews(something like a website inside your app).

使用Ionic，您可以构建混合应用程序或渐进式 Web 应用程序。应用程序的结构是用 HTML 编写的，构建的应用程序使用WebViews（类似于应用程序中的网站）。

With NativeScriptyou are building truly native appsthat do not use the HTML DOMand you'll have to learn the UI components of the platform you are targeting (e.g. iOS/Android). However, native appsare usually faster than hybrid apps and you can access the hardware features like camera, touch, calendar, phone calls, etc. all with TypeScript/JavaScript code.

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

---

---

Long answer

长答案

Here's an extract of a blog postby Danyal Zia. I suggest you read the complete one.

这是Danyal Zia博客文章的摘录。我建议你阅读完整的。

Ionic (2)

离子 (2)

Ionic 2 is a hybrid mobile development framework… okay, so what does it mean by hybrid development? Hybrid apps are like any other apps you can find on the app stores, they run in the same manner (by downloading and installing them), and the user interaction is similar, in fact, most users hardly realize the difference between native apps and hybrid apps.

The interesting thing about hybrid apps is that they are hosted inside a native application which uses the WebView– which is kind of browser-less web pages loader, so you get access to mobile functionalities, such as, camera, contacts, gyroscope, etc. through website languages, like HTML, XML, CSS, etc.

Ionic 2 still uses WebView(just like the previous Ionic version), so you write the HTML code in your Android activities, so it can be slower compared to ReactNativeand NativeScript(we will talk about it later). You can create native looking widgets in Ionic 2, but they are still rendering in WebView inside a native container, and so are not technically native.

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

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

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

Pros:

优点：

• Hybrid web development support. Same code-based can be used to develop applications for Android, iOS, Windows Phone, and web.
• VERY fast development-testing cycle. You write the code and test it on the browser, no need for heavy emulator loading.
• Allow you to write code in TypeScript, making the transition from Angular 2 very easy.
• The same language (TypeScript) can be used to develop applications for every platform.
• Its plugin system makes it available for you to use any kind of native functionalities of devices.

• 混合 Web 开发支持。相同的基于代码可用于开发适用于 Android、iOS、Windows Phone 和 Web 的应用程序。
• 非常快的开发测试周期。您编写代码并在浏览器上进行测试，无需大量加载模拟器。
• 允许您在 TypeScript 中编写代码，使从 Angular 2 的转换变得非常容易。
• 可以使用相同的语言 (TypeScript) 为每个平台开发应用程序。
• 它的插件系统使您可以使用任何类型的设备本机功能。

Cons:

缺点：

• Performance issues may occur if you need to use a lot of callbacks to the native code.
• The same UI look in all the devices may be a deal breaker for those who prefer the native UI look.
• Development of highly advanced graphics or highly interactive transitions can be a complex job.

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

NativeScript

原生脚本

Developed by Telerik, NativeScript allows you to use either JavaScript or TypeScript for the development, so if you have used Angular 2 earlier, then you will have an easy transition. Telerikpreviously developed Kendo UI with tight Angular integration for the hybrid apps, but they later realized, why not provide the true cross-platform native experience?

With TypeScript and Angular 2, you can very easily create components for mobile apps using a declarative style. Claiming to support “write it once, run it everywhere”, the same Angular 2 code can be utilized for the UI for all the platforms it is targeting. NativeScript is a real cross-platform, which means 100% Native API access and its mission is to allow people to use the same code-base for all the platforms.

Unlike ReactNative, NativeScript uses the native UI code (for respective Android and iOS phones) even though you are writing the code in TypeScript/JavaScript! If we consider the performance side, then NativeScript really has the edge over ReactNative, because it is using AngularJS 2 structure for creating components.

The best thing about NativeScript is that it is developed by Telerikwhich assures you that it will keep receiving new updates in the future, as it is backed by professional developers all around the world. So, if you are using commercial applications, you can rely on NativeScript more than ReactNative, as ReactNative is more open-source friendly and relies a lot of contributions from the users. But, NativeScript is also open-source.

NativeScript is also quite matured compared to ReactNative. It is already in 2.0 version, that's not the case with ReactNative which gets new updates less often. NativeScript can share much more code than ReactNative, meaning it will save your time.

由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开发的，它向您保证它将来会不断收到新的更新，因为它得到了世界各地的专业开发人员的支持。因此，如果您使用的是商业应用程序，您可以更依赖于 NativeScript 而不是 ReactNative，因为 ReactNative 更加开源友好，并且依赖于用户的大量贡献。但是，NativeScript 也是开源的。

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

Pros:

优点：

• Real cross-platform support. Single code-base for developing apps for all the supported platforms.
• 100% Native API access. You can access the hardware features like camera, touch, calendar, phone calls, etc. all with TypeScript/JavaScript code.
• Uses the Angular 2 so you can easily transfer your previous web components in your applications.
• Very good support from Telerik.

• 真正的跨平台支持。用于为所有支持的平台开发应用程序的单一代码库。
• 100% 原生 API 访问。您可以使用 TypeScript/JavaScript 代码访问相机、触摸、日历、电话等硬件功能。
• 使用 Angular 2，因此您可以轻松地在应用程序中传输以前的 Web 组件。
• Telerik 提供了很好的支持。

Cons:

缺点：

• Many plugins need to be downloaded separately for the components. Not all plugins are available or verified (i.e., thoroughly tested).
• App size is much larger than ReactNative and Ionic 2. If your users have slow internet connection, then it may be a problem for you.
• There's no support of HTML and DOM in NativeScript, so you need to learn different UI components to build UI of the applications.

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

回答by Marek Maszay

Don't mix Nativescriptwith hybrid apps as hybrid apps are apps which uses webview (like Ionic), Nativescriptis a Native one. Which one of the difference between both types.

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

With Ionic, you can have a single source as you have the same view of all three targets.

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

With Nativescriptuses native element so you will have to do two different views for browsers and for mobiles and some changes between javascript code as some things aren't in browser's API but are in the native side or vice versa.

随着Nativescript使用本地元素，所以你将不得不做的浏览器和手机两种不同的看法和JavaScript代码之间的一些变化有些事情是不是在浏览器的API，但在本机端，反之亦然。

Depends on app what is the target of usage.

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

回答by MoMo

To belatedly add to the excellent answers above, as you mentioned, the business must provide input into the decision process as well. Below are a few subjective questions the business has to help answer:

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

• What impact will funding/identifying developer resources have on the project? I.e.: do we have to make do with what we have? Get new people? Retrain? Hybrid vs. native solutions and whether usage of existing code is required has nontrivial impact. Imagine a solution where either native or front-end developers become more or less redundant...

• What is the impact on the business if the UI/UX is or isn't similar across mobile vs web/responsive/hybrid/PWA? What about the impact of somewhat different capabilities accessing native features like camera, GPS, notifications, etc between native and web/responsive/hybrid/PWA?

• What is the impact of possibly differing app performance across platforms? (ie. native is faster)
• Has the business evaluated the life and maintenance costs of each of these solutions?

• 资助/确定开发者资源会对项目产生什么影响？即：我们必须凑合着我们所拥有的吗？招新人？再培训？混合与原生解决方案以及是否需要使用现有代码具有重要影响。想象一个解决方案，其中本地或前端开发人员或多或少变得多余......

• 如果移动设备与 Web/响应式/混合/PWA 的 UI/UX 相似或不同，对业务有何影响？在原生和 Web/响应/混合/PWA 之间访问原生功能（如相机、GPS、通知等）的一些不同功能的影响如何？

• 跨平台应用程序性能可能不同的影响是什么？（即本地速度更快）
• 企业是否评估了每个解决方案的寿命和维护成本？

The responses are major drivers to go responsive (say grid/flexbox/bootstrap), hybrid (say Ionic), or native (say likes of Nativescript, React Native, or pure os native).

响应是响应式（比如 grid/flexbox/bootstrap）、混合（比如 Ionic）或原生（比如 Nativescript、React Native 或纯操作系统原生）的主要驱动力。

At the end, the final decision is a combination of business and technical drivers.

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