1. Using NativeScript to develop native apps for IOS and Android
By Peter Messenger
Senior Developer – Kip Mc Grath Education Services

2. 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 later and iOS 7.1 or later

3. Nativescript is not like…
PhoneGap – no DOM
Xamarian – no cross compilation
Appcelerator – direct access to native APIs in JavaScript

4. Why NativeScript? Skills reuse Code reuse Easily use Native Apis
Standard base JavaScript, CSS, optionally TypeScript
Code reuse
Npm modules, 3rd party Android and IOS libraries
More than 50 plugins developed already
Easily use Native Apis
No wrappers to access native APIs
Use native UI elements
Open Source
Angular 2 Integration

5. Ways to use Nativescript
Telerik Platform
Npm install –g nativescript

6. Telerik Platform Backend as a service Analytics App Builder
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)

7. Telerik Appbuilder IDE Options
In Browser Client
Visual Studio Extension
Sublime Text Package
Command Line Interface

8. Nativescript Command Line Interface
Free and open source
Requirements
Android - JDK, Apache Ant, Android SDK
IOS – Xcode, Xcode CLI Tools, IOS SDK

9. My recommendation Use CLI Optionally use visual studio for editing
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

10. 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

11. Project Structure Platforms 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

12. App.js
var application = require(“application”); application.mainModule = “main-page”; application.start();

13. Pages Xml markup structure
Elements <Page>, <Label> are nativescript modules
Can build your own custom XML components
<Page>
<Label text=“hello world”/>
</Page>

14. Data Binding <Page loaded=“load”> </Page>
<Label text=“{{message}}”/>
</Page>
exports.load = function (args) {
args.object.bindingContext = { message : “hello world”}; }

15. 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; }

16. CSS Label { } .special color : green; color : red; font-size : 20;
width : 200;
margin : 20 }
.special
color : green;

17. Layouts, Gestures and Widgets
AbsoluteLayout
DockLayout
GridLayout
StackLayout
WrapLayout
Gestures
Tap
Double Tap
Long Press
Swipe
Pan
Pinch
Rotation
Features
Location
Camera
Animation
Widgets
Button
Label
TextField
TextView
SearchBar
Switch
Slider
Progress
ActivityIndicator
Image
ListView
HtmlView
WebView
TabView
SegmentedBar
DatePicker
TimePicker
ListPicker
Dialogs

18. Coming Soon Weeks/Days… Telerik Listview Charting Curated plugin store
November
Calendar
DataForm
AutoComplete TextView
January
Canvas API
Contact Picker
Windows Support (maybe)

19. NativeScript- Site
Main site – blog, very good documentation and examples in JavaScript and TypeScript
Twitter
Source
NativeScript Group
My blog with NativeScript examples

20. NativeScript Videos Presentations by TJ VanToll
Welcome to NativeScript
Beyond the Basics
Diving Deep