NativeScript简介

在本文中，我们将看一下NativeScript，这是一个用于使用JavaScript构建移动应用程序的开源框架。 在本文的结尾，您应该对NativeScript是什么，它如何工作以及使用什么技术有一个很好的了解。 除此之外，我们还将回答您在探索新技术时可能遇到的常见问题，例如它与Cordova和React Native等替代技术有何不同，以及Telerik如何参与该项目。

1.什么是NativeScript？

NativeScript是用于构建跨平台本机移动应用程序的框架。 它允许开发人员使用XML，CSS和JavaScript来构建适用于Android，iOS甚至Windows Universal Platform的应用程序。 与使用WebView呈现应用程序UI的Cordova不同，NativeScript使用本机平台的呈现引擎，这意味着它提供了真正的本机用户体验。

2.优点

• 它是免费和开源的。 这意味着只要您不违反Apache 2.0许可 ，就可以为代码做出贡献并按需使用它。
• 它允许您为Android和iOS设备构建真正的本机应用程序。 NativeScript公开的每个UI组件都转换为其相应的本机UI组件。
• 它使您可以通过JavaScript代码访问本机平台API。 您不需要具有Java或Objective-C知识就可以使用本机平台API，因为您可以全部使用JavaScript编写它们。 这意味着，如果您需要访问特定的设备功能，则只需学习如何使用JavaScript访问本机API即可。
• 与混合移动应用程序框架（例如Cordova）提供的体验相比，它为用户提供了更接近本机的体验。
• 它使开发人员可以通过Telerik平台轻松构建，部署和管理其NativeScript应用程序。 我将在后面的部分中进一步讨论Telerik平台。
• 它对新的本机平台提供零日支持。 这意味着您可以在Google或Apple更新其平台时立即使用最新的本机API和UI组件。
• 该文档提供了大量有关如何入门 ，核心概念和用户界面的信息。 还有示例， 教程 ， 论坛 ， 堆栈溢出问题和示例应用程序 ，可以帮助初学者开始使用NativeScript。
• 您可以使用TypeScript编写NativeScript应用程序。 TypeScript是一种可转换为JavaScript并向JavaScript添加面向对象的编程功能的语言。
• 您可以在npm上找到的任何不依赖浏览器和DOMJavaScript库都可以在NativeScript中使用。 这种文库的实例包括实用程序库，如lodash和下划线 。
• 您可以使用NativeScript CLI进行几乎所有操作。 包括创建新项目，添加平台，在设备上运行以及部署到特定平台等基础知识。 除此之外，您还可以安装插件，调试应用程序并上传到应用程序商店。

3.缺点

• NativeScript中没有HTML和DOM。 您将需要学习如何使用不同的UI组件来构建应用程序的UI。
• 缺少经过验证的插件。 在撰写本文时，总共只有16个经过验证的插件 。 尽管npm上列出了许多NativeScript插件 ，但您永远无法真正确定它们的质量。
• 开发人员需要了解本机Android和iOS API，才能访问设备硬件和其他特定于平台的功能。
• 由于其本机性质，您只能在实际设备或仿真器上测试应用程序。 这会使测试的初始设置变慢。 但是，一旦在设备上运行它，就可以接管热重装。 这意味着每次您对源代码进行更改时，它都会立即重新加载应用程序以反映更改。
• 并非所有UI组件都是免费提供的。 如果要使用图表和日历等组件，则需要购买Telerik UI for NativeScript 。

4.如何运作？

NativeScript由JavaScript虚拟机，运行时和桥模块组成。 JavaScript虚拟机解释并执行JavaScript代码。 然后，桥模块将调用转换为特定于平台的API调用，并将结果返回给调用方。 简而言之，NativeScript为开发人员提供了一种通过JavaScript而不是iOS上的Objective-C或Android上的Java来命令本机平台的方法。

当然，幕后还有很多事情要做，但是Telerik的开发人员比我能更好地解释了它，因此，如果您想了解更多有关NativeScript内部工作原理的信息，可以阅读Georgi Atanasov在NativeScript上的文章-技术概述或TJ VanToll关于NativeScript的工作原理的文章。

5.它使用什么技术？

使用NativeScript，您可以使用XML来描述应用程序的UI，使用CSS进行样式设置以及使用JavaScript来添加功能。

如果您更喜欢使用框架来编写JavaScript代码，则可以将TypeScript与Angular 2一起使用。

对于样式，NativeScript仅使用CSS的子集。 这意味着不能使用浏览器环境中可用的所有CSS功能。 例如，您不能使用浮点数或位置属性。 这是受支持CSS属性的完整列表 。 就像在浏览器中一样，您可以添加仅适用于整个应用程序，特定页面或特定UI组件的样式。 如果您更喜欢使用Sass，则可以安装NativeScript Dev Sass插件 。

为了描述用户界面的结构，可以使用XML。 应用程序中的每个页面都应位于其自己的XML文件中。 NativeScript带有预定义的用户界面小部件或组件，可用于构建应用程序的UI。 其中一些组件类似于您在浏览器中使用的不同HTML元素。

例如，有一个Image组件，它等效于img元素，或一个TextField组件，等效于具有文本类型的input元素。 诸如点击按钮之类的事件处理程序将添加到组件本身中。 这是一个例子：

<Button tap="doSomething" />

exports.doSomething = function(){
    // do something
}

要注意的另一件事是，这些组件还充当模板。 如果您熟悉诸如Handlebars或Mustache之类的模板库，则应该在家使用以下语法：

<ListView items="{{ animals }}">
  <ListView.itemTemplate>
    <StackLayout class="animal">
      <Label text="{{ . }}"/>
    </StackLayout>
  </ListView.itemTemplate>
</ListView>

上面的示例使用ListView组件。 顾名思义，该组件允许您创建列表。 animals是在JavaScript文件中定义的数组，并在页面加载时绑定到animals变量。 这使得animals变量可在XML文件中使用。

var animals = ['panda', 'tiger', 'monkey', 'snake', 'mantis'];
function pageLoaded(args){
    var page = args.object;

    page.bindingContext = {
        animals: animals
    }
}

这将输出ListView内数组中的每个项目。

最后，有些插件可让您访问设备硬件和平台特定的功能。 NativeScript预先安装了相机插件 。 这使您可以访问设备的相机并拍照。 然后，您可以在应用程序中保存照片的本地路径，以供以后使用。 特定于平台的功能（例如社交共享）也可以通过安装插件（例如NativeScript Social Share Plugin）来使用 。

6.您可以构建哪些应用程序？

由于NativeScript的本机性质，您可以使用它构建几乎任何类型的应用程序。 以下是一些可以使用NativeScript构建的应用程序示例：

• 与服务器对话的应用程序，例如新闻应用程序和社交网络应用程序。
• 简单的游戏，例如国际象棋，井字游戏或弹球游戏。
• 实时应用，例如聊天应用或实时供稿。 有一个用于NativeScript的Firebase插件 ，您可以使用它来实现实时应用。
• 音乐和视频流应用程序。 有一个视频播放器插件 ，可让您播放本地存储的视频或流式传输远程视频，例如YouTube上的视频。
• 地图和地理位置应用。 有适用于Google Maps的插件和本机地图API 。
• 访问设备硬件的应用。 示例包括相机应用程序和IoT应用程序 。

对于可以使用NativeScript生成的应用程序而言，唯一的限制因素是性能和插件可用性。 用JavaScript编写本机移动应用程序需要付出一定的代价：您真的不能期望构建需要高性能的应用程序。 示例包括具有复杂图形和动画的游戏，具有大量活动部件的应用程序以及后台进程。

另一个限制是插件的可用性。 大多数开发人员都是从Web开发背景来学习NativeScript的。 这意味着它们中的大多数人都不熟悉本机平台API，或者对本机平台API知之甚少，本机平台API可用于创建用于访问设备硬件或特定于平台的功能（例如联系人或消息传递）的插件。

如果您想了解更多有关可以使用NativeScript生成的应用程序的信息，可以查看App Showcases页面。 其中列出的大多数应用程序都在Google Play商店和Apple Store上发布。 这意味着您可以安装它并在设备上运行它，以了解使用NativeScript构建的应用程序的外观及其性能。

7. NativeScript与混合框架相比如何？

如果您不是混合移动应用程序开发的新手，则可能遇到过Cordova和React Native等框架。 NativeScript与这两个框架有关，它们都旨在解决移动应用程序开发领域中的“一次编写，随处运行”的问题。 现在让我们并排看一下每个框架：

	科尔多瓦	反应本机	本机脚本
创作者	尼托比 后来由Adobe Systems购买	脸书	特列里克
用户界面	HTML	UI组件被转换为其本地对应组件	UI组件被转换为其本地对应组件
可以测试	浏览器，模拟器，设备	仿真器，设备	仿真器，设备
用	HTML，CSS，JavaScript	UI组件，JavaScript，CSS子集	UI组件，CSS，JavaScript的子集
本机功能访问	通过插件	本机模块	通过JavaScript进行本机API访问
部署到	Android，iOS，Ubuntu，Windows，OS X，Blackberry 10	Android和iOS。 Windows Universal和Samsung Tizen即将推出	Android和iOS。 Windows Universal即将推出
JavaScript库和框架	任何前端库或框架（例如Angular，Ember）	任何不依赖浏览器的库	任何不依赖浏览器的库
编码方式	任何前端框架都可以用来构建代码	默认情况下，UI标记，JavaScript和CSS都集中在一个文件中	MVVM / MVC模式
JavaScript代码如何执行	网页浏览	JavaScriptCore Engine可以在Android和iOS上执行应用程序代码	Webkit JavaScriptCore引擎可在iOS上执行应用程序代码，并在Android上执行Google的V8 JavaScript引擎

综上所述，Cordova是混合移动应用程序框架的老一代。 它使用WebView呈现应用程序的UI，并通过插件访问本机设备功能。 React Native和NativeScript是新一代，因为它们可以翻译您JavaScript代码，以便可以由本机平台执行。

将来有人可能会为React Native和NativeScript之类的框架想出更好的名字。 但是现在让我们将它们归类为“本机混合框架”，因为它们都使用JavaScript编写应用程序，并且都为用户提供了类似本机的体验和性能。

8. Telerik如何参与该项目？

Telerik是创建NativeScript的公司。 而且，就像其他公司一样，他们需要赚钱才能生存。 因此，您可能会问，如果NativeScript是免费开放源代码，Telerik如何从中赚钱？ 嗯，答案是通过Telerik平台和Telerik UI for NativeScript实现的 。

Telerik平台为开发人员提供了轻松设计，构建，测试，部署，管理和衡量NativeScript应用程序性能所需的工具。 以下是他们提供的工具的一些示例：

• 可视化应用程序构建器，可让您拖放不同的UI组件
• 为您的应用程序提供数据库的云数据库
• 实时应用程序更新，可轻松将更新推送到应用程序，而无需重新将其提交给应用程序商店，并让用户手动更新应用程序
• 一种分析服务，回答诸如您的应用程序的使用方式，性能如何以及用户对它的看法之类的问题

Telerik UI for NativeScript是用于构建应用程序UI的一组组件。 NativeScript已经带有免费的UI组件 ，但是也有付费的UI组件，例如图表和日历 ，只有从Telerik购买时才能使用。

9.后续步骤

如果您想了解有关NativeScript的更多信息，建议您检查以下资源：

• 如果您对NativeScript仍有疑问，请务必查看FAQ页面 。
• 有关使用NativeScript构建hello world应用程序的动手文章，请查看NativeScript 入门 。
• 如果您需要有关NativeScript的文章，视频教程和代码段的集合，请参阅NativeScript小吃和NativeScript资源 。

结论

在本文中，您已经学习了NativeScript的基础知识。 如您所见，NativeScript是使用您已经拥有Web开发人员技能的移动应用程序的不错选择。 我希望本文为您提供了必要的知识，以帮助您确定NativeScript是否适合您。

翻译自: https://code.tutsplus.com/articles/an-introduction-to-nativescript--cms-26771