前端译趣我爱编程Ios@IONIC

NativeScript框架简介

2018-05-24  本文已影响114人  linc2046
NativeScript框架简介

引言

本文我们将探讨使用JavaScript创建移动应用的开源框架 NativeScript。
看完本文之后，你应该会十分清楚NativeScript框架以及它的工作原理，包括其使用的技术。
除此之外，本文也会解答研究新技术时经常碰到的问题，比如，与其他方案Cordova、React Native的对比，
还有Telerik公司如何参与此项目。

何为NativeScript

NativeScript是一个用于构建跨平台原生移动应用的框架。
它能让开发者使用XML,CSS,JAVASCRIPT，为安卓，IOS，甚至是微软统一平台构建应用。
不像Cordova使用 Webview 渲染应用界面，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构建的示例应用：

使用Nativescript创建应用唯一考虑因素是性能和可用插件。

使用js编写原生应用要花点成本。你不能真的指望创建高性能要求的应用。

像带复杂图形和动画的游戏，大量移动计算的应用，带后台进程都属于此类应用。

另外的限制就是配套的插件。大部分使用Nativescript的开发者都有web开发背景。

这意味着大多数开发者不熟悉或有限了解原生API，可以用创建插件访问设备硬件或平台特定功能，像通讯录或短信。

如果你想了解更多Nativescript可以构建的应用，可以查看官方应用展示页面。

大部分列举的应用都在Google应用商店和Apple应用商店上发布。

你可以直接下载这些应用，在真机运行，感受下Nativescript的界面和性能。

同混合式框架比较

对比项 Cordova React Native NativeScript
创建者 Nitobi,后来被Adobe公司收购 Facebook 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提供开发者简化设计工具、构建工具、测试工具、部署工具，管理和监测应用性能。

这里有他们提供工具的示例：

Telerik UI 是一系列构建应用的UI组件。
Nativescript已经有免费组件，Telerik提供了像Chart和Calendar之类的付费组件。

后续

如果你了解更多关于Nativescript，我建议你参考下面的资源：

总结

本文你会学习Nativescript的基础部分。如果你是一名web开发者，Nativescript的确是创建应用的优秀选择。
我希望本文能够帮助你掌握Nativescript的基本知识，以便决定是否使用Nativescript。

译者注

上一篇 下一篇

猜你喜欢

热点阅读