Using NativeScript to develop native

apps for IOS and Android

By Peter Messenger
Senior Developer Kip Mc Grath Education Services

http://www.petermessenger.com
http://stonecourier.blogspot.com.au/
 What is NativeScript?
A runtime for building and running native
IOS, and (soon) Windows Phone apps with a
single JavaScript (or TypeScript) code base
Developed by Telerik
Open Source
Runs JavaScript on JavaScript VMs
JavaScriptCore on IOS
V8 on Android
Android 4.2 or laterandiOS 7.1 or later
 Nativescript is not like
PhoneGap no DOM
Xamarian no cross compilation
Appcelerator direct access to native
APIs in JavaScript
 Why NativeScript?
Skills reuse
Standard base JavaScript, CSS, optionally TypeScript
Code reuse
Npm modules, 3rd party Android and IOS libraries
More than 50 plugins developed already
https://www.npmjs.com/search?q=nativescript
Easily use Native Apis
No wrappers to access native APIs
Use native UI elements
Open Source
Angular 2 Integration
 Ways to use Nativescript
Telerik Platform
Npm install g nativescript
 Telerik Platform
Backend as a service
Push notifications, cloud data, file storage etc
Analytics
App Builder
Cloud builds (build IOS/android builds)
Nativescript debugging and tooling
Screen Builder
Cost $79 per month (and up)
http://www.telerik.com/purchase/platform
 Telerik Appbuilder IDE
Options
In Browser Client
Visual Studio Extension
Sublime Text Package
Command Line Interface
 Nativescript Command Line
Interface
Free and open source
https://github.com/nativescript/natives
cript-cli

Requirements
Android - JDK, Apache Ant, Android SDK
IOS Xcode, Xcode CLI Tools, IOS SDK
 My recommendation
Use CLI
Test on real devices, compile time very good
Optionally use visual studio for editing
Use TypeScript, not JavaScript

Online platform
Requires good upload speed for projects,
particularly for large projects with lots of files (found
it was painful)
Compile times ok, but again internet speed in an
issue
 Starting an New Project
npm install g nativescript
tns create hello-world
cd hello world
IOS
tns platform add ios
tns run ios emulator
Android
tns platform add android
tns run android emulator
 Project Structure
App
App_Resources
App.css
App.js
Main-page.css
Main-page.js
Main-page.xml
Node_modules

Package.json
Tns_modules
Platforms
Android
ios
 App.js
var application =
require(application);
application.mainModule = main-
page;
application.start();
 Pages
Xml markup structure
Elements <Page>, <Label> are
nativescript modules
Can build your own custom XML
components
<Page>
<Label text=hello world/>
</Page>
 Data Binding
<Page loaded=load>
<Label text={{message}}/>
</Page>

exports.load = function (args)

{
args.object.bindingContext = { message : hello
world};
}
 Data Binding Improved
var observableModule =
require(data/observable);

exports.load = function (args)

{
var data = new observableModule.Observable();
data.set(message, hello world);
args.object.bindingContext = data;
}
 CSS
Label
{
color : red;
font-size : 20;
width : 200;
margin : 20
}

.special
{
color : green;
}
 Layouts, Gestures and
Widgets
Layouts Widgets
AbsoluteLayout Button
DockLayout Label
GridLayout TextField
StackLayout TextView
WrapLayout SearchBar
Switch
Gestures Slider
Tap Progress
Double Tap ActivityIndicator
Long Press Image
Swipe ListView
Pan HtmlView
Pinch WebView
Rotation TabView
SegmentedBar
Features DatePicker
Location TimePicker
Camera ListPicker
Animation Dialogs
 Coming Soon
Weeks/Days
Telerik Listview
Charting
Curated plugin store

November
Calendar
DataForm
AutoComplete TextView

January
Canvas API
Contact Picker
Windows Support (maybe)
 NativeScript- Site
Main site blog, very good documentation and
examples in JavaScript and TypeScript
https://www.nativescript.org/
Twitter
https://twitter.com/nativescript
Source
https://github.com/NativeScript/NativeScript
NativeScript Group
https://
plus.google.com/u/0/communities/117408587889337015
711?cfem=1
My blog with NativeScript examples
http://stonecourier.blogspot.com.au/
 NativeScript Videos
Presentations by TJ VanToll

Welcome to NativeScript
https://
www.youtube.com/watch?v=bFqqRRuhSE
c
Beyond the Basics
https://
www.youtube.com/watch?v=QzhhCGwO4
f8