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 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 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 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 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) 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-cli Requirements Android - JDK, Apache Ant, Android SDK IOS – Xcode, Xcode CLI Tools, IOS SDK

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

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

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”> </Page> <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 { } .special color : green; color : red; font-size : 20; width : 200; margin : 20 } .special color : green;

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

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/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