Using NativeScript to develop native apps for IOS and Android

By Peter MessengerSenior Developer – Kip Mc Grath Education Services

http://www.petermessenger.comhttp://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 later and iOS 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/nativescript-cl

i

• 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 worldIOS

tns platform add iostns run ios – emulator

Androidtns platform add androidtns 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 WidgetsLayouts• 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

Coming SoonWeeks/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/117408587889337015711?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=bFqqRRuhSEc

• Beyond the Basics– https://www.youtube.com/watch?v=QzhhCGwO4f8

• Diving Deep– https://www.youtube.com/watch?v=oyqHlCxvq78