Building Apps with NativeScript

by Martin Cavoj

2017-02-21, TypeScript Meetup�@Renuo, Wallisellen

​

​

Introduction

• Cross-platform native iOS and Android mobile apps without WebView
• Native UI and performance, while sharing code with the web
• Works with pure Javascript, Typescript or Angular 2
• Access to native APIs
• Plugins using NPM, reusing CocoaPods and Gradle

2

NativeScript CLI

npm install -g nativescript

tns create HelloWorld --ng

tns platform add ios

tns run ios

tns plugin add nativescript-geolocation

​

3

Application architecture

• Components
• Template syntax
• XML using Nativescript UI elements
• Application lifecycle
• Component lifecycle
• Application events
• Directives
• Navigation
• router-outlet
• Page-router-outlet
• Styling
• Platform-specific styles
• Limited support of CSS properties

4

User interface

• Comes with a set of widgets
• Wrapper of the native widget
• Providing common API for them
• Button has a text attribute on both Android and iOS
• On Android, android.widget.Button is used
• On iOS, UIButton is used
• Example of XML with Nativescript UI elements:

5

Debugging

• NativeScript extension for VS Code

​

6

Plugins

7

Native APIs

• 100% direct access to native APIs
• Javascript is converted into native code

8

Live Demo

9

Conclusion

• Pros
• Cross-platform native app with native performance
• Use web skills to build native app
• Reusing your web code
• Extensive documentation

​

• Cons
• Test tooling
• Small discrepancies in documentation

10

Sources

• http://docs.nativescript.org/angular/start/introduction
• https://nativescript.github.io/developer-day-workshop/#chapter1
• https://github.com/NathanWalker/angular-seed-advanced

​

11

Thank you.

Renuo AG | Industriestrasse 44 | 8304 Wallisellen | https://www.renuo.ch | info@renuo.ch | +41 44 370 15 36