NativeScript框架简介
引言
本文我们将探讨使用JavaScript创建移动应用的开源框架 NativeScript。
看完本文之后，你应该会十分清楚NativeScript框架以及它的工作原理，包括其使用的技术。
除此之外，本文也会解答研究新技术时经常碰到的问题，比如，与其他方案Cordova、React Native的对比，
还有Telerik公司如何参与此项目。
何为NativeScript
NativeScript是一个用于构建跨平台原生移动应用的框架。
它能让开发者使用XML,CSS,JAVASCRIPT，为安卓，IOS，甚至是微软统一平台构建应用。
不像Cordova使用 Webview 渲染应用界面，NativeScript使用原生平台的渲染引擎，这意味着它能实现真正原生用户体验。
优点
-
免费，完全开源。这意味着你可以贡献代码。
而且只要你不违背 [Apache 2.0 许可](https://tldrlegal.com/license/apache-license-2.0-(apache-2.0), 可以自由使用源代码。 -
框架允许你构建真正原生的移动安卓，ios应用。框架提供的每一个UI组件被会被转译成对应的原生UI组件。
-
允许通过JS代码调用原生平台API。由于全部使用JS编写代码，调用原生API无需掌握Java或者OC知识。
这意味着如果你要访问特定设备属性，只需要学习使用JS调用原生API，而且你已经上路。 -
与混合式应用框架，如：cordova, 提供接近原生应用的体验。
-
通过Telerik platform，开发者构建、部署管理NativeScript应用将变得十分容易。
-
无需为新原生平台升级。这意味着任何时候Google, Apple升级平台，开发者仍然可以快速得到最新的原生API和组件。
-
官方文档提供了大量的信息，如：如何上手, 核心概念及用户界面。
还有示例、教程、论坛，Stack Overflow问题，以及帮助新手上手NativeScript示例应用。 -
可以使用Typescript编写NativeScript应用。Ts是一种转译至JS的语言，并且为JS添加的面向对象编程能力。
-
npm上任何不依赖浏览器和DOM的库都可以用在NativeScript中，包括像lodash和underscore这样的库。
-
你可以使用NativeScript cli做几乎任何事。基本的像创建项目，添加平台，在设备运行，部署到特定平台。除了这些，你可以安装插件，调试应用，上传至应用商店。
缺点
-
NativeScript中没有HTML和DOM。需要学习不同的UI组件来构建应用UI。
-
认证插件比较短缺。编写本文之时，总共只有16个认证插件。尽管npm上有许多NativeScript插件， 但是质量不能保证。
-
为了调用设备硬件或特定平台属性，开发者需要知道原生安卓和IOS API。
-
由于NativeScript的原生特性，只能在物理机或者模拟器上测试。测试过程的初始化设置会很慢。一旦在设备运行，热重载将会开启。
每次修改源代码，会立即重新加载APP展示变化。 -
并不是所有的UI组件是免费的。如果你需要使用日历或图表组件，Telerik UI for NativeScript需要付费。
工作原理
NativeScript由JS虚拟机，运行时和桥接模块组成。
JS虚拟机解释并执行JS代码。然后桥接模块转译调用至平台特定API并返回调用结果。
简而言之，NativeScript提供使用JS替代OC或java来控制原生平台的方法。
当然，NativeScript背后还有很多运行组件，Telerik的工程师会解释的更好。
如果你想知道更多NativeScript内部操作，你可以看看 Georgi Atanasov 写的 NativeScript 技术一览
或者 TJ VanToll的文章 NativeScript工作原理
涉及技术
在Nativescript框架中，你可以用XML描述应用UI界面，用css处理样式，用js添加功能。
如果你倾向于使用框架编写js代码，可以选用 TypeScript with Angular 2。
样式方面，Nativescript只是使用CSS的子集。这意味着不是所有浏览器支持的CSS特性可以在Nativescript中使用。
例如，你不能使用浮动和定位属性。 这里有Nativescript支持的全部css属性列表。
就像浏览器一样，你可以给整个应用，特定页面或者只给某个UI组件添加样式。
如果你更喜欢用sass, 可以安装NativeScript Dev Sass plugin插件。
你可以使用XML描述整个用户界面的结构。 应用中的每个页面都有一个独立的XML文件。
你可以用Nativescript自带的用户界面元件或组件构建应用的界面。
有些组件和浏览器里面的HTML元素有点类似。
例如，有Image组件，和img元素类似，TextField组件，和文本框input元素一样。
事件处理，像轻击按钮事件在组件内部添加。以下为示例：
<Button tap="doSomething" />
exports.doSomething = function(){
// do something
}
另外一点需要注意的是组件也可以作为模板。
如果你对handlebar和mustache之类的模板库熟悉的话， 下面的语法你也不陌生:
<ListView items="{{ animals }}">
<ListView.itemTemplate>
<StackLayout class="animal">
<Label text="{{ . }}"/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
上面例子用的是ListView组件。和组件名称一样，你可以用ListView组件创建列表。
animals是定义在js文件中的数组，当页面加载时会绑定到animals变量。
同时XML中也可以使用animals变量。
var animals = ['panda', 'tiger', 'monkey', 'snake', 'mantis'];
function pageLoaded(args){
var page = args.object;
page.bindingContext = {
animals: animals
}
}
上面的代码会在ListView中输出每个元素。
最后，Nativescript提供一些插件，可以允许开发者访问设备硬件和平台特定的属性。
Nativescript默认安装照相机插件，开发者可以访问设备照相机拍摄照片，同时可以在应用中將照片保存至本地。
你可以安装像NativeScript Social Share之类的插件来实现平台特定社交分享功能。
NativeScript可以构建哪些应用
由于Nativescript的原生特性，你可以使用Nativescript创建几乎所有的应用。
这里有一些可以用Nativescript构建的示例应用：
-
与服务端进行数据交互的应用，如：新闻应用，社交网络应用
-
简单的游戏，像chess,tic-tac-toe, 或 pinball
-
实时聊天应用，像聊天应用，实时订阅。有一个 Firebase plugin for NativeScript插件可以实现实时应用
-
音乐和视频流应用，可以使用 video player plugin插件播放本地视频或youtube的远程视频流
-
地图和地理信息应用，可以使用谷歌地图插件和原生地图API
-
访问设备硬件的应用，例子有照相机应用和IoT应用
使用Nativescript创建应用唯一考虑因素是性能和可用插件。
使用js编写原生应用要花点成本。你不能真的指望创建高性能要求的应用。
像带复杂图形和动画的游戏，大量移动计算的应用，带后台进程都属于此类应用。
另外的限制就是配套的插件。大部分使用Nativescript的开发者都有web开发背景。
这意味着大多数开发者不熟悉或有限了解原生API，可以用创建插件访问设备硬件或平台特定功能，像通讯录或短信。
如果你想了解更多Nativescript可以构建的应用，可以查看官方应用展示页面。
大部分列举的应用都在Google应用商店和Apple应用商店上发布。
你可以直接下载这些应用，在真机运行，感受下Nativescript的界面和性能。
同混合式框架比较
| 对比项 | Cordova | React Native | NativeScript |
|---|---|---|---|
| 创建者 | Nitobi,后来被Adobe公司收购 | Telerik | |
| UI界面 | HTML | 可转换为对应原生组件的UI组件 | 可转换为对应原生组件的UI组件 |
| 测试环境 | 浏览器，模拟器，物理设备 | 模拟器, 物理设备 | 模拟器, 物理设备 |
| 使用代码 | HTML, CSS, JavaScript | UI组件, JavaScript, CSS子集 | UI components, CSS子集, JavaScript |
| 原生功能访问 | 通过插件实现 | 原生模块 | 通过js调用原生API |
| 可部署平台 | Android, iOS, Ubuntu, Windows, OS X, Blackberry 10 | Android and iOS. Windows Universal and Samsung Tizen | Android and iOS. Windows Universal |
| JS库框架 | 任何前端框架或库 (e.g. Angular, Ember) | 任何不依赖浏览器库 | 任何不依赖浏览器库 |
| 编码模式 | 任何可以结构化框架 | 默认界面、js、css混在同一个文件中 | MVVM/MVC模式 |
| js代码执行环境 | WebView | Android and iOS 平台 JavaScriptCore引擎执行应用代码 | iOS 使用Webkit JavaScriptCorejs引擎执行代码, Android使用谷歌V8 js引擎执行js |
总体而言，Cordova是老一代的混合应用框架。 它使用webview渲染应用界面，通过插件方法调用原生设备属性。
RN和Nativescript 是新一代框架，这两个框架转译js代码在原生平台执行。
未来有人会给RN和Nativescript这样的框架起个更好的名字。
但现在让我们把它们归类为原生混合框架， 因为它们使用js编写应用，同时提供用户接近原生体验和性能。
Telerik公司如何参与项目
telerik公司创建了Nativescript。和其他公司一样，他们需要收钱获得盈利。
所以你会问，把Nativescript开源免费提供，telerik公司怎么赚钱？
答案在 Telerik Platform和Telerik UI for NativeScript上。
Telerik Platform提供开发者简化设计工具、构建工具、测试工具、部署工具，管理和监测应用性能。
这里有他们提供工具的示例：
- 应用可视化构建器，能够拖拽不同的UI组件
- 供应用使用的云数据库
- 实时应用更新，无需再次提交应用商店或用户手动更新即可推送应用更新
- 统计服务供查看应用使用情况，运行性能以及用户行为分析
Telerik UI 是一系列构建应用的UI组件。
Nativescript已经有免费组件，Telerik提供了像Chart和Calendar之类的付费组件。
后续
如果你了解更多关于Nativescript，我建议你参考下面的资源：
- 如果你对Nativescript还有问题，可以查看FAQ页面
- 这里查看创建一个hello world应用的上手教程
- 如果你要找一系列的文章、视频教程、代码示例，可以前往NativeScript Snacks和 NativeScript Resources网站。
总结
本文你会学习Nativescript的基础部分。如果你是一名web开发者，Nativescript的确是创建应用的优秀选择。
我希望本文能够帮助你掌握Nativescript的基本知识，以便决定是否使用Nativescript。
网友评论